Flex DataGrid not Displaying Data

I have a custom dataGrid that acts more like a 2D list (if that makes sense at all). I am dynamically creating the columns and recreating the dataProvider to suit my needs. While debugging I can see that I am creating the columns and setting them to the dataGrid and creating and setting the dataProvider, but for some reason I am able to see the dataGrid and the columns but not the data.

[Bindable]
private var mockData:ArrayCollection = new ArrayCollection([
{value: "425341*"},                     
{value: "425341*"},                                                 
{value: "425341开发者_开发问答*"},
{value: "425341*"},
{value: "425341*"},                                         
{value: "425341*"},                                             
{value: "425341*"},                                     
{value: "425341*"},                                         
{value: "425341*"}]);

        ...

<TwoDimensionalList 
    width="100%" height="100%"
    numColumns="7" numRows="7"
    dataField="value" 
    dataProvider="{mockData}"/>

The snippet of code from the object only contains the important functions, everything else is not important (getters, setters, etc ...).

While debugging I checked all the variables in the functions to make sure they were assigned and a value that I was expecting.

[Snippet]

public class TwoDimensionalList extends DataGrid
{

    ...

    /**
    * Creates and sets properties of columns
     */
    private function createColumns():void
    {
        var column:DataGridColumn;
        var cols:Array = this.columns;

        for(var i:uint=0; i < numColumns; i++)
        {
            column = new DataGridColumn("column"+i.toString());
            column.dataField = "column"+i.toString();
            cols[i]=column;
        }

        this.columns = cols;

        // go to the current
        gotoPage(this._currentPageNum);
    }

    /**
     * Sets the data for the dataprovider based on the 
     * number of columns, rows, and page number.
     * 
     * @param pageNum the page number of the data to be viewed in the DataGrids. 
     */
    private function gotoPage(pageNum:uint):void
    {
        _currentPageNum = pageNum;

        var startIndex:uint = (pageNum-1)*numColumns*numRows;

        var data:ArrayCollection = new ArrayCollection();

        for(var i:uint=0; i < numRows; i++)
        {
            var obj:Object = new Object();

            for(var j:uint=0; j < numColumns; j++)
            {
                if((i+(j*numRows)+startIndex) < _dataProvider.length)
                    obj["column"+j.toString()] = String(_dataProvider.getItemAt(i+(j*numRows)+startIndex)["value"]);
            }

            data.addItem(obj);
        }

        this.dataProvider = data;
    }
}

try to refresh the datagrid: link : )

Have you tried the following command, it should run smoother.

toolGrid.invalidateList();

Take a glance to dataField property of DatagridColumn class.

The problem was a timing issue when I was setting the dataProvider at the end. I implemented a callLater function to set the dataProvider and the problem was fixed.