Learning Flex – Lesson 11, part II

Advanced Data Grid

The Advanced Data Grid (ADG) is part of the Data Visualization package (not included in the SDK). You can download a trial version of this package from Adobe (it’s on the same page as the SDK download here) but you’ll see a trial watermark across your ADG or charts. To remove this, you’ll need to invest in the professional version of FlexBuilder (or FlashBuilder for V4+). The ADG is larger and potentially more problematic than the regular Data Grid – see this post by Doug McCune for details.

Sorting

The ADG allows for multiple column sorting. The behavior of this feature is determined by the sortExpertMode property. When set to false, clicking the header area of a column makes it the primary sort, additional sort criteria can be set by clicking in the multiple column sort area (the small area on the right of each column). Numbers in this area indicate the order of sort. Resetting the top level sort is accomplished by clicking in the header area of a column.

With the property set to true, the multiple column sort area disappears.  To sort in this mode, click on the first column header and then control click on subsequent headers. The sort order numbers will still appear.

Styling Columns

This is achieved by writing a styling function which should accept two parameters. An Object typed parameter to hold the data for a particular row and an AdvancedDataGridColumn typed parameter which contains information about the column the style is to be applied on.

The function should return an Object which is usually either null, indicating no styling is required or one or more style properties and associated values. An example would be:

public function boldStyle(data:Object, col:AdvancedDataGridColumn):Object{
return {fontWeight:"bold"};
}

This would set all entries of the given column to bold. To specify a style function should be used for a column, set the styleFunction property of the AdvancedDataGridColumn in question to the name of the function you have created.

Styling Rows

To change the style of a particular row (or rows), specify the styleFunction property at the AdvancedDataGrid tag level and code the function to return the style you require based on the row data input.

Styling Cells

To style individual cells, use the styleFunction parameter at the column level and use the data input to determine if the style should be applied.

Grouping Data

The grouping feature allows you to create a grid with an expandable tree to determine what rows of data are visible.  This can be achieved in MXML by using a DataProvider tag with nested grouping elements as shown below:

<mx:AdvancedDataGrid creationComplete="myGroup.refresh()">
<mx:DataProvider>
<mx:GroupingCollection id="myGroup" source="{myData}">
<mx:Grouping>
<mx:GroupingField name="category"/>
</mx:Grouping>
</mx:GroupingCollection>
<mx:DataProvider>
...
</mx:AdvancedDataGrid>

The GroupingField defines the name of the DataProvider‘s attribute the values  should be grouped by. Note the creationComplete call to the refresh method of the GroupingCollection which is required for the grouping to be activated.

This can also be done via creating ActionScript objects and using the creationComplete of the ADG to call the ActionScript setup function.

Display Summary Data

You can only display summary data for data represented by the GroupingCollection class. To do this with MXML, change the GroupingField tag to a tag set with open and closing tags. Add the following tags within it:

<mx:Summaries>
<mx:SummaryRow summaryPlacement="last">
<mx:Fields>
<mx:SummaryField dataField="myField" operation="SUM" label="summary"/>
</mx:Fields>
</mx:SummaryRow>
</mx:Summaries>

The summaryPlacement in SummaryRow defines the position of the summary data within the group and can be first, last or group (which is the row corresponding to the group). You may specify multiple positions if required using a space as a separator.

The dataField in SummaryField defines the column we are summarizing and the operation defines how the summary value is calculated. It can be SUM, MIN, MAX, AVG or COUNT. You may also define your own version and specify it with the summaryFunction property. The label property associates the calculated summary with the column that’s going to display it.

Renderer Providers

Just displaying a summary value may be confusing. To make it more readable, you can also use a renderer provider. Start by defining a custom component (generally you’d base this on Label) and for the text property, provide your message eg “Total Amount is: {data.summary}”. Returning to your ADG, specify the following  (in this case, the custom component has been named SummaryText):

<mx:RendererProvider>
<mx:AdvancedDataGridProvider
dataField="summary"
columnIndex="1"
columnSpan="2"
renderer="SummaryText"/>
<mx:RendererProvider>

The columnIndex specifies what column the renderer is displayed in (zero based index) and columnSpan how many columns it should take up (zero means the whole row).

If you don’t want the document icon displayed in front of each row in a collection, you can remove it by setting the property defaultLeafIcon on the ADG tag to "{null}".

In the same way collections can be defined using ActionScript, a summary can too by creating matching ActionScript objects and setting their properties to match. This would then be called from the creationComplete within the ADG as shown previously.

Advertisements