Advanceddatagrid with HTML Header Renderer

Problem:  Show header and subheader text in each column of AdvancedDataGrid. Subheader is optional and always  come below mainheader text. for e.g.: Delhi\n(India)

Solution:

1) Created custom AdvancedDataGridHeaderRenderer

2) assign it as headerrenderer to AdvancedDataGrid column.

3) provide headertext as ‘mainheadertext/nsubheadertext’. Internally it differentiate text for header and subheader.

HTMLTextADGHeaderRenderer :

import flash.display.DisplayObject;
    import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
    import mx.controls.advancedDataGridClasses.AdvancedDataGridHeaderRenderer;
    import mx.core.UITextField;

    public class HTMLTextADGHeaderRenderer extends AdvancedDataGridHeaderRenderer
    {
        private var htmlHeaderText:UITextField;

        public function HTMLTextADGHeaderRenderer()
        {
            super();
        }

        override protected function createChildren():void
        {
            super.createChildren();
            htmlHeaderText=new UITextField();
            htmlHeaderText.percentWidth=100;
            htmlHeaderText.background=false;
            htmlHeaderText.border=false;

            addChild(DisplayObject(htmlHeaderText));
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);

            htmlHeaderText.htmlText = AdvancedDataGridColumn(this.data).headerText;
            var arr:Array=AdvancedDataGridColumn(this.data).headerText.split(‘\\n’);
            if (arr.length > 1)
            {
                htmlHeaderText.htmlText='<TEXTFORMAT><P ALIGN=”CENTER”>’ + arr[0] + ‘\n’ + arr[1] + ‘</P></TEXTFORMAT>’;
            }
            else
            {
                htmlHeaderText.htmlText='<TEXTFORMAT><P ALIGN=”CENTER”>’ + AdvancedDataGridColumn(this.data).headerText + ‘</P></TEXTFORMAT>’;
            }

            htmlHeaderText.width=unscaledWidth – 5;
            htmlHeaderText.wordWrap=true;

            this.label.visible=false;
            this.label.includeInLayout=false;

        }
    }

Advertisements
  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: