Tuesday, May 29, 2012

Custom Text in DataGridColumn Header ToolTip

DataGridColumn header of Flex DataGrid does not provide toopTip property to show custom text in custom property.

To show your custom text in the tooltip of DataGridColumn Header you need to to create two classes as:
  1. one class extends DataGridColumn say CustomDataGridColumn and
  2. other class extends any class that supports tooltip like Label say CustomHeaderRenderer

//CustomDataGridColumn
import mx.controls.dataGridClasses.DataGridColumn;
public class CustomDataGridColumn extends DataGridColumn{
    private var _toolTip:String;
    
    public function ExcitersDataGridColumn(){
       this.headerRenderer = new CustomHeaderRenderer(this);
    }

    public function set toolTip(value:String):void {
       this._toolTip = value;
    }
    
    public function get toolTip():String{
       return this._toolTip;
    }
}

//CustomHeaderRenderer
import mx.controls.Label;
import mx.core.IFactory;

public class CustomHeaderRenderer extends Label implements IFactory{
   private var column:CustomDataGridColumn;

   public function CustomHeaderRenderer(column:CustomDataGridColumn){
      this.column = column;
   }

   public function newInstance():*{
      return new CustomHeaderRenderer(column);
   }

   public override function set data(value:Object):void {
      super.data = value;
      
      if(value is CustomDataGridColumn) {
         this.toolTip = (value as CustomDataGridColumn).toolTip;
      }
   }
}


now in mxml application file instead of <mx:DataGridColumn.. you should use
<[your package]:CustomDataGridColumn...

Example



<[your package name space]:CustomDataGridColumn dataField="project" toolTip="my custom tool tip text"/>


There it is. Now you can set your own custom tool tip text as shown above.








No comments:

Post a Comment