Flex Datagrid tool tip

Here is a quick .as file to include in a Flex project that will allow you to add tool tips to your flex data grid

Here is the Actionscript file
package assets.utils{
import mx.controls.Text;
        public class DgToolTipUtil extends Text
            {
        public function DgToolTipUtil() {
            height = 20;
              }
        override public function set data(value:Object):void {
            super.data = value;            
           switch (this.text) { 
                       case "col1":
                            this.toolTip = "Col 1 tool tip.";
                           break;                      
                      
                       case "col2" :
                            this.toolTip = "Col 2 tool tip.";
                           break;
                          
                       case "col3" :
                            this.toolTip = "Col 3 tool tip.";
                           break;

                       default :
                              this.toolTip = this.text;
                          break;
            }    
            super.invalidateDisplayList();
        }
    }
}

Now the MXML
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  xmlns:utils="assets.utils.*" layout="absolute">
      <mx:Script>
            <![CDATA[
                  import assets.utils.DgToolTipUtil;
            ]]>
      </mx:Script>
      <mx:DataGrid x="285" y="211">
            <mx:columns>
                  <mx:DataGridColumn headerRenderer="assets.utils.DgToolTipUtil" headerText="col1" dataField="col1"/>
                  <mx:DataGridColumn headerRenderer="assets.utils.DgToolTipUtil" headerText="col2" dataField="col2"/>
                  <mx:DataGridColumn headerRenderer="assets.utils.DgToolTipUtil" headerText="col3" dataField="col3"/>
            </mx:columns>
      </mx:DataGrid>
</mx:Application>

Comments

Popular posts from this blog

Protopage a great iGoogle Alternative

A simple Flex Builder contact form

Designing a Better Contact Page