Flex DataGrid

The following example demonstrates, displaying elements from an ArrayCollection in a DataGrid using the mx:dataGrid component.

Two methods have been used in the same example to display items in a datagrid, either by using a custom itemrenderer(first datagridcolumn) or by using the itemrenderer in the same mxml(second datagridcolumn). It helps in displaying Items in a datagrid when dynamic data is used ex: XML, Json etc.

<?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">

 <fx:Script>
 <![CDATA[
 import mx.controls.Alert;
 import mx.events.ListEvent;
 import mx.collections.ArrayCollection;

 public var ac:ArrayCollection = new ArrayCollection([
 { date:"2010/12/4", data:"party value", label:"Party"},
 { date:"2010/1/5",  data:"meeting value", label:"Meeting"},
 { date:"2010/12/15", data:"holiday value", label:"Holiday"},
 { date:"2010/12/15", data:"dinner value", label:"Dinner"},
 { date:"2010/12/15", data:"bedtime value", label:"Bedtime"}
 ]);

 ]]>
 </fx:Script>
  <mx:DataGrid id="myGrid" width="100%" dataProvider="{ac}">
    <mx:columns>
      <mx:DataGridColumn headerText="Col1" itemRenderer="itemRenderer" textAlign="center"/>

      <mx:DataGridColumn headerText="Col2" textAlign="center">
        <mx:itemRenderer >
          <fx:Component>
            <mx:HBox toolTip="{data.label}" horizontalScrollPolicy="off">
               <mx:Label verticalCenter="0" x="10" color="#635648"  fontWeight="bold"  text="{data.label}"/>
            </mx:HBox>
          </fx:Component>
        </mx:itemRenderer>   
      </mx:DataGridColumn>
    </mx:columns>
  </mx:DataGrid>
</s:Application>

itemRenderer.mxml

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

 <mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx"
 doubleClickEnabled="true"
 doubleClick="dummyClickHandler(event)">
 <fx:Script>
 <![CDATA[
 private function dummyClickHandler(event:Event):void
 {
 // do nothing
 }
 ]]>
 </fx:Script>
 <mx:Label text="{data.data}" fontWeight="bold"/>
 </mx:VBox>

Advertisements