Flex Examples » DataGrid

Creating complex data provider objects in MXML using Flex 4

Peter deHaan — Wed, 20 Oct 2010 21:04:48 +0000

The following example shows how you can create a complex MX DataGrid data provider with nested objects in MXML using the tag.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

"1.0" encoding="utf-8"?>

 name="MX_DataGrid_dataProvider_Object_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
     id="dg" horizontalCenter="0" verticalCenter="0">
        >
             dataField="firstName" />
             dataField="lastName" />
             dataField="address.town" />
             dataField="address.state" />
             dataField="address.zipCode" />
        >
        >
            >
                 firstName="Carol" lastName="F.">
                    >
                         town="Waltham" state="MA" zipCode="02452" />
                    >
                >
                 firstName="Darrell" lastName="L.">
                    >
                         town="Waltham" state="MA" zipCode="02452" />
                    >
                >
                 firstName="Hans" lastName="M.">
                    >
                         town="San Francisco" state="CA" zipCode="94103" />
                    >
                >
                 firstName="Kevin" lastName="L.">
                    >
                         town="San Francisco" state="CA" zipCode="94103" />
                    >
                >
            >
        >
    >
 
>

Or you can also create the nested object’s using ActionScript, as seen in the following example:

"1.0" encoding="utf-8"?>

 name="MX_DataGrid_dataProvider_Object_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        initialize="init();">
 
    >
        [CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.DataGrid;
            import mx.controls.dataGridClasses.DataGridColumn;
 
            protected var dg:DataGrid;
 
            protected function init():void {
                var cols:Array = [];
                cols.push(new DataGridColumn("firstName"));
                cols.push(new DataGridColumn("lastName"));
                cols.push(new DataGridColumn("address.town"));
                cols.push(new DataGridColumn("address.state"));
                cols.push(new DataGridColumn("address.zipCode"));
 
                var arr:Array = [];
                arr.push({firstName:"Carol", lastName:"F.", address:{town:"Waltham", state:"MA", zipCode:"02452"}});
                arr.push({firstName:"Darrell", lastName:"L.", address:{town:"Waltham", state:"MA", zipCode:"02452"}});
                arr.push({firstName:"Hans", lastName:"M.", address:{town:"San Francisco", state:"CA", zipCode:"94103"}});
                arr.push({firstName:"Kevin", lastName:"L.", address:{town:"San Francisco", state:"CA", zipCode:"94103"}});
 
                dg = new DataGrid();
                dg.columns = cols;
                dg.dataProvider = new ArrayCollection(arr);;
                dg.horizontalCenter = dg.verticalCenter = 0;
                addElement(dg);
            }
        ]]>
    >
 
>

You can also define the nested object inline in your MXML by using two “{” chars instead of 1, as seen in the following example (where the first/outer “{” denotes data binding and the second/inner “{” denotes new Object() shorthand):

"1.0" encoding="utf-8"?>

 name="MX_DataGrid_dataProvider_Object_test"
               xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx">
 
     id="dg" horizontalCenter="0" verticalCenter="0">
        >
             dataField="firstName" />
             dataField="lastName" />
             dataField="address.town" />
             dataField="address.state" />
             dataField="address.zipCode" />
        >
        >
            >
                 firstName="Carol" lastName="F." address="{{town:'Waltham', state:'MA', zipCode:'02452'}}" />
                 firstName="Darrell" lastName="L." address="{{town:'Waltham', state:'MA', zipCode:'02452'}}" />
                 firstName="Hans" lastName="M." address="{{town:'San Francisco', state:'CA', zipCode:'94103'}}" />
                 firstName="Kevin" lastName="L." address="{{town:'San Francisco', state:'CA', zipCode:'94103'}}" />
            >
        >
    >
 
>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

Removing the header indicator and selection indicator from the MX DataGrid control header in Flex 3

Peter deHaan — Sat, 19 Jun 2010 16:43:52 +0000

In a previous example, “Disabling item highlight indicator in the MX List control in Flex 3″, we saw how you could disable the highlight indicator in the MX List control in Flex 3 by subclassing the List control and overriding the protected drawHighlightIndicator() method.

The following example shows how you can remove the header indicator and selection indicator from the MX DataGrid control in Flex 3 by extending the DataGridHeader class, overriding the protected drawHeaderIndicator() and drawSelectionIndicator() methods and setting the headerClass property in the mx_internal namespace.

Since this example uses the mx_internal namespace, you can't always depend on this behavior to work in future versions of the Flex SDK. Use at your own risk.

"1.0" encoding="utf-8"?>

 name="MX_DataGrid_headerClass_drawHeaderIndicator_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:comps="comps.*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
     id="dGrid"
            draggableColumns="false"
            verticalScrollPolicy="on"
            width="360">
        >
             dataField="c1" headerText="Column 1" />
             dataField="c2" headerText="Column 2" />
             dataField="c3" headerText="Column 3" />
        >
        >
            >
                 c1="Row 1, Column 1" c2="Row 1, Column 2" c3="Row 1, Column 3" />
                 c1="Row 2, Column 1" c2="Row 2, Column 2" c3="Row 2, Column 3" />
                 c1="Row 3, Column 1" c2="Row 3, Column 2" c3="Row 3, Column 3" />
                 c1="Row 4, Column 1" c2="Row 4, Column 2" c3="Row 4, Column 3" />
                 c1="Row 5, Column 1" c2="Row 5, Column 2" c3="Row 5, Column 3" />
                 c1="Row 6, Column 1" c2="Row 6, Column 2" c3="Row 6, Column 3" />
                 c1="Row 7, Column 1" c2="Row 7, Column 2" c3="Row 7, Column 3" />
                 c1="Row 8, Column 1" c2="Row 8, Column 2" c3="Row 8, Column 3" />
                 c1="Row 9, Column 1" c2="Row 9, Column 2" c3="Row 9, Column 3" />
            >
        >
    >
 
>

The custom DataGrid header class, comps/CustomDataGridHeader.as, is as follows:

/** http://blog.flexexamples.com/2010/06/19/removing-the-header-indicator-and-selection-indicator-from-the-mx-datagrid-control-header-in-flex-3/ */
package comps {
    import flash.display.Sprite;
    import mx.controls.dataGridClasses.DataGridHeader;
    import mx.controls.listClasses.IListItemRenderer;
 
    public class CustomDataGridHeader extends DataGridHeader {
        public function CustomDataGridHeader() {
            super();
        }
 
        override protected function drawHeaderIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void {
            // ignore
        }
 
        override protected function drawSelectionIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void {
            // ignore
        }
    }
}

And the custom DataGrid control, comps/CustomDataGrid.as, is as follows:

/** http://blog.flexexamples.com/2010/06/19/removing-the-header-indicator-and-selection-indicator-from-the-mx-datagrid-control-header-in-flex-3/ */
package comps {
    import mx.controls.DataGrid;
    import mx.core.mx_internal;
 
    public class CustomDataGrid extends DataGrid {
        public function CustomDataGrid() {
            super();
            mx_internal::headerClass = CustomDataGridHeader;
        }
    }
}

View source is enabled in the following example.

If you wanted to toggle the header indicator or selection indicator instead of disabling them completely, you could add two new variables to your CustomDataGrid class and add some additional logic to your custom DataGrid header class, as seen in the following example:

"1.0" encoding="utf-8"?>

 name="MX_DataGrid_headerClass_drawHeaderIndicator_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:comps="comps.*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
     dock="true">
        >
             label="showHeaderIndicator:">
                 id="ch1" selected="true" />
            >
             label="showSelectionIndicator:">
                 id="ch2" selected="true" />
            >
        >
    >
 
     id="dGrid"
            draggableColumns="false"
            verticalScrollPolicy="on"
            showHeaderIndicator="{ch1.selected}"
            showSelectionIndicator="{ch2.selected}"
            width="360">
        >
             dataField="c1" headerText="Column 1" />
             dataField="c2" headerText="Column 2" />
             dataField="c3" headerText="Column 3" />
        >
        >
            >
                 c1="Row 1, Column 1" c2="Row 1, Column 2" c3="Row 1, Column 3" />
                 c1="Row 2, Column 1" c2="Row 2, Column 2" c3="Row 2, Column 3" />
                 c1="Row 3, Column 1" c2="Row 3, Column 2" c3="Row 3, Column 3" />
                 c1="Row 4, Column 1" c2="Row 4, Column 2" c3="Row 4, Column 3" />
                 c1="Row 5, Column 1" c2="Row 5, Column 2" c3="Row 5, Column 3" />
                 c1="Row 6, Column 1" c2="Row 6, Column 2" c3="Row 6, Column 3" />
                 c1="Row 7, Column 1" c2="Row 7, Column 2" c3="Row 7, Column 3" />
                 c1="Row 8, Column 1" c2="Row 8, Column 2" c3="Row 8, Column 3" />
                 c1="Row 9, Column 1" c2="Row 9, Column 2" c3="Row 9, Column 3" />
            >
        >
    >
 
>

The custom DataGrid header class, comps/CustomDataGridHeader.as, is as follows:

/** http://blog.flexexamples.com/2010/06/19/removing-the-header-indicator-and-selection-indicator-from-the-mx-datagrid-control-header-in-flex-3/ */
package comps {
    import flash.display.Sprite;
    import mx.controls.dataGridClasses.DataGridHeader;
    import mx.controls.listClasses.IListItemRenderer;
    import comps.CustomDataGrid;
 
    public class CustomDataGridHeader extends DataGridHeader {
        public function CustomDataGridHeader() {
            super();
        }
        override protected function drawHeaderIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void {
            if (CustomDataGrid(dataGrid).showHeaderIndicator) {
                super.drawHeaderIndicator(indicator, x, y, width, height, color, itemRenderer);
            }
        }
 
        override protected function drawSelectionIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void {
            if (CustomDataGrid(dataGrid).showSelectionIndicator) {
                super.drawSelectionIndicator(indicator, x, y, width, height, color, itemRenderer);
            }
        }
    }
}

And the custom DataGrid control, comps/CustomDataGrid.as, is as follows:

/** http://blog.flexexamples.com/2010/06/19/removing-the-header-indicator-and-selection-indicator-from-the-mx-datagrid-control-header-in-flex-3/ */
package comps {
    import mx.controls.DataGrid;
    import mx.core.mx_internal;
 
    public class CustomDataGrid extends DataGrid {
 
        public var showHeaderIndicator:Boolean = true;
        public var showSelectionIndicator:Boolean = true;
 
        public function CustomDataGrid() {
            super();
            mx_internal::headerClass = CustomDataGridHeader;
        }
    }
}

View source is enabled in the following example.

Creating a drop down DataGrid control in Flex 4

Peter deHaan — Tue, 09 Mar 2010 18:36:43 +0000

The following example shows how you can create a drop down MX DataGrid control in Flex 4 using the Spark PopUpAnchor control in Flex 4.

"1.0" encoding="utf-8"?>

 name="Spark_PopUpAnchor_DataGrid_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    >
         horizontalAlign="center" paddingTop="20" />
    >
 
    >
         label="Pop up DataGrid"
                click="popUpAnc.displayPopUp = !popUpAnc.displayPopUp;" />
         id="popUpAnc"
                popUpPosition="below"
                width="100%" height="100%">
            >
                >
                    >
                         c1="Row 1, Column 1" c2="Row 1, Column 2" />
                         c1="Row 2, Column 1" c2="Row 2, Column 2" /> 
                         c1="Row 3, Column 1" c2="Row 3, Column 2" /> 
                         c1="Row 4, Column 1" c2="Row 4, Column 2" /> 
                         c1="Row 5, Column 1" c2="Row 5, Column 2" /> 
                         c1="Row 6, Column 1" c2="Row 6, Column 2" /> 
                         c1="Row 7, Column 1" c2="Row 7, Column 2" /> 
                         c1="Row 8, Column 1" c2="Row 8, Column 2" /> 
                         c1="Row 9, Column 1" c2="Row 9, Column 2" /> 
                    >
                >
            >
        >
    >
 
>

View source is enabled in the following example.

Removing the sort arrow skin from an MX DataGrid control in Flex

Peter deHaan — Fri, 26 Feb 2010 20:47:57 +0000

In a previous example, “Changing the default sort arrow skin on a Flex DataGrid control”, we saw how you could change the sort arrow skin on a DataGrid control in Flex by setting the sortArrowSkin style.

The following example shows how you can remove the sort arrow skin from an MX DataGrid control in Flex by setting the sortArrowSkin style to the mx.skins.ProgrammaticSkin class.

"1.0" encoding="utf-8"?>

 name="DataGrid_sortArrowSkin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
     id="dGrid" sortArrowSkin="mx.skins.ProgrammaticSkin">
        >
             dataField="c1" />
             dataField="c2" />
             dataField="c3" />
        >
        >
            >
                 c1="row1, col1" c2="row1, col2" c3="row1, col3" />
                 c1="row2, col1" c2="row2, col2" c3="row2, col3" />
                 c1="row3, col1" c2="row3, col2" c3="row3, col3" />
                 c1="row4, col1" c2="row4, col2" c3="row4, col3" />
                 c1="row5, col1" c2="row5, col2" c3="row5, col3" />
                 c1="row6, col1" c2="row6, col2" c3="row6, col3" />
                 c1="row7, col1" c2="row7, col2" c3="row7, col3" />
                 c1="row8, col1" c2="row8, col2" c3="row8, col3" />
                 c1="row9, col1" c2="row9, col2" c3="row9, col3" />
            >
        >
    >
 
>

View source is enabled in the following example.

You can also set the sortArrowSkin style in an external .CSS file or