CheckBoxes in DataGrid With CheckBox Header

So many folks want to know how to put a checkbox in the DataGrid header and have it do select-all/deselect-all. Here’s how I would do it, including how to make the checkbox appear tri-state when only some things are selected.
Usual caveats apply.
Run Demo
Download Source

29 Responses to CheckBoxes in DataGrid With CheckBox Header

  1. Brett Adam says:

    Thanks for this. I’ve seen a few variants on this theme and have been using one I cooked up for a while. It’s much more complex than your approach, so I’d like to switch.
    However, one feature I currently have is that the user can click anywhere on the list rows to select them rather than just the checkbox. I added this because early testing in our app revealed that users wanted *both* and were confused when they couldn’t just click the list anymore.
    They also seemed to want the whole row to still highlight rather than just the checkbox.
    Indeed, it seems the main reason our test users wanted the checkbox at all was that they did *not* realize that a ctrl-click was available for discontinuous selection. Indeed, I have been subsequently surprised at how many users simply do not know this “standard” list interaction exists.
    Easy enough to change your code for both these behaviors.

  2. vikrant says:

    Hi Alex
    This is good ,but if i want to delete all the selected row’s
    There is no change event fired on the select all check box as you notice we dont get selectedindices.
    What to do Help

    • Ben Whorwood says:

      Thank you Alex – found this example really helpful 🙂

      Might not be the best way (I’m relatively new to Flex) but I’ve made the following changes to ‘CheckBoxHeaderRenderer.as’ in order to get the change event to fire upon (un-)check-all…

      Add following namespace import at top:

      [code]
      import mx.events.ListEvent;
      [/code]

      At the bottom of the clickHandler() event:

      [code]
      // Manually fire change event as altering selectedIndices doesn’t
      ListBase(owner).dispatchEvent(new ListEvent(ListEvent.CHANGE));
      [/code]

      Thanks,
      Ben

  3. Alex Harui says:

    Normally you would have a separate button to request a delete. If you are trying to delete when the checkbox is selected, you can simply use the change event from the checkbox to delete all rows.

  4. Sri says:

    Hello Alex,
    Can you demonstrate this logic for an Advanced DataGrid? Like how to check all the item renderer’s checkbox if the header is selected and viceversa?
    Thank you
    Srividhya

  5. Alex Harui says:

    Sorry, I don’t have time. Ask on a forum for help.

  6. ilikeflex says:

    Hi
    Is there any way i can use the same sample and check and unchek the checkbox programmaticaly.
    var array:Array = dg.selectedItems;
    var collection:ArrayCollection = new ArrayCollection(dg.selectedItems);
    collection.removeItemAt(collection.length-1);
    delete[dg.selectedIndices[dg.selectedIndices.length-1]];
    I think i can’t use it and i need to map datafield property to some property of dataprovider to control selected property of itemrenderer.
    Please correct me if i am not correct.
    Thanks
    ilikeflex

  7. Rodrigo says:

    Hey, this is a great component, you did a really great job (I’m glad to use it), but I found a problem in it, I tried to understand the issue, but it’s far from my knowledge in flex 🙁
    The issue happens if I define a lockedColumnCount in the datagrid component (to keep the checkBox column static in the datagrid). Flex raises an internal error regarding a Sprite object, also an “indicatorDictionary” object.
    If you are willing to support this component, when you have an update, please, publish it here, again, I´ll follow this bolg waiting for this update!
    Thank you very much!
    Rodrigo

  8. Mark says:

    I have tried using your code in an AIR project by substituting mx:Application with mx:WindowedApplication and I receive the following error:
    Unable to locate specified base class ‘mx.core.WindowedApplication’ for component class ‘CheckBoxDataGridApp’. CheckBoxDataGridApp.mxml /ALEX_CheckBoxListWithDataGrid/src
    as a serious newbie, I don’t know where to go from here… any ideas?
    (btw, thanks for all of your great posts!)
    Mark

  9. Royce says:

    Great stuff…. the simple enhancement i made was to vertically center the checkbox rather than the default top alignment.

  10. Alex Harui says:

    You should be able to manipulate the selectedItems, but you have to re-apply the selectedItems after manipulation.

  11. Alex Harui says:

    I generally don’t support the code in these posts. Feel free to ask on the forums. Maybe someone will help you out.

  12. Alex Harui says:

    Sounds like the AIR libraries are not in the project

  13. Doyle says:

    Thank you Alex, just the code I need! And, thank you Ben, I am new to Flex as well and was having the same issue.

  14. shabana says:

    Hello,
    I have tried to implement the existing code with mx.AdvancedDataGrid rather than mx.DataGrid and I got the following error message:
    TypeError: Error #1010: Ein Begriff ist nicht definiert und hat keine Eigenschaften.
    at mx.controls.listClasses::AdvancedListBase/itemRendererToIndices()[E:\dev\4.0.0\frameworks\projects\datavisualization\src\mx\controls\listClasses\AdvancedListBase.as:4185]
    at mx.controls::AdvancedDataGrid/itemRendererToIndices()[E:\dev\4.0.0\frameworks\projects\datavisualization\src\mx\controls\AdvancedDataGrid.as:4088]
    at mx.controls.listClasses::AdvancedListBase/mouseClickHandler()[E:\dev\4.0.0\frameworks\projects\datavisualization\src\mx\controls\listClasses\AdvancedListBase.as:9552]
    at mx.controls::AdvancedDataGrid/mouseClickHandler()[E:\dev\4.0.0\frameworks\projects\datavisualization\src\mx\controls\AdvancedDataGrid.as:8598]

    Please let me know if it is possible to use the same code for advancedDataGrid or not.

    Note: I have to change some import class in the .as files in order to fit into the advanceDataGrid functionalities.

    Thanks

    • Alex Harui says:

      You might want to ask on the forums to see if anybody else has gotten this to work. I don’t see why it shouldn’t.

  15. Oswaldo says:

    In CheckBoxDataGridApp, DataGridColumn changes to AdvancedDataGridColumn.
    CheckBoxDataGrid now extends AdvancedDataGrid
    CheckBoxHeaderRenderer and CheckBoxRenderer use AdvancedDataGridListData and AdvancedListBase instead of the ones in the example
    Change the imports, fix code that uses “normal” clases (instead of Advanced) and the example runs again

  16. Nirmal Kumar Bhogadi says:

    Hello,
    Thanks for this wonderful component. When I am using this component in of the PopupWindows of my Application, I am facing a strange problem . When I run my application for the first time, I am getting a blank popupwindow. But when I run it for second time, the application runs well. I tried to debug it, but found no luck. Can someone help me in this respect.
    Thanks,
    Nirmal Kumar Bhogadi

  17. Randall Gremillion says:

    Thanks for all your work for the community – it really is amazing.

  18. Alan says:

    Thank you, Alex

    By the way, I have changed one row of code in selectItem function (CheckBoxDataGrid.as) to check if the Shift key pressed and now I can select multiple rows too. But I am still unsuccessful to select multiple range of rows like Gmail DataGrid or Dojo DataGrid in which I could press Shift key and select 3 rows for example, skip some, then select more 5 rows and so on…

    Any ideas, please?

    • Alex Harui says:

      SHIFT only allows one contiguous block. CTRL allows discontiguous blocks, but you have to click on each one. I’m not sure exactly what user experience you are trying to provide.

  19. Alan says:

    Hi Alex,

    Here is a demo of Dojo DataGrid: http://dojotoolkit.org/grids-charts

    It supports multiple block selection. Step by step:

    1. I select the row number 1
    2. Press Shift key
    3. Select the row number 3, so I get 3 rows in my first block
    4. Next, I skip the row number 4
    5. Select the row number 5
    6. Press Shift key
    7. Select the row number 6, so I get 2 rows in my second block. Totally, I get 5 rows of all.

    It is the user experience that I want to talk about. Thanks for your help.

  20. Alan says:

    Sorry, to be more clear and show the effectiveness of Shift key:

    7. Select the row number 7, so I get 3 rows in my second block. Totally, I get 6 rows of all.

    • Alex Harui says:

      Well, the DG isn’t designed for that. Maybe try copying the current selection before the call to selectItems and then merging it back in.

  21. Nash says:

    When i am trying to implement your code in 4.5 sdk under itemrenderers of Datagrid
    I am getting Method marked override must override another method.
    @ override public function set data(value:Object):void
    {
    super.data = value;
    invalidateProperties();
    }
    in both renderers.

    Both places we are extending CheckBox.
    Thanks
    Nash

  22. Nash says:

    Sorry I am using spark components Checkbox instead of mx.controls.It is resolved.
    —Nash

  23. Madhan says:

    Hey Alex,

    I just have one problem with you code. I understand that CheckBoxDataGrid.as has the function that overrides selection function. The problem I have is, whenever I edit a cell in the datagrid, row is checked/selected. If I go and edit another row, the previous remains checked/selected. This remains the case for multiple rows. Please help me out.

    Thanks,
    Madhan