Creating multi-line data grid rows with variable row heights
One of my favorite Flex components is the the trusty DataGrid. It seems whenever I build some sort of application or sample, I need a DataGrid to show all sorts of debug data or what have you. Here is a simple little example of a DataGrid with multi-line content and a variable row height.
The following example demonstrates how to set up a DataGrid control to word wrap certain data grid columns, and allow each row to have a variable row height, depending on the amount of text in each row:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="white" layout="vertical"> <mx:Array id="arr"> <mx:Object articleName="Finding out a characters Unicode character code" data="15" /> <mx:Object articleName="Setting an icon in an Alert control" data="14" /> <mx:Object articleName="Setting an icon in a Button control" data="13" /> <mx:Object articleName="Installing the latest nightly Flex 3 SDK build into Flex Builder 3" data="10" /> <mx:Object articleName="Detecting which button a user pressed to dismiss an Alert dialog" data="9" /> <mx:Object articleName="Using the Alert control" data="8" /> <mx:Object articleName="Formatting data tips in a Slider" data="7" /> <mx:Object articleName="Downloading the latest Adobe Labs version of Flex 3 SDK/Flex Builder 3 (codename: Moxie)" data="6" /> </mx:Array> <mx:ArrayCollection id="arrColl" source="{arr}" /> <mx:DataGrid id="dataGrid" dataProvider="{arrColl}" variableRowHeight="true" width="100%" height="100%"> <mx:columns> <mx:DataGridColumn id="articleName" dataField="articleName" headerText="Name of the article in question" wordWrap="true" /> <mx:DataGridColumn id="data" dataField="data" headerText="ID of the article" /> </mx:columns> </mx:DataGrid> </mx:Application> |
10:40 AM
|
Labels:
Flex Controls Samples,
Flex DataGrid Samples
|
This entry was posted on 10:40 AM
and is filed under
Flex Controls Samples
,
Flex DataGrid Samples
.
You can follow any responses to this entry through
the RSS 2.0 feed.
You can leave a response,
or trackback from your own site.
0 comments:
Post a Comment