Free Adobe - Macromedia Flash Web Site Design Tips, Flash Tutorials

Custom header in DataGrid

This is simple tutorial with question at the end to help me and other understand it correctly.

Let’s say we need DataGrid with 2 rows in header for each column. It’s not hard. In DataGridColumn class there is property headerRenderer so we can just implement our custom headerRenderer.

Here is code as MXML Component:
[as]
< ?xml version="1.0" encoding="utf-8"?>


< ![CDATA[

import mx.controls.dataGridClasses.DataGridColumn;

[Bindable]
private var text:String;
[Bindable]
private var topText:String;
[Bindable]
private var src:String;

override public function set data(value:Object):void
{
var col:DataGridColumn = value as DataGridColumn;
if (col)
{
var arr:Array = col.headerText.split(':::');
text = arr[0];
topText = arr[1];
}
}
]]>

[/as]

Now we can create our custom DataGrid by extending DataGrid class. Here is the code:
[as]
package controls
{
import mx.controls.DataGrid;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.core.ClassFactory;

public class MyDataGrid extends DataGrid
{
public function MyDataGrid()
{

}

override protected function commitProperties():void
{
super.commitProperties();

draggableColumns = false;
editable = false;
resizableColumns = true;
sortableColumns = true;

var colName:DataGridColumn = new DataGridColumn();
colName.headerRenderer = new ClassFactory(MyDataGridHeader);
colName.headerText = “Name:::Web”;
colName.dataField = “name”;

var colLink:DataGridColumn = new DataGridColumn();
colLink.headerRenderer = new ClassFactory(MyDataGridHeader);
colLink.headerText = “Link:::URL”;
colLink.dataField = “link”;

columns = [colName, colLink];
}
}
}
[/as]

Now just make application to show our custom DataGrid with custom header
[as]
< ?xml version="1.0" encoding="utf-8"?>

< ![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var dp:ArrayCollection = new ArrayCollection([{name:'Franto.com Blog',url:'http://blog.franto.com'},{name:'Adobe.com Labs',url:'http://labs.adobe.com'}]);
]]>

[/as]

And here you can try this example (Source code is available on right click):

Question for the Flex Gurus:

Now I got custom header with 2 rows, so I need change 2 properties for that header. Since there is just properties headerText which is String and can not be Object, my only workaround was set headerText to serialized string e.g. ‘text1:::text2‘ and in data setter deserialize. But I wonder if there is a way how to set my bindable vars from headerRenderer ‘text‘ and ‘topText‘ directly. If anyone can help I would appreciate that. Thanks

This is some text prior to the author information. You can change this text from the admin section of WP-Gravatar  I'm living in Bratislava, Slovakia. I'm Senior Flex, AIR Developer for my own company Flexets. Read more from this author