Flex Datagrid Example

This is a simple implementation of a data grid in Flex. It would have three columns and 2 rows. Data to be contained in the grid is initialized at application start up and bound to the same. The method, initData(), which initialized the data for the grid, is called at application start up as it is defined in the "initialize" attribute of "s:Application".

============================================================= 

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               minWidth="955" minHeight="600" 
               initialize="initData();">

    <fx:Declarations>
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import mx.collections.*;

            private var dataArray: Array = [
                {Artist:'Danuka', Album:'storm', Price:17.97}, 
                {Artist:'Shyarmal', Album:'gloomy', Price:96.29}
            ];  

            [Bindable]
            public var gridData: ArrayCollection;

            public function initData(): void {
                gridData = new ArrayCollection(dataArray);
            }

        ]]>
    </fx:Script>
     

    <s:DataGrid id="my_grid" width="500" 
         height="500" dataProvider="{gridData}">
    </s:DataGrid>

</s:Application>

=============================================================

<s:DataGrid id="my_grid" width="500" height="500" dataProvider="{gridData}"></s:DataGrid> introduces a flex grid. The attribute dataProvider binds data to the grid. In this example, "gridData" is an ArrayCollection holding that data, which is initialized through initData() method. In the method, gridData is initialized with a predefined array (dataArray). The symbol, [Bindable] above gridData makes it a source to be bound to a component (This enables gridData to be used as the source of data of the grid).

Output:

thanks,
Shyarmal.