Mar
4
Arcadio March 4, 2009 9:01 pm

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.


Source codeClick with the right button to obtain source code.

  • Share/Bookmark

Comments (70)

  1. Mike said:

    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

  2. Arcadio said:

    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"));
    }
    
  3. Mike said:

    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

  4. Mike said:

    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!

  5. Tushar said:

    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

  6. Arcadio said:

    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

  7. Murali said:

    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!

  8. Sivakami said:

    Hi Arcadio,

    The component was very usefull. Thank you.

  9. Sivakami said:

    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 ?

  10. Arcadio said:

    Hi, Sivakami, I’ve just fixed the problem of the component.
    Thank you very much for your testing!

  11. MartinD said:

    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

  12. Arcadio said:

    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)" />
    
  13. MartinD said:

    Hi Arcadio,

    Thanks very much - that works a treat.

    Martin

  14. Josh said:

    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.

  15. Arcadio said:

    Hi, Josh, I’ve just updated the component to implements that feature. Try it now.

  16. Christoph said:

    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

  17. Arcadio said:

    Hi Chirstoph, bug fixed. Try it now on new version!
    Regards!

  18. Gustav Xyrer said:

    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

  19. mo said:

    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

  20. Arcadio said:

    Hello mo, I can’t reproduce your bug. Have you try it with the last version of ComboCheck?

  21. mo said:

    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!

  22. Arcadio said:

    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='';
       }
    }
    
  23. mo said:

    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 ;)

  24. Arcadio said:

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

  25. mo said:

    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?

  26. Arcadio said:

    Hi mo, I don’t understand why you remove this line, it’s necessary to the component to persist the actual state.

  27. mo said:

    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.

  28. Simon said:

    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

  29. Arcadio said:

    Hi mo, It doesn’t close when I try it, perhaps is your flash player version.

  30. Arcadio said:

    Simon, use last version of the component:
    http://www.carballares.es/en/arcadio/?p=354

  31. Andre said:

    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

  32. Arcadio said:

    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

  33. Rodolfo said:

    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!

  34. Rodolfo said:

    the real for me is.. i select some items and when i roll de scroll the get selected = false;

  35. Arcadio said:

    Hi, Rodolfo, you can modify “assigned” property to fit on your data or if data contains dynamic object create it dynamically.

  36. sergkl said:

    hi mo.

  37. sergkl said:

    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())

  38. Ukie said:

    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

  39. Arcadio said:

    Uki, use de last version of the component. http://www.carballares.es/en/arcadio/?page_id=352

  40. giorgio said:

    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.

  41. Arcadio said:

    Giorgio, I think I fixed it, thank you for the comment!

  42. 9995068137 said:

    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.

  43. Arcadio said:

    Hi 9995068137, I can’t see the problem, could you give me more details?

  44. 9995068137 said:

    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

  45. Arcadio said:

    Hi 9995068137, use last version of the component:
    http://www.carballares.es/en/arcadio/?page_id=352

  46. Andrea said:

    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.

  47. Arcadio said:

    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!

  48. Marie said:

    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

  49. Arcadio said:

    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

  50. Marie said:

    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

  51. Arcadio said:

    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.

  52. Marie said:

    Thanks Arcadio, It worked. Thanks for your quick response. You are Genius and very helpfull. Keep up your good work.

  53. Babu said:

    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.

  54. Arcadio said:

    Hi, Babu, you can exchange ComboCheckItemRenderere Checkbox class type for RadioButton class type and adjust properties. It should work.

  55. Miral said:

    @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

  56. Arcadio said:

    Thank you for your comment, Miral. I fixed it!

  57. tafkap said:

    Arcadio,

    thanks a lot for your component it was exactly what i want :) Great job !

    Cheers
    tafkap

  58. Amar said:

    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.

  59. Arcadio said:

    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!’}

  60. Ram said:

    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

  61. Amar said:

    Arcadio,

    Really superp ! tootl tip working Great. thanks lot. Thanks for provide such wonderful component which 100% covered my requirement.

    Thanks Guru.
    –Amar

  62. Hugo said:

    Thank your for your great component. Please help me.How to add this component to datagridColumn?

  63. Arcadio said:

    Hi, Hugo… ComboCheck is not available as itemrenderer for a DataGrid, perhaps in future versions.

  64. Arcadio said:

    hi Ram, ComboCheck with radio button is not supported, you can extend the component or rewrite from zero to implement radio button.

  65. 919881137352 said:

    Hi Arcadio,

    If we add more item in dataprovider and scrolls it disorder the checkbox selection.

    Do you have any idea??

    Cheers,
    Ram

  66. Pier said:

    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

  67. Arcadio said:

    Hi, Pier. Have you try last version?
    I’ve just migrate the component to flex 4 for setter performance

  68. Pier said:

    Unfortunately, i’m working in Flex 3 only.
    Which version is the last for Flex 3?

  69. Arcadio said:

    Version here:
    http://www.carballares.es/en/arcadio/?page_id=352

Post a comment



  • Share/Bookmark
Creative Commons License
This blog is under Creative Commons licence, unless indicated otherwise.
Special thanks to Mark James for the icon set used in this blog.