Comments on: Formatting a Flex DataGrid control using a custom item renderer

By: rt

rt — Fri, 12 Mar 2010 02:17:15 +0000

This is a good example but ItemRenderer works only with small amount of data. If you have a huge advanceddatagrid like say 50 columns and 1500 rows and you try to use an itemRenderer on it , your application will be really slow when you try to scroll horizontally or vertically. I had a similar advanced datagrid where I used itemrenderer and setStyle to show +ve numbers in blue and -ve numbers in red and it runs very slow.Let me know if you have a better solution to this problem or make it run faster. Try it when the data is getting updated every 10 seconds

By: Michael

Michael — Wed, 30 Dec 2009 18:56:48 +0000

Great example, yet again you saved the day for me.

By: sss4

sss4 — Thu, 17 Sep 2009 05:42:02 +0000

Never mind, I got it:

private function cur_labelFunc(item:Object, column:DataGridColumn):String {
                return cF.format(item[column.dataField]);
            }

See any problems with that?

Thanks again,

By: sss4

sss4 — Thu, 17 Sep 2009 04:29:40 +0000

Thanks for the awesome example, I think the fact that you’re still getting comments on a two year old post speaks to the usefulness of it.

I have multiple columns that I need to run through a label function, can you think of a quick way to make the label function re-usable?

TIA,

By: Javier Rodriguez

Javier Rodriguez — Fri, 04 Sep 2009 11:02:08 +0000

Hi , i was wondering where the listData object comes from?

Thanks in advance for your help

By: Javier Rodriguez

Javier Rodriguez — Fri, 04 Sep 2009 10:24:00 +0000

I would like to know if I could pass some objects to the constructor of the customItemRender class because I wasnt able to do it, the compiler throws an error. I attach my code below:
customItemRender class:
package core { import mx.containers.VBox; import mx.controls.TextInput;

public class customItemRender extends VBox { public function customItemRender(_TextInput:TextInput, _TextInput2:TextInput){ //TODO: implement function super.addChild(_TextInput); super.addChild(_TextInput2); } } }

Actionscript code for creating an AdvancedDataGrid itemRender:
AdvancedDataGridColumn.itemRenderer = new ClassFactory(customItemRender(_TextInput1,_TextInput2));

Thanks in advance for your help,

Regards Javier

By: Niladri

Niladri — Mon, 24 Aug 2009 13:20:51 +0000

Peter, I have one doubt.I’m allocating data field for the data grid column dynamically. So some time it will not have data field as col1,may be some time it will have column field as col3 or col4.So my question is instead of referring data field in PriceLabel.as can I use the column id of those two column in PriceLabel.as

By: Niladri

Niladri — Fri, 21 Aug 2009 19:37:13 +0000

Thanks a lot Peter.

By: Peter deHaan

Peter deHaan — Fri, 21 Aug 2009 14:15:43 +0000

@Niladri,

Try something like this:

"1.0" encoding="utf-8"?>

 name="DataGridColumn_itemRenderer_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    
        
            import mx.utils.ObjectUtil;
 
            private function col1_sortCompareFunc(itemA:Object, itemB:Object):int {
                return ObjectUtil.numericCompare(itemA.@col1, itemB.@col1);
            }
 
            private function col2_sortCompareFunc(itemA:Object, itemB:Object):int {
                return ObjectUtil.numericCompare(itemA.@col2, itemB.@col2);
            }
        ]]>
    
 
     id="itemsXML">
        >
            "Item 1" col1="1" col2="0" />
            "Item 2" col1="0" col2="1" />
            "Item 3" col1="0" col2="0" />
            "Item 4" col1="-4" col2="44" />
            "Item 4" col1="44" col2="-4" />
            "Item 4" col1="2" col2="111" />
            "Item 4" col1="2" col2="1" />
            "Item 4" col1="1" col2="222" />
        >
    >
 
     id="dataGrid"
            dataProvider="{itemsXML.item}"
            rowCount="{dataGrid.dataProvider.length}">
        >
             dataField="@name"
                    headerText="Name:" />
 
             dataField="@col1"
                    headerText="Col1:"
                    sortCompareFunction="col1_sortCompareFunc"
                    itemRenderer="PriceLabel" />
 
             dataField="@col2"
                    headerText="Col2:"
                    sortCompareFunction="col2_sortCompareFunc"
                    itemRenderer="PriceLabel" />
        >
    >
 
>

And the custom item renderer, PriceLabel.as, is as follows:

/** http://blog.flexexamples.com/2007/08/20/formatting-a-flex-datagrid-control-using-a-custom-item-renderer/ */
package {
    import mx.controls.Label;
    import mx.controls.listClasses.*;
 
    public class PriceLabel extends Label {
 
        private const POSITIVE_COLOR:uint = 0x000000; // Black
        private const NEGATIVE_COLOR:uint = 0xFF0000; // Red
 
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
 
            /* Set the font color based on the item price. */
            setStyle("color", (parseFloat(data.@col1) < parseFloat(data.@col2)) ? NEGATIVE_COLOR : POSITIVE_COLOR);
        }
    }
}

Peter

By: Niladri

Niladri — Fri, 21 Aug 2009 09:59:29 +0000

Hi peterd
Instead of comparing the data value with 0, If i want to do comparison of two column value and set the row value red if column1 value is less than column2 value then how can i do?