franto.com

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