Tag Archive | Flex Datagrid
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