The dojox.grid Widgets Family and the Strange Case of the Items Modification

So, you are building a web application and decided to use the great Dojo framework.  Probably, if you need to use grids, you will decide to use some of the available widgets subclass of dojox.grid.

Well, my friend, be aware with the data you use to fill the grid’s store !!!

The scenario

Start creating a piece of code to execute when the page is ready. It will use the DataGrid widget with an ItemFileWriteStore store:

require(['dojox/grid/DataGrid', 'dojo/data/ItemFileWriteStore', 'dojo/domReady!'],
 
function(DataGrid, ItemFileWriteStore){

Now, create a data object with a set of random items:

// Set up data store
var data = {
    identifier: "id",
    items: []
};
// Initialize with random elements.
var rows = 10;

Note we have stores our items in a different array:

var items = [];
for(var i = 0; i < rows; i++){
    items.push({ id: i+1, col1: "the first column", col2: false, col3: 'A column with a long description', col4: Math.random()*50 });
}
data.items = items;

Now, create the store and set the grid layout:

var store = new ItemFileWriteStore({data: data});
 
// Set up layout
var layout = [[
        {'name': 'Column ID', 'field': 'id', 'width': '100px'},
        {'name': 'Column 1', 'field': 'col1', 'width': '100px'},
        {'name': 'Column 2', 'field': 'col2', 'width': '100px'},
        {'name': 'Column 3', 'field': 'col3', 'width': 'auto'},
        {'name': 'Column 4', 'field': 'col4', 'width': '150px'}
    ]];

Finally, create the grid (remember to call startup on it):

    // Create a new grid
    var grid = new DataGrid({
        id: 'grid',
        store: store,
        structure: layout,
        rowSelector: '20px'
    });
 
    // Append the new grid to the div
    grid.placeAt("gridDiv");
 
    // Call startup() to render the grid
    grid.startup();
});

The grid code requires us to  have an HTML element in our page:

<div id="gridDiv"></div>

Here is the result of the previous code:

The issue

Our idea behind having the items stored in an array is because trying:

• to serve as input data for the grid’s store
• to store the original array to make other operations: to be used in other stores, to make a simple iteration, … whatever we want.

The issue is the array of items used to initialize the data store are modified once the grid’s startup() method is executed.

Lets go to see it in action. Check the value of the items array before and after the grid’s startup() method is executed:

Yes, the objects within the items array are modified for internal pourposes.

Conclusions

This simple issue can have great implications depending on your way to code.

Suppose you are getting a JSON file with information about employees and for each one the set of companies they have worked. You will store this information in JavaScript object array and may be interested on use to:

• search the boss within employees
• initialize a TreeGrid to show the whole list of data.

The problem is you can’t use the same object array for the two tasks because in the moment the TreeGrid will execute its startup() method the array of items will change its structure.

How to solve this? Create a new array of objects from your original one or store them in a Memory store.

References

http://dojotoolkit.org/reference-guide/1.7/dojox/grid/index.html

http://dojotoolkit.org/reference-guide/1.7/dojox/grid/DataGrid.html

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

Connecting a Store to a DataGrid - http://dojotoolkit.org/documentation/tutorials/1.7/store_driven_grid/