This post utilizes the checkbox item renderer from the previous post.
Here I have applied the same generic checkbox renderer approach to use as a headerRenderer on every DataGridColumn.
Again – as in the previous post, you do not have to change anything.
Just drop the CheckBoxHeaderRenderer class into your headerRenderer property of any data grid column – it will take of itself!
Marking the check box in the header will set all the corresponding data provider values to be true – thus marking all checkboxes in the item renderer.
Unmarking it will do the opposite.
It works in both ways!
If all the checkboxes in all the item renderer (on this column only) are marked – the checkbox at the header will be marked too.
In the other case – not all the checkboxes are marked – the header checkbox will update itself to be not marked.
Demo is here (right click for source)
Source is here
May 2, 2008 at 22:45 |
Neat little functionality. I’ll flag this post for the future.
September 2, 2008 at 15:23 |
That’s nice, thank you. I was playing with it, in consideration of using it in an app, and i discover that de/selecting the header checkbox does not cause any COLLECTION_CHANGE events to be fired.
And actually this is easy to see from your own demo… try selecting a few rows manually, see the numSelected update accordingly. Then de/select all via the header, and it does not change.
How would you suggest to catch the de/select all event from the header?
September 3, 2008 at 10:56 |
OK, dispatching the COLLECTION_CHANGE event at the end of the Header’s onChange handler (just as you do for the Item’s onChange) seem to do the right thing.