How to apply formatting to data feeding AdvancedDataGrid in ActionScript 3.0

Question

I'm using the Halo AdvancedDataGrid component, in which the default itemEditor for each column is mx.controls.TextInput.

For example, the data provider is: [CODE][Bindable] private var labelsGridArray:Array = [ { tag:"apple" }, { tag:"*banana" }, { tag:"carrot" } ];[/CODE] And the AdvancedDataGrid definition is: [CODE][/CODE]

If a String from the dataprovider Array is preceded by an asterisk - as is the case for banana in this example - the String needs to be surrounded by square brackets and be displayed in a grey colour.

I tried to do the following: [CODE]

A colleague told me about using the AdvancedDataGridColumn's labelFunction attribute. I tried that but was unable to do the following assignment (the id of the column is 'tag'): [CODE]tag.itemEditor.htmlText = formattedText;[/CODE]

I get error "Access of possibly undefined property htmlText through a reference with static type mx.core:IFactory.

I tried to both explicitly extract the TextInput itemEditor (like I did for the override set data) AND use the labelFunction, but I couldn't get both to be in the correct scopes.

Your help is much appreciated, Bonnie

Answer 1

Try creating your own itemRenderer / itemEditor.

This would be your datagrid:

<fx:Script>
    <![CDATA[
        [Bindable] private var labelsGridArray:Array = [ { tag:"apple" }, { tag:"*banana" }, { tag:"carrot" } ];
    ]]>
</fx:Script>
<mx:DataGrid dataProvider="{labelsGridArray}" >
    <mx:columns>
        <mx:DataGridColumn headerText="Name" itemRenderer="NameItemRenderer"/>
    </mx:columns>
</mx:DataGrid>

And this would be your itemRenderer/editor (NameItemRenderer.mxml)

<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                      xmlns:s="library://ns.adobe.com/flex/spark" 
                      xmlns:mx="library://ns.adobe.com/flex/mx" 
                      focusEnabled="true">
<fx:Script>
    <![CDATA[

        override public function set data(value:Object):void{
            super.data = value;
            if(value.tag.indexOf("*")!= -1){
                lblData.text = "[" + value.tag + "]";
                lblData.setStyle("color",0xFF0000);
            }
            else{
                lblData.text = "" + value.tag ;
                lblData.setStyle("color",0x000000);
            }
        }
    ]]>
</fx:Script>
<s:Label id="lblData" top="0" left="0" right="0" bottom="0"/>

I have used a normal mx:Datagrid and a spark MXDataGridItemRenderer for this, but the way it works will be the same for the AdvancedDataGrid. All you need to do is override set data()

Cheers