3.2.0

Check all checkboxes in a column

Making the following changes or additions to grid.htm in quickref folder gives the grid an extra column, populated with checkboxes, all of which can be checked or unchecked with the checkbox in the second header row.

// create extra column
obj.setColumnCount(6);

// add checkboxes to each row in this extra column
obj.setCellTemplate(new AW.Templates.Checkbox, 5);

// create checkbox for header row
checkbox = new AW.UI.Checkbox;

// put this in the 2nd header row
obj.setHeaderText(["Sub 0", "Sub 1", "Sub 2", "Sub 3", "Sub 4",checkbox], 1); 

// set up event for this checkbox that, on value change, it updates the checkboxes in the column
var num_rows = obj.getRowCount();
checkbox.onControlValueChanged = function(value){ 	
        for (i=0; i<num_rows; i++){								       obj.setCellValue(value,5,i);	
        }							
                obj.refresh();
     };


While this appears to work, one consideration is that the loop that sets the value of the checkbox in the templated cell seems very slow on large datasets. It would be better to be able to set the value for the whole column at once i.e. just using

checkbox.onControlValueChanged = function(value){ 								       obj.setCellValue(value,5);						                       obj.refresh();
                                     };


This nearly works, but there seems to be a problem in that, if a checkbox in the grid is checked prior to them all being checked (using the header checkbox), on unchecking all (again using the header checkbox) this particular box remains checked - in other words it retains its state regardless of the event action. Any views on overcoming this would be greatly appreciated.

Will


Will
November 2,
Will, it is much faster to refresh only a column instead of the whole grid, you can use:
obj.getCellTemplate(5).refresh();
Carlos
November 2,
Carlos, thanks for that.

I've tried your suggestion and it seems to help a bit, although not that much.

I'm sure the real reason why this is slow is the loop thru all records. It would be better to avoid doing such a loop, or somehow doing this is in some kind of virtual way like the display of the grid for v large datasets.

Hopefully in what I'm doing, the requirement to checkbox 10,000 records (which takes 2-3 mins in IE6 & bit quicker in FF) shouldn't be that common!

Will
Will
November 3,
Will,
Based on some tests I did, a possible solution could be a template re-asign for the column instead of change each cell-control-value (one by one via a loop), but the real bottle-neck here is setCellTemplate (rendering visible templates) for large datasets.
I would suggest to use setEditorTemplate to display an editable checkbox on doubleclick (just for one cell), or create customs-checkbox-templates (checked/unchecked) and switch them based on top toogle.
Alex's Beta2 could give us grateful surprises (about templates enhancements)...and more to come.....
And he's going to call us (users) ActiveImpatientWaiters...;-)
Thanks
Carlos
November 5,
So my new nick is .... Carlos (ActiveWaiters)
Registered user of (ActiveWidgets) Forum Group.... ;-)
November 5,
Carlos, Hi again, I've only just seen your later replies. Thanks for those.

I don't like what I did for this "check all checkboxes". There seem to be some remaining other problems:

a) if I put an alert at the beginning of the event function i.e.
checkbox.onControlValueChanged = function(value){ alert("....")
this seems to fire twice for some reason every time the top checkbox is clicked.
b) different behaviour between FF and IE6 depending on whether the final obj.refresh() is present or not: FF needs obj.refresh() but in IE6 it causes the grid data to disappear.
c) I haven't seen setCellValue method used in any of the examples so not sure if it is really intended to be used in this way

....so I would like to try and go for your suggestion of creating custom checkbox template for checked and unchecked. I haven't done one of these before and haven't seen any examples of doing a custom template in v2. Would it be the same as in v1? Any pointer to a simple example would be much appreciated.

Thanks
Will

(Maybe Alex's further reference documentation will help when it is published)
Will
November 14,

This topic is archived.

See also:


Back to support forum