April 17th, 2007 by Kyle
Tags: ActionScript, as3, component, components, datagrid, dataprovider, Flex, mxml, vertical-lines
Posted in: ActionScript, Flex
If in the dataGrid control you set showHeader = false and if the dataProvider has no items in it, then the vertical column lines don’t show up.
The vertical column separator lines only appear when the dataProvider has items populating the grid (or if there is no data and showHeader=true).
In the Datagrid code, drawing the vertical column separator lines is keyed off of the listData, which would have a “row 0†containing the header row if the headers where to be visible.
The solution to this is to extend the datagrid and override the drawLinesAndColumnBackgrounds method in which you can iterate over the column array rather than the listItems to draw the vertical lines.
Here is my custom class extending the dataGrid:
<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
override protected function drawLinesAndColumnBackgrounds():void {
super.drawLinesAndColumnBackgrounds();
var lineCol:uint = getStyle("verticalGridLineColor");
var lines:Sprite = Sprite(listContent.getChildByName("lines"));
var cols:Array = columns;
var n:int = cols.length;
var xx:int = 0;
for (var i:int = 0; i < n; i++)
{
xx += cols[i].width;
drawVerticalLine(lines, i, lineCol, xx);
}
}
]]>
</mx:Script>
</mx:DataGrid>
Here is a simple app demonstrating the use of my custom dataGrid:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*">
<mx:XMLList id="foo"/>
<mx:Panel title="DataGrid Control Example" height="100%" width="100%"
paddingTop="10" paddingLeft="10" paddingRight="10">
<mx:Label width="100%" color="blue"
text="Select a row in the DataGrid control."/>
<MyDataGrid id="dg" showHeaders="false" width="100%" height="100%" rowCount="5" dataProvider="{foo}"
verticalGridLines="true">
<columns>
<mx:DataGridColumn dataField="name" headerText="Name" >
<mx:headerRenderer>
<mx:Component>
<mx:DataGridItemRenderer visible="false" height="0" includeInLayout="false"/>
</mx:Component>
</mx:headerRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="phone" headerText="Phone">
<mx:headerRenderer>
<mx:Component>
<mx:DataGridItemRenderer visible="false" height="0" includeInLayout="false"/>
</mx:Component>
</mx:headerRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="email" headerText="Email">
<mx:headerRenderer>
<mx:Component>
<mx:DataGridItemRenderer visible="false" height="0" includeInLayout="false"/>
</mx:Component>
</mx:headerRenderer>
</mx:DataGridColumn>
</columns>
</MyDataGrid>
<mx:Form width="100%" height="100%">
<mx:FormItem label="Name">
<mx:Label text="{dg.selectedItem.name}"/>
</mx:FormItem>
<mx:FormItem label="Email">
<mx:Label text="{dg.selectedItem.email}"/>
</mx:FormItem>
<mx:FormItem label="Phone">
<mx:Label text="{dg.selectedItem.phone}"/>
</mx:FormItem>
</mx:Form>
</mx:Panel>
</mx:Application>
Here is a link to a Flex Builder 2.0.1 project (compiled with SDK hotfix1) containing a sample demonstrating the solution described above.
Tweet
No Comments »
