Getting flex datagrid cell value using column and row indices

Question

i'm using flex for an application but i'm having some trouble to recover data from a datagrid that has a checkbox in one of the columns, the problem is that i can't use the function selectedIndex or selectedItem, because they are used to save the checked items.

Is there a way to recovery the datagrid informations using the column and row indices? Something like:

MyDataGrid[row][column] or MyDataProvider[row][column] or any combination of functions to allow me recovery an information using only the row and column.

Thanks

Answer 1

If you just want to be able to get a cell value of the data grid using row and col indices, you can extend the DataGrid component and add one simple function.

Here is a working example.

It looks something like this:

//CustomDataGrid

<?xml version="1.0" encoding="utf-8"?>
<s:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx" 
        width="400" height="300">
<fx:Script>
    <![CDATA[
        import spark.components.gridClasses.GridColumn;

        public function getElementAt(row:int, col:int):Object
        {
            if (this.dataProvider.length < row + 1 || this.columns.length < col + 1)
                return null;
            else
                return this.dataProvider.getItemAt(row)[(this.columns.getItemAt(col) as GridColumn).dataField];
        }
    ]]>
</fx:Script>
</s:DataGrid>

Then you call it in your application like this:

//App

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" 
           minWidth="955" minHeight="600" 
           xmlns:dgrc="com.dgrc.*">
<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.controls.Alert;

        [Bindable]private var collection:ArrayCollection = new ArrayCollection([
            {fld01:1, fld02:"fld02", fld03:"fld13", fld04:"fld14"},
            {fld01:2, fld02:"fld02", fld03:"fld23", fld04:"fld24"},
            {fld01:3, fld02:"fld02", fld03:"fld33", fld04:"fld34"},
            {fld01:4, fld02:"fld02", fld03:"fld43", fld04:"fld44"},
            {fld01:5, fld02:"fld02", fld03:"fld53", fld04:"fld54"}
        ]);

        protected function getElement():void
        {
            var obj:Object = myDG.getElementAt(nsRow.value, nsCol.value);
            Alert.show(String(obj));
        }

    ]]>
</fx:Script>

<s:VGroup x="20" y="20">

    <s:HGroup>
        <s:NumericStepper id="nsRow" minimum="0" value="0"/>
        <s:NumericStepper id="nsCol" minimum="0" value="0"/>
        <s:Button label="Get It!" click="getElement()"/>
    </s:HGroup>

    <dgrc:CustomDataGrid id="myDG" width="300" height="160" dataProvider="{collection}">
        <dgrc:columns>
            <s:ArrayList>  
                <s:GridColumn dataField="fld01" headerText="Field 1" width="100"/>
                <s:GridColumn dataField="fld03" headerText="Field 3" width="100"/>
                <s:GridColumn dataField="fld04" headerText="Field 4"/>
            </s:ArrayList>                  
        </dgrc:columns> 
    </dgrc:CustomDataGrid>
</s:VGroup>

</s:Application>

Be aware that the row and col indices in this example refer a cell of the data grid and not a value of the data grid provider.

If you call

getElementAt(0, 1)

you will get "fld13"

Answer 2

If you are using the original DataGrid control, it is better to use the itemToLabel method of DataGridColumn, because item[dataField] will cause an exception when the property value contains dot notation, such as "customer.name":

    public function getElementAt(row:int, col:int):Object {
        var item:Object = dataProvider.getItemAt(row)
        var column:DataGridColumn = dataGrid.columns[column] as DataGridColumn;
        var value:String = column.itemToLabel(item);
        return value;
    }

This same method is used by the framework to provide the text displayed in the grid cell. If your checkbox in the grid is driven by a boolean property, the returned value will be true or false.