Start Building Professional
Web Apps Today

checkAll, uncheckAll, setAllChecks

We had a need to check/uncheck all the checkboxes in a grid. We did not, however, want to have a checkbox in the header area (#master_checkbox functionality) nor did we want to reload the entire grid with different values.
What we did instead was wrote the below code, which was added into dhtmlxgrid.js after line 41 (though there is likely a better place for it...)

Code:

this.checkAll = function(){for (var cInd=0;cInd<this.getColumnsNum();cInd++){if(this.getColType(cInd)=="ch")this.setAllChecks(cInd,1)}};
this.uncheckAll = function(){for (var cInd=0;cInd<this.getColumnsNum();cInd++){if(this.getColType(cInd)=="ch")this.setAllChecks(cInd,"")}};
this.setAllChecks = function(cInd,v){this.forEachRow(function(id){if(this.cells(id,cInd).isCheckbox())this.cells(id,cInd).setValue(v)})};

Use:

mygrid.checkAll() // All checkboxes (in all checkbox columns) will be set to checked (value==1)
mygrid.uncheckAll() // All checkboxes (in all checkbox columns) will be set to unchecked (value=="")
mygrid.setAllChecks(1,"1") // All checkboxes in column 1 will be set to checked (value==1)

Note that we have also fixed a bug in the code in which a #master_checkbox, when clicked, sets the entire column to have a value of "1". When we had rows which were set to a type of "ro" (in order to not display a checkbox), the master_checkbox still set these rows to "1", which displayed as that value in that cell. It also gave false hits when we requested a list of checked rows ("getCheckedRows".) This change was made in the "_in_header_master_checkbox" prototype onclick function (line 34) found in dhtmlxgrid_filter.js.

We also added the following code to allow for an easier way to get the currently selected count. This was added after the "getCheckedRows" function in dhtmlxgrid.js:

Code:

getCheckedRowCount:function(col_ind){var d = 0;this.forEachRow(function(id){if (this.cells(id, col_ind).isCheckbox()&&this.cells(id, col_ind).getValue() != 0)
d++})
return d},

Use:

mygrid.getCheckedRowCount(1) // Will return the count of all selected checkboxes in column 1

Note that the above code includes a check to ensure that the row is, in fact, a checkbox. This same check was added to the "getCheckedRows" function.

The above changes ahve been tested in IE6/7. Other browsers may require tweaks to the code.

Hopefully others will aprreciate these changes as well!

Tnanks for provided code!
We will incorporate proposed additions in next version of dhtmlxgrid.

>>Note that we have also fixed a bug in the code in which a #master_checkbox
Fix added to the main codebase, and will be included in next build.

Glad that you found those usefull and look forward to the next version!

Here is one more function which may be a little less valuable to the general population, but we had a need for. This was added after the above "getCheckedRowCount" in dhtmlxgrid.js.

Code:

isAllChecked:function(col_ind){this.forEachRow(function(id){if (this.cells(id,col_ind).isCheckbox()&&this.cells(id,col_ind).getValue()!=1)return false;});return true},

Use:

mygrid.isAllChecked(1) // Returns true if all checkbox fields in column 1 are checked (value==1), else returns false

Thanks again!

I notice that these additions didn't make it into the 2.0 grid code. Is there still a chance that they will be added in a future build?

Thanks!

The functionality was lost during pre-release builds, because of some inner versioning conflicts. 
The next build will contain it. 

When is the next build scheduled.
I found the same need (for checkAll) at my company and we're implementing a project right now.

Next release planed on February 26 ( you can contact us directly at support@dhtmlx.com  if you need mentioned functionality ASAP )

This function though (checkall) checks also the checkboxes in disabled cells.. Is there a way to modify the code in order to check if the cell is disabled first?
I have this in order to disable cells (according to attribute "disabled" that is passed through the xml for each cell):

    mygrid.attachEvent("onRowCreated",function(id){
        var cell = mygrid.cells(id,0); //checkbox cell
        if (cell.getAttribute("disabled")) cell.setDisabled(true);
    })

Thanks