HOWTO: Dojo Grid, Checkbox Selection

In the next release of Memorati™, I am going to use the new Dojo Grid widget. One of the problems I had, is that the grid does selection the way desktop grids do:

• Clicking the row selects it.
• Clicking while holding the shift or ctrl key selects multiple rows.

This is fine! But it isn't what users of web applications expect. They are accustomed to selecting a row by clicking a checkbox in the left-most column, like in Gmail.

In this article, I describe how I got the Dojo Grid to use a checkbox for selection.

For simplicity sake, I am going to build off the example described in the Dojo Grids: Diving Deeper article by Bryan Forbes on the SitePen blog. Let's assume that your grid boiler plate looks like this:

var data = [
	{ part_num: '4001', min_temp: -946, max_temp: 931, max_pres: 647,
	   type: 1, thick: 0.25, inner: 0.9375, outer: 13.4375 },
	{ part_num: '4002', min_temp: -601, max_temp: 1894, max_pres: 208,
	   type: 1, thick: 0.03125, inner: 4.0, outer: 13.75 },
	{ part_num: '4003', min_temp: 456, max_temp: 791, max_pres: 132,
	   type: 1, thick: 0.125, inner: 2.3125, outer: 6.1875 },
	...
];

var model = new dojox.grid.data.Objects(null, data);

// Simplified from Bryan Forbes' example:
var view = {
	rows: [[
		{ name: 'Part Number', field: 'part_num' },
		{ name: 'Type', field: 'type' }
                ...
	]]
};

var structure = [ view ];

// Here, assume that we got the grid object from somewhere, whether
// it was created programatically or by the parser, Ie:
//
//   var grid = dijit.byId('grid'); // or:
//   var grid = new dojox.Grid({ ... }, dojo.byId('grid-node'));
//
grid.setModel(model);
grid.setStructure(structure);

Got that? Ok! The first step is adding a checkbox column, that is checked when the row is selected.

// Add an "Action" column to the view
var view = {
	rows: [[
                {
                   name: 'Action',
                   get: function (inRowIndex)
                   {
                      // if this row is selected, then check the checkbox.
                      var isSel = grid.selection.isSelected(inRowIndex);
                      var html = '<input type="checkbox"' + (isSel ? ' checked="checked"' : '') + " />";
                      return html;
                   }
                },
                ...
	]]
};

// ... and now add some event handlers to the grid,
// in order to re-render a row when it is selected.
dojo.connect(grid, 'onSelected', function (inRowIndex)
{
    grid.updateRow(inRowIndex);
});
dojo.connect(grid, 'onDeselected', function (inRowIndex)
{
    grid.updateRow(inRowIndex);
});

Now, try it! When ever you select a row on the grid, it will become checked! But clicking the checkbox still doesn't activate multiple selection like we want it to.

// Make clicking the check box changed the selection state.
dojo.connect(grid, 'onCellClick', function (evt)
{
    var t = evt.target;
    if ( t.tagName.toLowerCase() == 'input' && t.type == 'checkbox' )
    {
        var funcName = t.checked ? "addToSelection" : "deselect";
        grid.selection[funcName](evt.rowIndex);
    }
}); 

// And finally, disable the standard behavior of selecting by clicking the row
grid.selection.clickSelectEvent = function () { };

Et Voila! Now you have a Dojo Grid, where you select rows by clicking a checkbox in the left-most column!