25 Replies Latest reply on May 18, 2009 8:20 AM by BosDog

    Flex DataGrid and CheckBoxes

    BosDog Level 1

      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

        • 1. Re: Flex DataGrid and CheckBoxes
          Flex harUI Adobe Employee

          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

          • 2. Re: Flex DataGrid and CheckBoxes
            BosDog Level 1

            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?

            • 3. Re: Flex DataGrid and CheckBoxes
              Michael Borbor Level 4

              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

              • 4. Re: Flex DataGrid and CheckBoxes
                Flex harUI Adobe Employee

                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

                • 5. Re: Flex DataGrid and CheckBoxes
                  Cyril Hanquez Level 3

                  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>

                  • 6. Re: Flex DataGrid and CheckBoxes
                    BosDog Level 1

                    Hi Alex,

                    Your example uses an array called "arr". I want to use a coldfusion component and bind the datagrid to my cf method lastresult =  "

                    DiscountService.getRequests.lastResult"

                     

                    I've tried replacing the initialize="dg.dataProvider=arr" to initialize="dg.dataProvider=DiscountService.getRequests.lastResult" but it throws an error.

                     

                    Do I need to use an Array? if so how would i convert the lastResult of my CF component to an array to use in this case?

                    • 7. Re: Flex DataGrid and CheckBoxes
                      Flex harUI Adobe Employee

                      I would not use the initialize event and simply hook up to the lastResults on the result event on your service request

                       

                      <mx:RemoteObject id="DiscountService" >

                           <mx:method name="getRequests" result="dg.dataProvider = DiscountService.getRequests.lastResult" >

                       

                       

                      Alex Harui

                      Flex SDK Developer

                      Adobe Systems Inc.

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

                      • 8. Re: Flex DataGrid and CheckBoxes
                        jfb00 Level 3

                        Nice!

                        thanks for the samples.

                        How can I select all the items with a button outside the grid or maybe in the bar of the grid?

                        Rgds

                         

                        JFB

                        • 9. Re: Flex DataGrid and CheckBoxes
                          jfb00 Level 3

                          Never Mine,

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

                          Thanks!

                          • 10. Re: Flex DataGrid and CheckBoxes
                            BosDog Level 1

                            thanks! i finally got this to work. 1 more thing though. i have checkboxes next to the items in the grid, but i also have buttons in the control bar at the bottom of the panel in which the grid is in. i want the user to be able to select the line items and click a details button if they want more details on 1 of the records. i noticed that with the checkboxes in there i cannot select a row 1 at a time. is there any way to be able to allow the user to check the boxes and/or click a line item and be able to click the details button for that line item???

                            thanks again!

                            • 11. Re: Flex DataGrid and CheckBoxes
                              Flex harUI Adobe Employee

                              The first or last (I can't remember which) of selectedItems should be the last row clicked.

                               

                              Alex Harui

                              Flex SDK Developer

                              Adobe Systems Inc.

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

                              • 12. Re: Flex DataGrid and CheckBoxes
                                BosDog Level 1

                                I did notice that... but its not apparent to the user which item they selected that they would like to get further details on b/c the highlighting feature is turned off in this case. When I change the code to not turn it off... both items are selected (if the user has both boxes checked) but I still want them to be able to select 1 line item and show the highlighted item so they can then click the details button on the control panel below and get details on the highlighted item. I want this to be separate from the checkboxes.

                                 

                                Maybe there's another way to do this and this code won't work in my case? I'm currently using a label w/ visible="false" that concatenates the IDs of the checked boxes (but every check I need to re-eval the label and checkedItems). So that when the user clicks the "approve" or "reject" button also in the control bar, I can pass the invisible labels with the IDs to a CFC to process and approve/reject the items appropriately based on the button the user clicked.

                                 

                                Is there not a simple method to carry the ID of the checkbox and concatenate to the invisible label if its checked, or remove it from the invisible label if unchecked (without doing anything with looping over selectedItems everytime)?

                                • 13. Re: Flex DataGrid and CheckBoxes
                                  Flex harUI Adobe Employee

                                  You could customize the renderer to draw differently if it is the first or last in selectedItems.

                                   

                                  Not sure why you need the invisible label.  There should be no need to aggregate the set of checked items until approve/reject is hit, and then typically one simply loops through the selectedItems and sends relevant information about those items back to the server.

                                   

                                  Alex Harui

                                  Flex SDK Developer

                                  Adobe Systems Inc.

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

                                  • 14. Re: Flex DataGrid and CheckBoxes
                                    Michael Borbor Level 4

                                    I wrote a Flex Cookbook about a dg with checkboxes you can find it in 

                                    there if you look for my name maybe it'll help you.

                                     

                                    Sincerely,

                                     

                                    Michael

                                     

                                    El 15/05/2009, a las 12:08, Flex harUI <forums@adobe.com> escribió:

                                     

                                    >

                                    You could customize the renderer to draw differently if it is the 

                                    first or last in selectedItems.

                                    >

                                    Not sure why you need the invisible label.  There should be no need 

                                    to aggregate the set of checked items until approve/reject is hit, 

                                    and then typically one simply loops through the selectedItems and 

                                    sends relevant information about those items back to the server.

                                    >

                                    Alex Harui

                                    Flex SDK Developer

                                    Adobe Systems Inc.

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

                                    >

                                    • 15. Re: Flex DataGrid and CheckBoxes
                                      BosDog Level 1

                                      i appreciate the responses and helpful insights.

                                       

                                      i'm using the invisible label b/c i have the approve and reject buttons disabled unless the invisible label is not null. otherwise i'd have to put a loop in the enabled = "{}" party of the buttons. where and how would i customize a render to draw differently? it seems like there is a lot extra work thats needed just to get a simple form selection in Flex. its now taking me weeks to finish something that could be completed in a day with HTML and CF (of course it won't look as good though).

                                       

                                      michael,

                                      your example still has the same problem (multiple line items are being selected and highlighted).

                                      • 16. Re: Flex DataGrid and CheckBoxes
                                        Michael Borbor Level 4

                                        Because that was the intention of the example, in that case remove the whole onChange and just add

                                         

                                        if(CheckBox(e.itemRenderer).selected){
                                        
                                         chkList.selectedItem=e.rowIndex;
                                         }
                                        • 17. Re: Flex DataGrid and CheckBoxes
                                          BosDog Level 1

                                          but then only 1 item is being selected. how do you determine all of the checkboxes? i've attached a sample screenshot of what i am trying to achieve. maybe i'm going down the wrong path???

                                           

                                          screenshot1.jpg

                                          • 18. Re: Flex DataGrid and CheckBoxes
                                            Flex harUI Adobe Employee

                                            The simple form selection seems to be working.  If I understand, you are trying to customize the appearance of the last item checked.  It might be easy in HTML, but the Flex lists are going to try and virtualize the number of renderers used to the number visible so it won't use tons of memory if you had lots of items.  Unfortunately we only had time to ship one list and didn't put in options to not virtualize otherwise you could just grab a renderer and color its text.

                                             

                                            There are examples of coloring renderers on my blog and elsewhere.

                                             

                                            I still think you don't need the hidden label.  I would use something like:

                                             

                                            <mx:List id="myList" change="rejectButton.enabled = myList.selectedItems.length > 0" >

                                             

                                            Alex Harui

                                            Flex SDK Developer

                                            Adobe Systems Inc.

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

                                            • 19. Re: Flex DataGrid and CheckBoxes
                                              Michael Borbor Level 4

                                              Once you're done you loop through your Dg dataProvider.

                                              • 20. Re: Flex DataGrid and CheckBoxes
                                                BosDog Level 1

                                                ok interesting that makes sense then. i didnt know renderers didnt "exist" unless they were virtual on the screen.

                                                i dont want to color the renderer (the renderer would be only the checkbox right?). i want the whole line in the datagrid to do its normal thing when a user clicks on the "row" and not the "checkbox" (by "normal thing" i mean that when a row is clicked it shows that nice blue highlight and stays on the last selected line).

                                                 

                                                maybe i'm trying to do a catch 22 here. on one hand i want the user to be able to select multiple checkboxes... but i want them to be able to select only 1 row at a time. i searched your blog and got a google missing page error.

                                                 

                                                thanks,

                                                -matt

                                                • 21. Re: Flex DataGrid and CheckBoxes
                                                  Flex harUI Adobe Employee

                                                  Bad timing.  The blogs are down this weekend.

                                                   

                                                  Did you try altering the override of drawSelectionIndicator and have it call super.drawSelectionIndicator if itemRenderer.data equals the first or last in selectedItems?

                                                   

                                                  Alex Harui

                                                  Flex SDK Developer

                                                  Adobe Systems Inc.

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

                                                  • 22. Re: Flex DataGrid and CheckBoxes
                                                    BosDog Level 1

                                                    i'm afraid i'm not familiar with those actionscript commands and do not know how they work. i bought Flex 3 Bible and have read most of it but it doesn't cover that. i'm not sure how to reference the line item in the datagrid and tell flex to highlight it.

                                                    • 23. Re: Flex DataGrid and CheckBoxes
                                                      Flex harUI Adobe Employee

                                                      It is passed into drawSelectionIndicator.  It should look something like (assuming last selectedItems is the last one selected)

                                                       

                                                           // turn off selection indicator

                                                          override protected function drawSelectionIndicator(

                                                                                      indicator:Sprite, x:Number, y:Number,

                                                                                      width:Number, height:Number, color:uint,

                                                                                      itemRenderer:IListItemRenderer):void

                                                          {

                                                            var lastSelectedItem:Object = selectedItems.length ? selectedItems[selectedItems.length - 1] : null;

                                                       

                                                            if (itemRenderer.data === lastSelectedItem)

                                                                super.drawSelectionIndicator(indicator, x, y, width, height, color, itemRenderer);

                                                          }

                                                       

                                                      Alex Harui

                                                      Flex SDK Developer

                                                      Adobe Systems Inc.

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

                                                      • 24. Re: Flex DataGrid and CheckBoxes
                                                        BosDog Level 1

                                                        hmmm... that doesn't seem to work. once i click another checkbox both are showing as highlighted and not the last one. also i cannot click on the row, only the checkbox (and a row click should not check the checkbox).

                                                        i think the first item in the selectedItems is the last one selected. i've tried changing the code:

                                                        selectedItems.length ? selectedItems[selectedItems.length-1] to

                                                        selectedItems.length ? selectedItems[0]

                                                         

                                                        but the same problem happens as mentioned above

                                                        • 25. Re: Flex DataGrid and CheckBoxes
                                                          BosDog Level 1

                                                          maybe we need to also reset the highlighted items and then only highlight the last checked? not sure how to do that though.