Friday, July 15, 2011

DataGrid in Flex: Part 2

In this tutorial we will use other Flex components in the cells of a DataGrid.

In the last tutorial, we've created an editable DataGrid, where the user can edit the name, age and sex of a person in the dataset by clicking on a specific cell and editing the text value. However, since each cell contains a text value, the user is able to misuse this feature and set the age to, for example, the word "Old" instead of typing numbers.

To restrict the abuse of the editing feauture and to make it easier for the user to use your DataGrid, you are able to include certain components in the cells of your DataGrid. Here's what controls we can use:

Button, Label, CheckBox, NumericStepper, ComboBox, Text, DateField, TextArea, Image, TextInput.

To solve the problem with the Age column, we can use the NumericStepper component to be the editing tool for the user. By doing that, we restrict any other value but numbers to be entered, and we add some functionality, such as minimum, maximum values, and the 'increase', 'decrease' buttons for the user.

To use a component as an editing tool for the cells in a column, the column needs to be editable. In our case, the whole DataGrid is editable, so it is not necessary to set the editable property of each column individually.

To apply any component to a column, you need to use 2 properties - itemEditor and editorDataField. The itemEditor property is basically the path to the component class. The editorDataField is the property of the component object that will represent the value of the current cell. For example, if our cell's itemEditor is set to TextInput component, then we would set the 'editorDataField' property to 'text'. In our case, we are using a NumericStepper, so the property we need to type here is 'value'.

<mx:DataGridColumn headerText="Age" dataField="age" itemEditor="mx.controls.NumericStepper" editorDataField="value" />

Now, if you apply those changes and test the code, you will notice that everything works, except that the maximum value of the numeric stepper is 10, and the minimum is 0. We want to go beyond that, so let's find a solution to this problem.

We can set the itemEditor property using tags, then include fx:Component tags in them, and there we can include our NumericStepper component with all the properties we want. Don't be confused, in the end it will look like this:

<mx:DataGridColumn headerText="Age" dataField="age" editorDataField="value">
<mx:itemEditor>
<fx:Component>
<mx:NumericStepper minimum="1" maximum="150" />
</fx:Component>
</mx:itemEditor>

The full code is:

<?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" editorDataField="value">
<mx:itemEditor>
<fx:Component>
<mx:NumericStepper minimum="1" maximum="150" />
</fx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Sex" dataField="sex" />
</mx:columns>
</mx:DataGrid>

</s:Application>

The results:


Thanks for reading!

Related:

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

No comments:

Post a Comment