Custom ILists, CheckBoxDataGrid, Merged Arrays

Earlier I published how to do a CheckBoxDataGrid where the selection model uses CheckBoxes instead of mouse clicks. I should have mentioned that the example used the DataGrid’s selection logic which meant that the dataprovider item’s selected state was not stored in the dataProvider and thus you couldn’t sort by whether an item was selected or not.
If you have a selected field in your data, then the code to handle checkbox selection is quite different. You basically shut down the DataGrid’s selection code and update the collection instead. You can see that in the source code for this example.
This example goes one step further, however. It assumes that you want to store selection in the dataProvider, but the dataProvider items don’t have a selected field and are “immutable”. The example code shows how to use a custom IList to merge two arrays or ArrayCollections into one merged collection where the data objects contain fields from both arrays. By doing that you can “add” a selected field to each item.
Custom ILists are a powerful way to change data without having to process each data item. The example code merges the items on-demand instead of up-front thus saving startup time. It would be wasteful to process 1000 items if you only show 7 and the user doesn’t scroll past 20.
Anyway, here’s the code. Usual caveats apply.
Download Source
Run Demo

16 Responses to Custom ILists, CheckBoxDataGrid, Merged Arrays

  1. Cato Paus says:

    Hi Alex, I just have to say to that I’m very happy you submit’s so often on your blog 🙂 your samples have been VERY VERY helpful, Thanks a lot 🙂
    I have a enterprise support program at Adobe but your blog is a very good place to start. 🙂

  2. Hi Alex, I appreciate everything you do here and on flexcoders immensely but what do you have against View Source? 🙂
    ———————
    Alex responds:
    Unfortunately, it takes too much time to publish all of those files in this blog system. I’m not able to multi-select files for upload in MovableType. Also, I don’t use FlexBuilder for these small things. I have over 1000 test cases like these on my system from different releases and it is just easier and faster for me to manage them via command line.

  3. Fair enough. Out of curiosity, what app do you write Flex code in besides Flex Builder?
    ————————–
    Alex responds:
    You have to remember that I was writing 1000’s of lines of AS code before there was a Flex Builder. I’ve actually customized Visual Studio 6 to code color AS. I don’t need code-hinting. I build off the command line.
    I use FlexBuilder for browser integration and memory profiling, but not for these quick examples. I’m just too old-school….

  4. Anthony says:

    Great tutorial!
    My question would be, how would I accomplish something similar using an XMLList as the source of the data I wish to display?
    Dumb question, I know…
    ————–
    Alex responds:
    You could probably merge nodes, but I would recommend converting to object in the factoryfunction. Access to xml data is significantly slower than access to object properties, especially if you are dealing with non-strings.

  5. Vinay says:

    Hi Alex,
    Thanks for your previous answer on the blog below.
    http://blogs.adobe.com/aharui/2008/02/checkbox_selection_in_datagrid.html. I have a question pertaining this blog of yours. I see that this sample uses CheckBoxDataGrid2 and didnt see that in the source. Is CheckBoxDataGrid2 same as the one in http://blogs.adobe.com/aharui/2008/02/checkbox_selection_in_datagrid.html
    Thanks for your prompt reply once again.
    ——————
    Alex responds:
    Sorry. I just updated the .zip file. Thanks for letting me know.

  6. Amit says:

    Hi Alex,
    Thanks for all the solutions that you put out here. Your samples are really helpful. I was lookin through the source code and couldn’t find CheckBoxDataGrid2.mxml in the download. Is it possible for you to post that as well?..Thanks once again
    —————
    Alex responds:
    I updated the .zip. Download the source again.

  7. Mark Shen says:

    Hi,
    It is a good example!!
    It can not find CheckBoxDataGrid2.mxml
    A error happen for
    you maybe need upload CheckBoxDataGrid2.mxml
    Thanks
    Mark
    ——————
    Alex responds:
    I just updated the .zip. Download the source again.

  8. Scott says:

    Hi Alex,
    Thanks for contributing your expertise.
    I’m using WebServices as a data provider and want to have edible checkboxes represent one of the columns.
    I feel like a spoiled child: “do I really have to do all that AS coding?”
    Spoiled or not, does Flex3 fix any of the problems? Have you heard whether Adobe is going to make this easier?
    Thanks
    Scott
    ——————-
    Alex responds:
    This post was about using checkboxes to select items. You can easily use checkboxes as a renderer/editor for a boolean field in your data. I think you can even find examples in the Flexcoders archive.

  9. Vinay says:

    Hey Alex,
    Thanks for all your responses. Is there a way in either of your examples related to checkboxdatagrid to disable the selection of the checkbox for certain cases?
    Thanks,
    Vinay.

  10. Bray says:

    Hi Alex,
    Is it possible to navigating thru and selecting/deselecting checkboxes in datagrids (or adg) by just using the arrow keys and spacebar?
    Thanks,
    Bray
    ——————–
    Alex responds:
    Should be possible. Just catch the space bar and change selected on the correct checkbox.

  11. Bray says:

    Hi again Alex,
    Found this other sample of yours, http://blogs.adobe.com/aharui/CheckBoxDataGrid/CheckBoxDataGridApp.swf
    It works great! How where you able to implement that one?
    I couldn’t find the right source. Can you give me a link for the source?
    Thanks,
    Bray
    —————
    Alex responds:
    I just looked at the source. Looks ok to me.

  12. sureshki says:

    Hi.. I downloaded your source code for checkeddatagrid control. Your code works correctly only when we choose the checkbox field as the first column. Otherwise it doesn’t work.. You didn’t mention it anywhere. I wasted my half an hour 🙁

  13. Andrej says:

    Hi Alex,
    thanks for your solution on CheckBox item renderer. I implemented it in my application.
    The problem occupies me now is how to implement VBox component, so that I can vertically align CheckBox component inside DataGrid.
    Thanks for any suggestion.
    Andrej
    ——————
    Alex responds:
    The item renderer section has a solution for centering a checkbox. I think you can use it to vertically adjust it as well

  14. Pete says:

    Hi Alex,
    I’m using an ArrayCollection to sort my DataGrid, then have another ArrayCollection to filter for the last name through my Grid (which is loaded via HTTPService). Can your method of merging be used for this? I can email you the code if need be. Thanks!
    ————————-
    Alex responds:
    I don’t think I understand the question, and I don’t have time to look at your code. You might be better off posting on FlexCoders

  15. dieyana says:

    hye….
    i’ve got a problem to build my checkbox.i have a checkbox with label “IP address” and a text input beside it.
    i want to be able to input any IP address and when i click the checkbox button it will filter the datagrid according to IP address input earlier.it like a combination of ‘search’ and checkbox.but i don’t know how to do this.
    can you show me how to work on this one??i’m ready to learn form the expert!!
    ———————
    Alex responds:
    This is better to ask on FlexCoders. I don’t have the time to help you here.

  16. xshare says:

    People have asked in here how to do a HeaderRenderer Checkbox to select all. This is my solution, I thought I’d post it here in case someone searches how to do this:
    On the column:
    In the script: