11 Replies Latest reply: Aug 1, 2013 1:59 PM by MauricioGraciaG RSS

    Flex 4 -> Datagrid add checkbox to a column

    djh88ukwb Community Member

      Hello all.

       

      I am trying to add a checkbox to a datagrid column, so that i can use it to delete a record from the array.  My datagrid is as follows

          <mx:DataGrid x="10" y="40" width="903" dataProvider="{questionsArr}" sortableColumns="false" draggableColumns="false" editable="true">
              <mx:columns>
                  <mx:DataGridColumn headerText="No." dataField="Number" width="100" editable="false"/>
                  <mx:DataGridColumn headerText="Question" dataField="Question" />
                  <mx:DataGridColumn headerText="Delete"  width="100" />
              </mx:columns>
          </mx:DataGrid>

      The user inputs questions into the array via a textinput box.

       

      But what i want to do is add a checkbox to the "Delete" column.  If anyone could help me with this that would be great !

        • 2. Re: Flex 4 -> Datagrid add checkbox to a column
          flex4 Community Member

          Hi

           

                      Use check box as an item renderer to the datagrid and then u will get check box for the delete column

           

                            Here i posting the sample code of  item renderer and datagrid column for ur convieniance... Name that Item renderer as RenderItem.mxml

          for out timebeing..

           

                      <?xml version="1.0" encoding="utf-8"?>
          <mx:CheckBox xmlns:mx="http://www.adobe.com/2006/mxml" c>
              <mx:Script>
                  <![CDATA[
                     
                      override public function set data(value:Object):void
                      {
                         super.data=value;

           

                              // Add ur stuff here              
                      }

           

                  ]]>
              </mx:Script>
          </mx:CheckBox>

           

          and in datagrid u can use this item renderer for the Delete column

           

             <mx:DataGrid>

                         <mx:columns>

                                        <mx:DatagridColums headerText="Delete" itemRenderer="../RenderItem.mxml"/>

                         </mx:columns>

               <mx:DataGrid>

          • 3. Re: Flex 4 -> Datagrid add checkbox to a column
            djh88ukwb Community Member

            Ok, thanks both for your answers.

             

            I have now gone about doing it the following way:

                <mx:DataGrid x="10" y="40" width="903" dataProvider="{questionsArr}" sortableColumns="false" draggableColumns="false" editable="true">
                    <mx:columns>
                        <mx:DataGridColumn headerText="No." dataField="Number" width="100" editable="false"/>
                        <mx:DataGridColumn headerText="Question" dataField="Question" />
                        <mx:DataGridColumn headerText="Delete"  width="100">
                                <mx:itemRenderer>
                                    <fx:Component>
                                        <mx:HBox horizontalAlign="center" verticalAlign="middle">
                                            <s:CheckBox/>
                                        </mx:HBox>
                                    </fx:Component>
                                </mx:itemRenderer>
                        </mx:DataGridColumn>
                    </mx:columns>
                </mx:DataGrid>

             

            It works fine, as i add a question, a checkbox gets added to the Delete column.  Alls great.

             

            But when i come to click on the checkbox, the following text gets displayed [object Object]

             

            Then when i click away from the checkbox the checkbox reappears.  With it either selected or unselected depending on what value it should be.

             

            Is there anyway so that it dosent display the [object Object] ?

            • 4. Re: Flex 4 -> Datagrid add checkbox to a column
              betheflexcoder Community Member

              Please use the code given by the other guy for check

              box renderer and override the set data method as per your requirement. Read the link I have given all about item renderers for more information.

              • 5. Re: Flex 4 -> Datagrid add checkbox to a column
                flex4 Community Member

                Hi

                 

                          See in ur example u are using fx:component tag and there u are using checkbox.. flex will not allow any operations on that component when u write like that .. And in ur code the id and click properties are not allowed .. how can u make dynamic selections and how can it take u r task weather u are selecting or deselecting.. how can u add that task to delete the record

                 

                 

                                 so for such type task the usage of itemrenderer is best way.. For such type of task implementation go for the itemrenderers ..

                 

                 

                          If any doubts and updates let  me know..

                • 6. Re: Flex 4 -> Datagrid add checkbox to a column
                  Vackar Community Member

                  flex4 wrote:

                   

                  Hi

                   

                            See in ur example u are using fx:component tag and there u are using checkbox.. flex will not allow any operations on that component when u write like that .. And in ur code the id and click properties are not allowed .. how can u make dynamic selections and how can it take u r task weather u are selecting or deselecting.. how can u add that task to delete the record

                   

                   

                                   so for such type task the usage of itemrenderer is best way.. For such type of task implementation go for the itemrenderers ..

                   

                   

                            If any doubts and updates let  me know..

                  txt talk... noooooo I feel all old now.

                  • 7. Re: Flex 4 -> Datagrid add checkbox to a column
                    flex4 Community Member

                    Hi vackar

                     

                                      txt talk... noooooo I feel all old now.

                     

                     

                                         what does it mean......   am i wrong anything ...i am little bit poor in english.. if anything wrong let me know

                    • 8. Re: Flex 4 -> Datagrid add checkbox to a column
                      Vackar Community Member

                      flex4 wrote:

                       

                      Hi vackar

                       

                                        txt talk... noooooo I feel all old now.

                       

                       

                                           what does it mean......   am i wrong anything ...i am little bit poor in english.. if anything wrong let me know

                       

                       

                       


                      No it's not that you did something wrong. Some times when people post messages they write like they are sending a text message. And when I read your post I had to re-read it a couple of times to understand it  (I thought you were using txt talk) - Made me feel like I was getting old.

                       

                       

                      Sorry for the misunderstaning.

                      Vackar

                      • 9. Re: Flex 4 -> Datagrid add checkbox to a column
                        paolo.anghileri Community Member

                        For the column to not display [object Object] try setting editorDataField in the dataGridColumn and in the same tag set rendererIsEditor = "true"

                        • 10. Re: Flex 4 -> Datagrid add checkbox to a column
                          Amy Blankenship MVP

                          Check out this post http://www.benclinkinbeard.com/2007/11/efficient-reusable-and-centered-checkbox-renderers- for-datagrids/ .  It contains full code for exactly what you want to do.

                           

                          HTH;

                           

                          Amy

                          • 11. Re: Flex 4 -> Datagrid add checkbox to a column
                            MauricioGraciaG

                              <mx:DataGridColumn headerText="Date" dataField="date" width="100" editable="true"
                             
                            editorDataField="selected" rendererIsEditor="true">
                                
                            <mx:itemRenderer>
                                   
                            <mx:Component>
                                      
                            <mx:CheckBox selected="false">
                                       </mx:CheckBox>
                                                   
                            </mx:Component>
                                
                            </mx:itemRenderer>
                             
                            </mx:DataGridColumn>

                             

                            Taken from http://stackoverflow.com/questions/1120841/flex-checkbox-in-datagrid