Dojo DataGrid

Dojo has a number of table type tools that can be used.  TableContainer helps with a table layout (see http://dojotoolkit.org/reference-guide/dojox/layout/TableContainer.html) but to display a genuine table of data the DataGrid is excellent.

Links / Docs

ItemFileReadStore: http://dojotoolkit.org/reference-guide/dojo/data/ItemFileReadStore.html

ItemFileWriteStore: http://dojotoolkit.org/reference-guide/dojo/data/ItemFileWriteStore.html
DataGrid: http://dojotoolkit.org/reference-guide/dojox/grid/DataGrid.html

Require / Define

Functionality required for the DataGrid is available in the following modules.

    dojo/data/ItemFileWriteStore
    dojox/grid/DataGrid

are needed to be able to use the DataGrid.  (I have in the past had some problems with the order of the require / define and putting the DataGrid towards the end of the list seemed to cure this).

ItemFileWriteStore / ItemFileReadStore

Both of these object back the DataGrid amongst other things (Tree for example).  They are relatively easy to configure.  In the most basic form just create a JSON object of rows such as


    var hardwareList = [
        { name: 'PC',          partNo: 'PC1',     available: true,  cost: 250.00},
        { name: 'Netbook', partNo: 'N1233', available: false, cost: 150.00},
        { name: 'Tablet',     partNo: 'IP3',       available: false, cost: 550.00},
        { name: 'Phone',     partNo: 'SGS3',   available: true,  cost: 350.00}    ];

Next create a wrapper JSON object which includes the name of the identifier here it is the 'name' attribute in the JSON data but it could be any attribute. Finally create the store

    var data = {identifier: "name", items: hardwareList};
    var store = new dojo.data.ItemFileWriteStore({data: data});

DataGrid

Now that we have the data we can create the DataGrid. We need to create the layout for this grid to say which bits of data make up with columns etc


    var layout = [[
        {'name': 'Name',    'field': 'name',   'width': '100px'},
        {'name': 'Part No', 'field': 'partNo', 'width': '70px'},
        {'name': 'Cost',    'field': 'cost',   'width': '70px'}
    ]];


Here the 'name' is the column name, the 'field' is the data attribute and 'width' is the column width.  This layout can then be used in the construction of the DataGrid


    var grid = new dojox.grid.DataGrid({
                                    id: 'myDataGridId',
                                    store: store,
                                    structure: layout,
                                    onRowClick: function(e){
                                        var rowIndex = e.rowIndex;
                                        var available = grid.store.getValue(grid.getItem(rowIndex), 'available');
                                            if (available){
                                                ...
                                            }
                                    }
    });

    grid.placeAt("myDivToReplace");
    grid.startup();



Here the id is the name of the DataGrid object in the html dom.  The store is the data created earlier, and the layout is the column information above.  There are a number of event handlers which can be added and the onRowClick is shown here.  Within the onRowClick is the call

    grid.store.getValue(grid.getItem(rowIndex), 'available')

which shows how to get the correct data out of the store irrespective of the sorting that is going on.  If you just use the rowIndex on the hardwareList object then a sort on the column will give you the wrong result so this has to be used.  Finally set the grid locaion and call startup.

NOTE:  If the 'myDivToReplace' has no height then the DataGrid will have no height and not appear.  Set the height of the div you are replacing and the DataGrid will occupy that space.