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, 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'));

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)
dojo.connect(grid, 'onDeselected', function (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 =;
    if ( t.tagName.toLowerCase() == 'input' && t.type == 'checkbox' )
        var funcName = t.checked ? "addToSelection" : "deselect";

// 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!


Did you know that in Gmail

Did you know that in Gmail you can select a range of messages by clicking one checkbox and shift-clicking another?

That was a pretty nice

That was a pretty nice example. Btw, could you help me out with drag and drop between two dojox grids?


@nep I could do that here


I could do that here too! I'll see if I can brew-up an addendum with that functionality.

@Avinash Punekar

I haven't yet experimented with the Grid and Drag 'n Drop. If I get there I'll post an article about it.

Does anyone have a full demo

Does anyone have a full demo of this posted anywhere?

@Pro777: Its used in

@Pro777: Its used in

Thanks for the howto, it

Thanks for the howto, it saved my day. I have been trying to use dojox.grid.editors.Bool with no avail.

Did you managed to get the QueryReadStore to work with a grid?

@oshunter: Thanks for the

@oshunter: Thanks for the comment! I've never used any of the grid editors (although, I plan to eventually) and I've never tried the QueryReadStore. In my application we are using a custom data store. Sorry I can't be of more help in those areas!

Are there any examples of

Are there any examples of building the grid though html markup instead of javascript? I have a basic grid built that displays my data correctly but I'd like to be able to format the cells appropriately. Adding images,checkbox/select box, and applying general css styles to the data cells and headers.

@freddy: I'm afraid I have no

@freddy: I'm afraid I have no experience building the grid from markup. However, if you can get ahold of the view object somehow, you should be able to do the same as shown in this tutorial.

Hello, I am not able to do


I am not able to do it..Its giving me error
dijit.ById('grid').selection object is null or sumthin..
for this :
dijit.ById('grid').selection.clickSelectEvent = function () { };

If I put this code in dojo onload also .. It doesnt give error .. but it doesnt select or deselect onclick of checkbox..

Please guide me.. I need it very urgently..

@arti: What version of dojo

@arti: What version of dojo are you using? These instructions apply to Dojo 1.0.x and 1.1.x grid. In 1.2 the grid has change significantly, but there is a compatibility layer: use "dojox.grid.Grid" rather than "dojox.grid.DataGrid". That should work.

If its not a version thing, then all I could guess is that there is no "grid" widget registered? Does dijit.byId("grid") give you the widget correctly?