DOJO v1.5 Adding CheckBox to Dojo Datagrid's Header

There is a requirement to present to the user a check box at the grid's header that upon clicked will automatically select all check boxes underneath and vice-versa. This feature is very common in most web applications, like in Hotmail, Yahoo, etc. This is easily accomplished if we're using the normal HTML TABLE markup, but the application I am working on uses  Dojo version 1.5. Unfortunately this is not possible in the Dojo with grid type 'dojox.grid.DataGrid' and after having searched everywhere in the forums, it seems this is not possible, or I have not stumbled upon a correct forum.

Below is one of the screenshot that the check box should appear in the Selected header column:

Figure 1

Not wanting to waste time, I simply come out with a HACK. Here's the result:

Figure 2

Let go through first the layout of the grid:

Code

<div id="transactionNoList" class="grid_panel">0 record(s) loaded</div> <table id="transactionNos" dojoType="dojox.grid.DataGrid" rowsPerPage="30" jsId="transactionNos" clientSort="true" rowSelector="20px" style="height:300px;" singleClickEdit="true"> <thead> <tr> <th width="50px" id="selected" field="selected" cellType="dojox.grid.cells.Bool" editable="true">&nbsp;</th> <th width="120px" id="transactionNo" field="transactionNo"><spring:message code="label.chargeValidation.transactionNo" /></th> <th width="120px" id="transactionDocType" field="transactionDocType"><spring:message code="label.manualTrigger.transactionDocType" /></th> <th width="80px" id="transactionDocStatus" field="transactionDocStatus"><spring:message code="label.status" /></th> <th width="200px" id="errorMessage" field="errorMessage"><spring:message code="label.manualTrigger.errorMessage" /></th> </tr> </thead> </table>

The above code will render the grid as shown in Figure 1. The data presented are fetched from the server, hence when the data are completely fetched, stored and updated in our dojo.data.ItemFileWriteStore via Ajax call, I included a callback to create the check box as follow:

Code
function addSelectAllCBox(checkVal) { // Hack: Add a checkbox on top of the grid for select all var selectAllChkbox = '<input id=\'selectAllId\' class=\'dojoxGridInput\' style=\'width:auto;\' type=\'checkbox\' onclick=\'selectAll();\' value="true" ' + (checkVal ? "checked=\"true\"" : "") + ' />'; dojo.byId('selected').children[0].innerHTML = selectAllChkbox; }

There is one problem I stumbled upon, when resizing the column, the entire header grid gets re-render, and this caused the check box to be overriden. To overcome this, I included the listener the grid to catch column resize, if such event is detected, it'll call the above addSelectAllCBox function.

Code
// Hack: Resize re-render the header grid, and caused the checkbox disappear. dojo.connect(dijit.byId('transactionNos'), 'onResizeColumn', function(cellIdx) { addSelectAllCBox(g_selectAll); });

The newer version of Dojo 1.7 seems to have this problem resolved, you may want to visit the tutorial to check it out: http://dojotoolkit.org/documentation/tutorials/1.7/working_grid/demo/selector.html

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~