Adding checkbox in DataGrid header column.

Submitted by sharath on Mon, 01/05/2009 - 23:17.

Dojox Grid Support

Hi All,

I'd like to add 'checkbox' in DataGrid header column, added 'dijit.form.CheckBox' but it is not showing up. It is displaying 'selected' in header. I'd like to add functionality on header check box is that when we select this checkbox then it should select all the DataGrid rows checkboxes below its column. When I deselect this header checkbox then it will do the same for selected checkboxes under this column? can some please help me how to add this functionality???

Defined DataGrid as below:

<table id="gridNode" dojoType="dojox.grid.DataGrid"
query="{ empId: '*' }" clientSort="false" selectionMode="none"
store="jsonStore">

<thead>
<tr>
<th field="selected" name=" " width="5%"
editable="true" cellType="dojox.grid.cells.Bool">
<div dojoType="dijit.form.CheckBox" id="selected" name="selected" value="true" />
</th>

<th field="empId" width="10%"> Employee Id </th>
<th field="firstname" width="20%">First Name</th>
<th field="lastname" width="20%">Last Name</th>
<th field="job" width="40%" >Job</th>
<th field="age" width="5%" >Age</th>
</tr>
</thead>
</table>

Thanks in advance.

Regards,
Sharath.

Login or register to post comments
Subscribe post

I've gotten a checkbox to

Submitted by fivefeet8 on Tue, 01/06/2009 - 02:16.

I've gotten a checkbox to appear in the header by using this:

The check function for the checkbox onclick event could be like this:

function check(cbox){

dojo.forEach(grid.store._arrayOfAllItems, function(item){

grid.store.setValue(item, 'selected', cbox.checked);

});

grid.store.save();
}

I'm no expert by any means. Maybe someone has a better solution.

Checkbox column shouldn't do sorting in DataGrid header.

Submitted by sharath on Tue, 01/06/2009 - 15:02.

Hi All,

Thanks for your reply. It is displaying checkbox in header column but when I check this header checkbox it is doing sort on this column(sort image appearing) and it is not showing "checked" on header checkbox but it is showing all "checked" in grid check boxes(rows).

Can you please let me know how to remove sort functionality on header checkbox column so that we can see header checkbox "checked" thing on the screen.

Thanks,
Sharath.

Oops. I forgot about that.

Submitted by fivefeet8 on Tue, 01/06/2009 - 19:34.

Oops. I forgot about that. It was also implemented in my test. Use the canSort extension.

// disable sorting of checkbox column
function noSort(inSortInfo){

if(inSortInfo == 2){
return false;
}else{
return true;
}
}

inSortInfo value is the column index sorting starting at 1 for the first column.

Drag the column and it loses noSort

Submitted by munikuntla on Mon, 04/13/2009 - 21:44.

It works (does not sort) until you drag that column to a different place in the column-order. Is there a noDrag setting that can be applied to this column?
Shouldn't the dojo grid base code apply the noSort functionality of that column to wherever it is moved in the grid column order?

dojox.grid.cells.Bool is not displaying checkboxes with version 1.3, whereas it was doing so in 1.2.3. Maybe it needs to be re-implemented in 1.3. Any response on this is appreciated.

Checkbox column shouldn't do sorting in DataGrid header.

Submitted by sharath on Tue, 01/06/2009 - 19:15.

Thanks it worked.

Have a nice day.

--Sharath.

checkbox doesnt checked, unchceked

Submitted by fpm on Wed, 02/04/2009 - 09:38.

Hi, i'm new to dojo, and i am doing the same kind of datagrid example without checkbox in header but only label "Select". But the problem is it doesnt checked the checkbox when i clicked an items. Please help.

below are the codes:

<span jsid="jsonStore" dojoType="dojo.data.ItemFileReadStore" url="<%=request.getContextPath()%>/json/manage_users.json"></span>
<div dojoType="dijit.Menu" jsid="gridMenu" id="gridMenu" style="display: none;">
<div dojoType="dojox.widget.PlaceholderMenuItem" label="GridColumns"></div>
</div>

<div class="partsContainer">
<div class="gridContainer">
<table id="gridNode" jsid="grid" dojoType="dojox.grid.DataGrid" query="{ user_code: '*' }" clientSort="false" selecttionMode="none" store="jsonStore" canSort='noSort' rowsPerPage="20" columnReordering="true" headerMenu="gridMenu">
<thead>
<tr>
<th field="selected" width="35" editable="true" cellType="dojox.grid.cells.Bool">Select</th>
<th field="user_code" width="75">User Code</th>
<th field="email" width="">Email</th>
<th field="f_name" width="">First Name</th>
<th field="l_name" width="">Last Name</th>
<th field="company">Company</th>
<th field="status">Status</th>
<th field="date_reg" width="105">Date Registered</th>
</tr>
</thead>
</table>
</div>
</div>

cheers,
fpm

Use ItemFileWriteStore

Submitted by kaliman_forever on Fri, 02/13/2009 - 21:50.

Hi. try to use ItemFileWriteStore instead of ItemFileReadStore

Rafael

Search