Flex DataGrid with row number column

Question

I want to extend the DataGrid component so that there is a (read-only) column for the row number like you see in spreadsheets. I came across this article http://www.cflex.net/showFileDetails.cfm?ObjectID=735 but it depends on the data being unique for each row so that it can index into the array. If the data is not unique (like for an empty grid) it doesn't work. How can I implement that?

Answer 1

ensure that the dataProvider has a unique column or property, then dont show that column/property if you dont wont to. The key is the dataProvider

Answer 2

I was able to do this by implementing a custom itemRenderer, RowNumberRenderer.as

package com.domain
{
    import mx.collections.IList;
    import mx.controls.Label;
    import mx.controls.listClasses.ListBase;

    public class RowNumberRenderer extends Label
    {
     public function RowNumberRenderer()
     {
      super();
     }

     override public function set data(value:Object):void
     {
            super.data = value;
            this.text = String(IList(ListBase(listData.owner).dataProvider).getItemIndex(data) + 1);                     
     }

    }
}

Answer 3

how about the following:

RendererRowIndexPlusOne.as package { import mx.controls.Label; import mx.utils.StringUtil; import mx.utils.ObjectUtil;

public class RendererRowIndexPlusOne extends Label
{ 

    public override function set data(item:Object):void {
        super.data = item; 

        trace('listData.label ' + listData.label);
        trace('listData.rowIndex ' + listData.rowIndex);
        trace('listData.columnIndex ' + listData.columnIndex);
        trace('listData.owner ' + listData.owner);

        text = String(listData.rowIndex + 1);
    } 

}

}

Answer 4

This worked for me:

<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml"&gt;
<mx:Script>
    <![CDATA[
        import mx.controls.AdvancedDataGrid;

        private var handleDataChangedEnabled:Boolean = false;

        override public function set data(value:Object):void {
            super.data = value;

            if (!handleDataChangedEnabled) {
                addEventListener("dataChange", handleDataChanged);
            }
        }

        public function handleDataChanged(event:Event):void {
            this.text = String(listData.rowIndex + (listData.owner as AdvancedDataGrid).verticalScrollPosition + 1);
        }
    ]]>
</mx:Script>

Of course, you would have to change AdvancedDataGrid to DataGrid.

Cheers.