ComboCheck is a Flex component which extends ComboBox class and display CheckBox as itemRenderer with multiple selection.
It provide selectedItems property to store provided object in the ComboBox dataProvider and selected by the CheckBox.
Click with the right button to obtain source code.







Freelance
Downloads
Projects
Utilities
Friends
Links
March 4, 2009
9:01 pm
Categories
Files






March 18, 2009 - 6:37 am -
Hi,
Thanks for the control - but what I can’t work out is how to set the checkboxes to be selected if rendering manually… here’s my code (I’m putting the columns on a datagrid into the ComboCheck control so users can show or hide them):
//If data has been returned then we should have a grid with data columns so use
//them to provide the data for the column selection combobox.
if (dgg.columnCount > 0)
{
for each(var dgcol:DataGridColumn in dgg.columns)
{
var col:Object = new Object();
col.label = dgcol.headerText;
col.value = dgcol.dataField;
gridCols.addItem(col);
//HOW DO I SET THE CHECKBOX TO BE SELECTED?!?!??!
}
cmb_gridColumns.rowCount = dgg.columnCount
lbl_gridColumns.enabled = true;
cmb_gridColumns.enabled = true;
}
I’ve tried seeing if you’re exposing the CheckBox control for each item in the combobox but it doesn’t appear so… so if you can let me know how I’d make the items selected by default I’d appreciate it.
Thanks,
Mike
March 18, 2009 - 9:51 am -
Hi, Mike, you can use this:
1. Insert a property “assigned” on your comboBox dataProvider:
{label:'label 1', value:1, assigned:true}2. Add to the “ComboCheck.as” the following method:
override public function set dataProvider(value:Object):void { super.dataProvider = value; for each (var obj:Object in dataProvider) { if (obj['assigned']==true) { selectedItems.addItem(obj); } } dispatchEvent(new Event("valueCommit")); dispatchEvent(new Event("addItem")); }March 18, 2009 - 10:45 pm -
Hi Arcadio,
Thanks for the quick answer! I have two problems though - one is that when I add the function you provided it won’t compile due to this message on the function definition:
1020: Method marked override must override another method. ComboCheckTest/src Main.mxml line 27
I’m not a Flex guru so I’m not sure how to fix this - any ideas?
The other thing with the function is how do I make sure it only runs for the ComboCheck control? On the pages that I want to use your control I also have datagrid and charts so I want to make I’m only overriding the “set dataProvider” for the ComboCheck.
Cheers,
Mike
March 19, 2009 - 4:31 am -
Me again…. sorry, I was putting the code you gave me in the actionscriopt in the MXML file not in the ComboCheck.as… after I did that it ran fine and now all seems good - thanks again!
September 6, 2009 - 2:12 pm -
Hi Arcadio,
Thanks for the useful component that you have written. I have one more extension to it, in which i want to select/deselect rendered checkboxes on the fly in ActionScript. Since the ComboCheckItemRenderer only overrides the set data function, I can only do that at the initialization of the combo using the ‘assigned’ key. Is there someway I can achieve this extension?
Thanks,
Tushar
September 9, 2009 - 8:30 am -
Hi Tushar, you can try accessing ComboBox dataprovider o directly the collection and change/add “assigned” attribute to “true” whatever item you like:
items.getItemAt(1).assigned=true
September 16, 2009 - 2:30 pm -
Thanks a lot for this extension! I had been looking all over the net for this
Very clean and very powerful and saves a lot of real-estate compared to a normal list box. Thanks again!
October 8, 2009 - 9:53 am -
Hi Arcadio,
The component was very usefull. Thank you.
October 8, 2009 - 10:59 am -
Hi Arcadio,
I face an issue with the component.
1.While creating the dataprovider, I set the ‘assigned’ property as ‘true’ for 3 items.
2.After the page is rendered, user selects 2 more items.
3.Now, ‘comboCheckBox.selectedItems’ gives only the items last selected by the user. The 3 items which were already selected are not in the ’selectedItems’ list.
During the creation of dataProvider,should we have to add the items with assigned = true to the selectedItems List ?
October 10, 2009 - 7:00 pm -
Hi, Sivakami, I’ve just fixed the problem of the component.
Thank you very much for your testing!
October 14, 2009 - 12:21 pm -
Hi Arcadio,
I like your component very much. Thanks!
I would like to know how to get a change event out of the component, e.g. when you check an item can this be picked up outside component so that I can take some action like enabling/disabling a button. I have tried without joy:
Thanks,
Martin
October 14, 2009 - 6:51 pm -
Hi, MartinD, you can use “addItem” event of the componet to access all its properties, e.g:
private function onAddItem(event:Event):void { Alert.show(event.toString()); } < arcadiocarballares:ComboCheck id="myCombo" dataProvider="{items}" labelField="label" width="100" addItem="onAddItem(event)" />October 15, 2009 - 4:40 pm -
Hi Arcadio,
Thanks very much - that works a treat.
Martin
October 21, 2009 - 4:54 pm -
Hi Arcadio,
I am tried to add ‘All’ option on the top of the list. And selecting it should select everything below in the list. Deselecting should uncheck all the items. Is it possible to acheive this. Please help.
Thanks.
October 22, 2009 - 8:01 pm -
Hi, Josh, I’ve just updated the component to implements that feature. Try it now.
October 23, 2009 - 4:49 pm -
Hi Arcadio!
Thank’s for sharing this great component!
I am facing a problem though. I have a list of about 25 elements (so a scrollbar appears), all initially not selected. When selecting an element and scrolling down, other checkboxes are selected as well in a constant distance. I think this is due to the fact that flex reuses the itemrenderers, so they are probably not reset to “unchecked” before they are reused in the area that gets visible after scrolling. Any idea how to fix this?
Thanks, Christoph
November 4, 2009 - 8:42 pm -
Hi Chirstoph, bug fixed. Try it now on new version!
Regards!
November 6, 2009 - 1:13 am -
This is just awesome, Someone asked me to do this because MS access does it and I didn’t know what to do until I found this, thanks a lot
November 9, 2009 - 11:59 am -
hi arcadio!
first of all: great component, very usefull! one issue bugs me though: the text-property of my comboboxes doesn’t seem to be updated properly after i refresh the dataproviders (same issue with your new button “select all”). do you know which eventhandler i could use? i tried CollectionEvent.COLLECTION_CHANGE (with “callLater”) but without success… something happens after that but i can’t figure it out!
thanks in advance!
greets
mo
November 9, 2009 - 3:03 pm -
Hello mo, I can’t reproduce your bug. Have you try it with the last version of ComboCheck?
November 9, 2009 - 5:06 pm -
thanks for the quick response!
yes, working on your newest version. for example: select some entries here: http://www.carballares.es/en/arcadio/?page_id=352
-> combobox text property shows “multiple”
-> now hit the button “deselect all” and text still is “multiple”
of course in this case you could handle this issue manually but in my case the dataprovider gets changed after a webservice call and i couldn’t figure a way out to refresh the text properties because after my manually refresh-function something else is happening (rendering of some kind maybe). sometimes it even works but most of the time i see “multiple” for a second and it changes back to the label of the first entry in the dataprovider
sorry if it sounds confusing!
November 10, 2009 - 9:33 am -
Well, you can simply put the text property of the combo to the value required. Just as in this example:
private function selectAll(sel:Boolean):void { for each (var item:Object in items) { item.assigned = sel; } myCombo.invalidateDisplayList(); myCombo.invalidateProperties(); if (sel==true) { myCombo.text='multiple'; } else { myCombo.text=''; } }November 10, 2009 - 10:01 am -
i didn’t explain my problem properly, sorry! i did it kind of how you showed up there and it works if you already have the dataprovider and nothing else is going on.
but i get my arraycollection from a web-service and there is a lot of stuff going on in the application. in the web-service result handler i assign the arraycollection and after that i update the text property but oddly it gets overwritten again after that (not always though, very strange). do you understand this issue? slowly i’m getting a headache
November 10, 2009 - 11:58 am -
Hello, I’ve just update the component. I think this update solves the bug. Try it now (please, clear cache and use last version 1.2.2).
November 11, 2009 - 9:55 am -
fantastic!! that did the trick… thanks a lot!
i didn’t wanna bug you with this but now there’s another problem which i can’t figure out: the combobox closes when i click a checkbox. only when i remove “super.data.assigned = selected;” in the onClick handler (ComboCheckItemRenderer) the combobox stays open. but then there’s a different issue: when i hit a checkbox it gets checked like suppossed to but after scrolling (so the marked checkbox was out of sight for a moment) it is unchecked again. now i don’t know where to assign the assign property. sadly, the close() doesn’t get triggered in this case… there i could have prevented the closing. could you please help me out again?
November 11, 2009 - 7:46 pm -
Hi mo, I don’t understand why you remove this line, it’s necessary to the component to persist the actual state.
November 12, 2009 - 9:37 am -
i realized that too but i don’t find another way to stop the combobox from closing after hitting a checkbox. only if that line is removed.
November 12, 2009 - 12:01 pm -
Hi Arcadio, Great code. I have one small problem. If I click the scrollbar, the control collapses. It is not possible to scroll. There are only 10 items in the list, so I was thinking of using rowcount. Is there away I can hide the scrollbar to get around the problem.
You help will be much appriciated. Thank you
Simon
November 12, 2009 - 5:29 pm -
Hi mo, It doesn’t close when I try it, perhaps is your flash player version.
November 12, 2009 - 5:30 pm -
Simon, use last version of the component:
http://www.carballares.es/en/arcadio/?p=354
November 16, 2009 - 9:10 pm -
Hello Arcadio! first of all thanks for component. Great work.
I tested last version (1.2.2) but i am having same problem as mo, i think. I have your component in small datagrid (days of week) as itemrenderer (component inside a HBox) and dataprovider will be hours of day. for each row of datagrid dataprovider will be different (only the assigned property, i want the component have selected the hours saved in DB for that day). But when i do this different Dataprovider, when i click CheckBox combobox closes or when i try to scroll it closes also. If i have same dataProvider with all assigned property = false…works great, but as no CheckBox selected by default.
You know what may be happening?
thanks
November 17, 2009 - 9:33 am -
Hi, Andre. ComboBox as itemrenderer have some problems with data refresh in the container. Someway you must provide the itemrenderer with a ’state’ that can fix the data to display.
You can inspect similar problem here: http://www.carballares.es/en/arcadio/?p=169
November 17, 2009 - 3:47 pm -
Hey Arcadio, nice extended.. very good! i have a question, i’m receiving a dinamic data from backend, i’m not using a static like you example… what i can do with this
if (data.assigned==true) {
selected=true;
cose my info dont have this atribute .assigned. and it gave me an error.
Cant acces a null propertie.. thanks !
Brazil!
November 17, 2009 - 3:51 pm -
the real for me is.. i select some items and when i roll de scroll the get selected = false;
November 17, 2009 - 7:43 pm -
Hi, Rodolfo, you can modify “assigned” property to fit on your data or if data contains dynamic object create it dynamically.
January 7, 2010 - 1:54 pm -
hi mo.
January 7, 2010 - 1:56 pm -
Hi mo. user should use this method in the ComboCheck class:
override public function set dataProvider(value:Object):void
{
try
{
var xmlListCollection: XMLListCollection= new XMLListCollection(value as XMLList);
var resultArray:Array = xmlListCollection.toArray();
var resultCollection:ArrayCollection = new ArrayCollection(resultArray);
super.dataProvider = resultCollection;
}
catch (e:Error)
{
super.dataProvider = value;
}
//clean old selected items
if (selectedItems != null)
{
selectedItems.removeAll();
}
for each (var obj:Object in value) {
if (obj['assigned']==true) {
selectedItems.addItem(obj);
}
}
dispatchEvent(new Event(”valueCommit”));
dispatchEvent(new Event(”addItem”));
}
Because the component uses ArrayCollection. Not XmlListCollection (xmlResult.children())
January 12, 2010 - 10:49 pm -
Question about they component. Lets say I have 10 items in the combo box and only 5 are displayed. If I select the first couple of items, then scroll down, the sixth and seventh item are shown as selected when I have not selected them. Ideas how to fix that
Thanks
January 13, 2010 - 8:56 am -
Uki, use de last version of the component. http://www.carballares.es/en/arcadio/?page_id=352
February 3, 2010 - 6:29 pm -
Hi. Great component. I think there is a problem. To reproduce it, go to http://www.carballares.es/en/arcadio/?page_id=352, deselect all and then select label 14, 13, 12, 11, 10. Close the combo and re-open it. Do you find label 2, 3, 4, 5 selected?
Thanks a lot.
February 8, 2010 - 1:34 pm -
Giorgio, I think I fixed it, thank you for the comment!
March 3, 2010 - 10:41 am -
Hi Arcadio,
Thank you for the wonderful control.
But I have been stuck up with an issue. The drop down is getting invisible while dragging down. I am loading more than fifty item from my database to this control. I am using your latest download which is available in this website.
It will be great if you can come up with a solution.
Thanks in advance.
March 4, 2010 - 8:33 pm -
Hi 9995068137, I can’t see the problem, could you give me more details?
March 5, 2010 - 7:17 am -
Hello Arcadio,
Thank you for your response.
Please try with 9 items in your data provider. In the given example you have tried with four items. Which will not have scroll appearing there. We have to make the scroll bar appear there.
I hope you got the situation…
Thank You.
Regards
Sumesh.S
March 26, 2010 - 9:21 am -
Hi 9995068137, use last version of the component:
http://www.carballares.es/en/arcadio/?page_id=352
April 2, 2010 - 3:04 pm -
Hi Arcadio,
Thanks for the control, very good!
I use version 1.2.3 but i have a problem. I’m receiving a dinamic data from backend, not using a static ArrayCollection. When click first or second item combo close, if click other don’t.
April 14, 2010 - 8:52 pm -
Hi Andrea, it is possible you were using ObjectProxy in your collected data por Remote service. Try to verify if data items for the collection are loaded as an ObjectProxy.
You can do this on a HttpService with data back in XML:
Configure component:
< mx:HTTPService id="requestItems" url="http://carballares.es/arcadio/wp-content/uploads/2010/02/ComboCheck1_2_3/data.xml" method="GET" result="onResult(event)" resultFormat="object" useProxy="false" />and result handler:
private function onResult(event:ResultEvent):void { var aux:ArrayCollection = new ArrayCollection(); aux=requestItems.lastResult.items.item; for (var val:String in aux) { var obj:Object = new Object(); obj.label = aux[val].label; obj.value = aux[val].value; items.addItem(obj); } }And associate items to your Combocheck.
You can see this example in the last version: http://www.carballares.es/en/arcadio/?page_id=352
I hope it works!
April 23, 2010 - 3:04 am -
Arcadio,
Your example is very helpfull. I have one question. I wanted a label called Select ALL in the dropdown instead of a seperate button and when i select it it should select all the other items and deselect it, should deselect all items. How can i acheive it.
Thanks,
Marie
April 23, 2010 - 8:12 am -
Hi Marie, you need to implement createChildren constructor in ComboCheck and add to it that button and its functionality. You must adapt dimensions of the component too.
You can find an illustrative example in comboBox with pagination
April 24, 2010 - 1:02 am -
Hi Arcadio, I still didn’t get it to work. Can you help me with an example. I added the label to the dropdown as the first item in the list.
{label:’Select All’, value:0},
Thanks,
Marie
April 25, 2010 - 11:24 am -
Hi Marie, I’ve just added two new events to manage this eventuality. Try it in http://www.carballares.es/en/arcadio/?page_id=352.
April 26, 2010 - 6:30 pm -
Thanks Arcadio, It worked. Thanks for your quick response. You are Genius and very helpfull. Keep up your good work.
April 30, 2010 - 6:05 am -
Hi, Arcadio….Its a great component and appreciate your work. I am wondering if you ever did or came across a Combobox with radio buttons (not multi-select) in it. Any sample or reference will be of great help. Thanks in advance.
April 30, 2010 - 7:01 pm -
Hi, Babu, you can exchange ComboCheckItemRenderere Checkbox class type for RadioButton class type and adjust properties. It should work.
May 16, 2010 - 12:32 pm -
@Arcadio:
I tried your Select All functionality.
I have one suggestion:
1. If top checkbox(Select All) is unchecked and user manually selects all other checkboxes then top checkbox should also get selected automatically.
2. Sameway, If after selecting select All checkbox, user unchecks any of the child checkboxxes, top checkbox should get unchecked.
Thanks for this wonderful component.\
Miral
May 22, 2010 - 9:51 am -
Thank you for your comment, Miral. I fixed it!
May 27, 2010 - 1:32 pm -
Arcadio,
thanks a lot for your component it was exactly what i want
Great job !
Cheers
tafkap
May 27, 2010 - 7:04 pm -
Arcadio,
Great Component what i have expected for my requirement. really superb ! i need one more future on this kindly help me on that.
when i rollover every item inside the dropdown i need to show item description as tool tip. i have tried so many ways but i cann’t. please help me on this. advance thanks.
June 7, 2010 - 7:37 pm -
Hello Amar, you can add this code to ComboCheckItemRenderer.as:
override public function set data(value:Object):void { if (value != null) { super.data = value; if (value.tooltip!=null) { toolTip = value.tooltip; } } }And define a new property in the dataProvider:
{label:’label’, value:1, tooltip:’hello!’}
June 15, 2010 - 12:19 pm -
It is great component…saves time in wrting from scratch…appreciate your hard work.I have modified your component with radio button and i trying to get the dropdown list to close on selection of a radio button. it only does when you click out side the component but not after you seelcted the a radiobutton.Can you please suggest me where to add the Close property of the combo box
June 15, 2010 - 8:45 pm -
Arcadio,
Really superp ! tootl tip working Great. thanks lot. Thanks for provide such wonderful component which 100% covered my requirement.
Thanks Guru.
–Amar
June 21, 2010 - 8:43 am -
Thank your for your great component. Please help me.How to add this component to datagridColumn?
June 22, 2010 - 10:21 pm -
Hi, Hugo… ComboCheck is not available as itemrenderer for a DataGrid, perhaps in future versions.
June 22, 2010 - 10:23 pm -
hi Ram, ComboCheck with radio button is not supported, you can extend the component or rewrite from zero to implement radio button.
August 19, 2010 - 11:17 am -
Hi Arcadio,
If we add more item in dataprovider and scrolls it disorder the checkbox selection.
Do you have any idea??
Cheers,
Ram
August 24, 2010 - 4:51 pm -
Hello Arcadio,
thank you for your lovely component.
Quick question: as many others, i’m loading data into the combocheck dynamically, binding the dataprovider with a collection filled on the return of a server call.
My question is about the emptying of the selected items: with a “Reset” button, i empty the collection of selectedItems. The collection is therefore empty but the display is not updated. The text remains the same until i force the selectedItem to equal null. Also, when i open the list following the reset, the previously selected checkboxes are still selected. I’ve half-managed to fix this by overriding the updateDisplayList function in the itemRenderer, forcing all data’s “selected” property to false when the selectedItems collection is empty. However, the checkboxes remain selected until my mouse hovers over the checkbox (or if i close and reopen the list).
Would you have any suggestions?
Much appreciated and keep up the excellent work.
Best regards
Pier
August 30, 2010 - 9:17 am -
Hi, Pier. Have you try last version?
I’ve just migrate the component to flex 4 for setter performance
September 1, 2010 - 6:44 pm -
Unfortunately, i’m working in Flex 3 only.
Which version is the last for Flex 3?
September 2, 2010 - 8:45 am -
Version here:
http://www.carballares.es/en/arcadio/?page_id=352