Custom header in DataGrid

November 15th, 2007 at 05:39pm Administrator

If you're new here, you may want to subscribe to my RSS feed. If you like my site, consider linking back. I prefer text "Free Flash Tutorials" to http://blog.franto.com
Thanks for visiting my site! If you need anything just contacting through Contact page or Gtalk widget

Table of contents for DataGrid

  1. Custom header in DataGrid
  2. Custom header in DataGrid - part 2
  3. “Filter results in DataGrid” Flex Tutorial

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:

PLAIN TEXT
Actionscript:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx :VBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="left" paddingLeft="3" verticalGap="5">
  3.     </mx><mx :Script>
  4.         <![CDATA[
  5.            
  6.             import mx.controls.dataGridClasses.DataGridColumn;
  7.            
  8.             [Bindable]
  9.             private var text:String;
  10.             [Bindable]
  11.             private var topText:String;
  12.             [Bindable]
  13.             private var src:String;
  14.            
  15.             override public function set data(value:Object):void
  16.             {
  17.                 var col:DataGridColumn = value as DataGridColumn;
  18.                 if (col)
  19.                 {
  20.                     var arr:Array = col.headerText.split(':::');
  21.                     text = arr[0];
  22.                     topText = arr[1];
  23.                 }
  24.             }
  25.         ]]>
  26.     </mx>
  27.     <mx :Label id="topTextLbl" text="{topText}" fontWeight="bold"/>
  28.     <mx :Label id="txtLbl" text="{text}" fontWeight="bold"/>

Now we can create our custom DataGrid by extending DataGrid class. Here is the code:

PLAIN TEXT
Actionscript:
  1. package controls
  2. {
  3.     import mx.controls.DataGrid;
  4.     import mx.controls.dataGridClasses.DataGridColumn;
  5.     import mx.core.ClassFactory;
  6.    
  7.     public class MyDataGrid extends DataGrid
  8.     {
  9.         public function MyDataGrid()
  10.         {
  11.            
  12.         }
  13.    
  14.         override protected function commitProperties():void
  15.         {
  16.             super.commitProperties();
  17.            
  18.             draggableColumns = false;
  19.             editable = false;
  20.             resizableColumns = true;
  21.             sortableColumns = true;
  22.  
  23.             var colName:DataGridColumn = new DataGridColumn();
  24.             colName.headerRenderer = new ClassFactory(MyDataGridHeader);
  25.             colName.headerText = "Name:::Web";
  26.             colName.dataField = "name";
  27.            
  28.             var colLink:DataGridColumn = new DataGridColumn();
  29.             colLink.headerRenderer = new ClassFactory(MyDataGridHeader);
  30.             colLink.headerText = "Link:::URL";
  31.             colLink.dataField = "link";
  32.            
  33.             columns = [colName, colLink];
  34.         }
  35.     }
  36. }

Now just make application to show our custom DataGrid with custom header

PLAIN TEXT
Actionscript:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx :Application xmlns:local="*" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:controls="controls.*">
  3.  
  4.         <controls :MyDataGrid width="300" rowCount="5" dataProvider="{dp}"/>
  5.        
  6.         </mx><mx :Script>
  7.             <![CDATA[
  8.                 import mx.collections.ArrayCollection;
  9.                 [Bindable]
  10.                 public var dp:ArrayCollection = new ArrayCollection([{name:'Franto.com Blog',url:'http://blog.franto.com'},{name:'Adobe.com Labs',url:'http://labs.adobe.com'}]);
  11.             ]]>
  12.         </mx>

And here you can try this example (Source code is available on right click):
Custom DataGrid with custom header

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

, , , ,
AddThis Feed Button
Next in series

Entry Filed under: Tutorial, FlexTips, Flex, Useful links, Flash


Do you want to receive fresh news from my site?
Subscribe to my RSS

»Related posts:



3 Responses to “Custom header in DataGrid”

  1. 1
    Tink Says:
    November 16th, 2007 at 1:27 am

    You could extend DataGridColumn and create a CustomDataGridColumn which would take any properties u define and pass them into the headerRenderer.

  2. 2
    Tink Says:
    November 16th, 2007 at 12:44 pm

    package ws.tink.flex.controls.dataGrid
    {
    import mx.controls.dataGridClasses.DataGridColumn;

    public class CustomDataGridColumn extends DataGridColumn
    {

    private var _customValue:Object;

    public function get customValue():Object
    {
    return _customValue;
    }
    public function set customValue( value:Object ):Void
    {
    _customValue = value;
    }

    public function newInstance():*
    {
    var renderer:* = __itemRenderer.newInstance();

    renderer.customValue = _customValue;

    return renderer;
    }
    }
    }

    somat like that should do the job

  3. 3
    Franto.com Flash blog » Custom header in DataGrid - part 2 Says:
    November 19th, 2007 at 10:24 am

    […] Custom header in DataGrid - part 2 […]

Leave a Reply