Search Flex Components Free

Custom Search

December 20, 2007

Flex Control DataGrid CAdvanced Features Source Code Sample

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml" backgroundAlpha="0" horizontalAlign="center" creationComplete="srv.send()">
<mx:Script>
import mx.rpc.events.*; import mx.collections.ArrayCollection;
[Bindable] public var catalog:ArrayCollection;
private function resultHandler(event:ResultEvent):void { catalog = new ArrayCollection(event.result.catalog.product); }
</mx:Script>
<mx:HTTPService id="srv" url="../assets/catalog.xml" result="resultHandler(event)"/>
<mx:Text width="100%" textAlign="center"> <mx:text>This example demonstrates advanced DataGrid features: row and column locking, column reordering, column hiding, and column header wrapping.</mx:text> </mx:Text>
<mx:Text width="100%" textAlign="center"> <mx:text>In following example, the first row and the two first columns are locked. You can drag and drop columns to reorder them.</mx:text> </mx:Text>
<mx:Panel title="Advanced Grid Features" width="100%" height="100%" maxWidth="700" maxHeight="450">
<mx:DataGrid id="dg" dataProvider="{catalog}" width="100%" height="100%" minColumnWidth="50" editable="true" horizontalScrollPolicy="auto" rowHeight="80" wordWrap="true" lockedColumnCount="2" lockedRowCount="2"> <mx:columns> <mx:Array> <mx:DataGridColumn dataField="brand" headerText="Brand" width="150"/> <mx:DataGridColumn dataField="name" headerText="Name" width="150"/> <mx:DataGridColumn dataField="description" headerText="Description" visible="{cbShowDescriprion.selected}" width="300" headerWordWrap="true"/> <mx:DataGridColumn dataField="price" headerText="Price"/> <mx:DataGridColumn dataField="camera" headerText="Camera"/> <mx:DataGridColumn dataField="web" headerText="Web"/> <mx:DataGridColumn dataField="bluetooth" headerText="Bluetooth"/> </mx:Array> </mx:columns> </mx:DataGrid>
<mx:ControlBar> <mx:CheckBox id="cbShowDescriprion" label="Show Description" selected="true"/> </mx:ControlBar>
</mx:Panel>
</mx:Application>

Related Flex Tutorials