Skip to main content
A
Anonymous
April 8, 2009
Question

Flex DataGrid and CheckBoxes

  • April 8, 2009
  • 4 replies
  • 16031 views

Hi,

Fairly new to Flex and still learning but here is my issue:

Lets pretend I have an online purchasing website. A user searches for a product they wish to purchase and 20 items are returned. In the CF and HTML days I would output the list of the items with a checkbox next to each row and a FORM submit button at the bottom. The user selects which items they want and press the submit button. I would have given the value of the checkboxes the ID of the product they've checked so after form submission I'd have CF insert into a DB the IDs they selected. I do not want to save anything to a DB until the user has checked the items they want and then press submit. How on earth do I do this in Flex with Datagrids and checkboxes?

I've tried a few examples out there using ItemRenderors but they all want me to Bind to a DB and I don't need to do that here, I just need to create a checkbox for every row and know which IDs the user has selected after they press a Flex button. There does not seem to be an onclick event for checkboxes using this:

<mx:DataGridColumn dataField="selected" sortable="false"

itemRenderer="

mx.controls.CheckBox" id="customCheck"

rendererIsEditor="

true"

editorDataField="

selected"

headerText="" width="

25"

/>

Thanks

    This topic has been closed for replies.

    4 replies

    J
    jfb00
    Inspiring
    May 14, 2009

    Never Mine,

    I got it.. I have to refresh the array after change values.

    Thanks!

    Cyril Hanquez
    Cyril Hanquez
    Participating Frequently
    April 9, 2009

    Here's a good blog post and example from Derrick Grigg that will answer your question :

    http://www.dgrigg.com/post.cfm/10/20/2006/Flex-ItemRenderer-CheckBox-Sample

    http://www.dgrigg.com/samples/flex/checkboxitemrenderer/

    You don't need the extra listener

    In your case if selected is a boolean property of each objects in your dataprovider :

    <mx:DataGridColumn headerText="" width="25" dataField="selected" sortable="false">
        <mx:itemRenderer>
           <mx:Component>
             <mx:CheckBox click="data.selected=!data.selected"  selected="{data.selected}"/>           
          </mx:Component>                       
       </mx:itemRenderer>
    </mx:DataGridColumn>

    Michael Borbor
    Michael Borbor
    Inspiring
    April 8, 2009

    Hi there, welcome to the Flex world. You don't need to bind data from Flex to data from a Datagrid, but you need to bind a datagrid to a dataprovider that can be for instance an array that holds your user's shopping basket. I strongly recommend you to read these documentation files they'll help you understand better the process of populating a datagrid and handling events.

    http://livedocs.adobe.com/flex/3/html/help.html?content=dpcontrols_6.html

    http://livedocs.adobe.com/flex/3/html/help.html?content=dpcontrols_7.html

    A
    Adobe Employee
    Alex J Harui
    Adobe Employee
    April 8, 2009

    When the submit button is clicked, get the selectedItems from the DataGrid. There is an example on my blog of a DataGrid with checkboxes where the checkboxes change selectedItems.

    Alex Harui

    Flex SDK Developer

    Adobe Systems Inc.

    Blog: http://blogs.adobe.com/aharui

    A
    Anonymous
    April 8, 2009

    Hi Alex,

    If you're referring to this blog post http://blogs.adobe.com/aharui/2008/02/checkbox_selection_in_datagrid.html I found that earlier today by searching google for my problem but had some issues:

    When I download the source I can't import it into Flex Builder 3 b/c it says its not a valid Flex project. So I copied your .AS files under a folder in my project and call it out like this: xmlns:customComponents="com.custom.*"

    But I get this error and can't run it:

    Access of undefined property CheckBoxRenderer. chapter18/src DataGridDropinEditor.mxml line 33 1239226979039 944

    Also in that example I see you are using the selectedIndex of the checkbox... so if you click the 2nd item in the list (next to the firstname = "Gordon") it will show you 1 for that position. How do you get it to show "Gordon" instead? That way if I put a visible="false" for and ID column mapped to my Coldfusion remoteobject i can determine which ID will be used (I don't want the position of the checkbox) right?

    A
    Adobe Employee
    Alex J Harui
    Adobe Employee
    April 9, 2009

    The package has to match the directory structure. I generally use the default package for my examples and don't supply Flex Builder projects.

    You want to use the selectedItems property instead of selectedIndex

    Alex Harui

    Flex SDK Developer

    Adobe Systems Inc.

    Blog: http://blogs.adobe.com/aharui

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices