Comments 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
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.
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
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
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.
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
Sorry, I don’t have time. Ask on a forum for help.
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
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
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
Great stuff…. the simple enhancement i made was to vertically center the checkbox rather than the default top alignment.
You should be able to manipulate the selectedItems, but you have to re-apply the selectedItems after manipulation.
I generally don’t support the code in these posts. Feel free to ask on the forums. Maybe someone will help you out.
Sounds like the AIR libraries are not in the project
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.
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
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.
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
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
I would ask on the Adobe forum.
Thanks for all your work for the community – it really is amazing.
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?
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.
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.
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.
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.
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
Sorry I am using spark components Checkbox instead of mx.controls.It is resolved.
—Nash
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
You can always manipulate the selectedIndices as needed.