Thursday, July 14, 2011

DataGrid in Flex: Part 1

Today we will start learning about the DataGrid component in Flex 4.

The DataGrid component is a very useful component, that can be used for displaying data from a dataset to the user. You might be already familiar with the DataGrid component in Flash, this one is similar, but much more advanced and flexible.

To create a DataGrid, you first need to create a dataset that you will later display in the data grid. In my case, the dataest will be an ArrayCollection with Objects in it:

<fx:Declarations>
<mx:ArrayCollection id="myAC">
<fx:Object firstname="John" lastname="Jackson" age="25" sex="Male" />
<fx:Object firstname="Bob" lastname="Thompson" age="30" sex="Male" />
<fx:Object firstname="Andy" lastname="Doyle" age="30" sex="Male" />
<fx:Object firstname="Susan" lastname="Thompson" age="28" sex="Female" />
</mx:ArrayCollection>
</fx:Declarations>

You can see that I have created 4 properties for each of the Objects.

Now, let's create our DataGrid object. The simplest thing we could do, is just create the object and pass the ArrayCollection to its dataProvider property:

<?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"
   width="410" height="220">
   
<fx:Declarations>
<mx:ArrayCollection id="myAC">
<fx:Object firstname="John" lastname="Jackson" age="25" sex="Male" />
<fx:Object firstname="Bob" lastname="Thompson" age="30" sex="Male" />
<fx:Object firstname="Andy" lastname="Doyle" age="30" sex="Male" />
<fx:Object firstname="Susan" lastname="Thompson" age="28" sex="Female" />
</mx:ArrayCollection>
</fx:Declarations>

<mx:DataGrid dataProvider="{myAC}">
</mx:DataGrid>

</s:Application>

The results:


As you can see, we have made minimum effort, and it still resulted in a somewhat nice looking data grid.

The problem with the data grid right now is that, even though the order of the columns can be changed by the user by dragging the headers of the columns, I don't like the order of the columns that the data grid starts with. I also don't like the headings for columns, for example, I want to have "First name" instead of "firstname" in the header.

This can be done by creating the column array manually. To do that, open the mx:columns tags in the DataGrid tags, and populate it with DataGridColumn objects. We can specify different properties for each Object, for now I am only going to set the headerText and dataField properties. The headerText is the text value that will appear in the header of this column. The dataField is the attribute of the dataset that will be shown in this column, for example, "firstname".

I also want my DataGrid to be editable, so I set the editable property of the DataGrid to true.

<?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"
   width="410" height="220">
   
<fx:Declarations>
<mx:ArrayCollection id="myAC">
<fx:Object firstname="John" lastname="Jackson" age="25" sex="Male" />
<fx:Object firstname="Bob" lastname="Thompson" age="30" sex="Male" />
<fx:Object firstname="Andy" lastname="Doyle" age="30" sex="Male" />
<fx:Object firstname="Susan" lastname="Thompson" age="28" sex="Female" />
</mx:ArrayCollection>
</fx:Declarations>

<mx:DataGrid dataProvider="{myAC}" editable="true">
<mx:columns>
<mx:DataGridColumn headerText="First name" dataField="firstname"/>
<mx:DataGridColumn headerText="Last name" dataField="lastname"/>
<mx:DataGridColumn headerText="Age" dataField="age"/>
<mx:DataGridColumn headerText="Sex" dataField="sex"/>
</mx:columns>
</mx:DataGrid>

</s:Application>

The results:


If you want to make some columns editable and some not, then you can manually specify the 'editable' properties in each DataGridColumn separately.

Thanks for reading!

Related:

DataGrid in Flex: Part 2
DataGrid in Flex: Part 3
DataGrid in Flex: Part 4
DataGrid in Flex: Part 5

No comments:

Post a Comment