Flex: generic checkbox header renderer

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


6 Responses to Flex: generic checkbox header renderer

  1. Neat little functionality. I’ll flag this post for the future.

  2. 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?

  3. 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.

  4. chinmoy says:

    which function to overwrite so that the row for which the checkbox is selected is also selected?

  5. sampath says:

    Great example.It worked a treat for me.
    I really need some help from you…………..
    Can you tell me how to implement gmail style select all header renderer instead of just a checkbox
    Thanks in advance.

  6. nirav says:

    i am not binding any data to checkbox,and still i want this functionality, how can i do this?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: