Custom header in DataGrid - part 2

November 19th, 2007 at 10:23am 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 answer of my question asked at the end of tutorial Custom header in DataGrid. Question was if it is possible to set as many custom properties to custom header renderer as you want, and how can it be done. So here are answer...

First of all I want to thank Tink for pointing me to the right direction with extending DataGridColumn. Afterward I've found tutorial Thinking About Item Renderers and there were my answer...

So, you have to extend DataGridColumn to MyDataGridColumn to add there our custom properties for header. In our case there are new properties text and topText.

PLAIN TEXT
Actionscript:
  1. package controls
  2. {
  3.     import mx.controls.dataGridClasses.DataGridColumn;
  4.  
  5.     public class MyDataGridColumn extends DataGridColumn
  6.     {
  7.          private var _text:String;
  8.          private var _topText:String;
  9.  
  10.         public function get text():String
  11.         {
  12.             return _text;
  13.         }
  14.         public function set text( value:String ):void
  15.         {
  16.             _text = value;
  17.         }
  18.         public function get topText():String
  19.         {
  20.             return _topText;
  21.         }
  22.         public function set topText( value:String ):void
  23.         {
  24.             _topText = value;
  25.         }
  26.     }
  27. }

Pretty simple, and now you can change your commitProperties function in MyDataGrid class where you're creating DataGrid columns. Just set your new properties there

PLAIN TEXT
Actionscript:
  1. var colName:MyDataGridColumn = new MyDataGridColumn();
  2.     colName.headerRenderer = new ClassFactory(MyDataGridHeader);
  3.     colName.text = "Name";
  4.     colName.topText = "Web";
  5.     colName.dataField = "name";
  6.            
  7.     var colLink:MyDataGridColumn = new MyDataGridColumn();
  8.     colLink.headerRenderer = new ClassFactory(MyDataGridHeader);
  9.     colLink.text = "Link";
  10.     colLink.topText = "URL";
  11.     colLink.dataField = "url";

all other parts of MyDataGrid class are same from previous example (look to the source code on right click or download them).
And we're done. Simple when you know how to do it :)

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

If you want another Flex or AIR tutorial, please ask in comments here

, , , ,
AddThis Feed Button
Previous in series Next in series

Entry Filed under: Tutorial, FlexTips, AIR, Flex, Flash


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

»Related posts:



One Response to “Custom header in DataGrid - part 2”

  1. 1
    Greg Says:
    January 13th, 2008 at 12:48 am

    Very useful, thanks. I’ve just started learning Flex recently, but wonder why you don’t just include the MyDataGridHeader code in the MyDataGridColumn class itself. It wouldn’t be difficult to refactor as a pure actionscript class, and then you could just put it in MyDataGridColumn.as as a private class, right?

Leave a Reply