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

    Flex 4 -> Datagrid add checkbox to a column

    djh88ukwb Newcomer

      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 !

        • 1. Re: Flex 4 -> Datagrid add checkbox to a column
          betheflexcoder Helper
          1 person found this helpful
          • 2. Re: Flex 4 -> Datagrid add checkbox to a column
            flex4 Helper

            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>

            1 person found this helpful
            • 3. Re: Flex 4 -> Datagrid add checkbox to a column
              djh88ukwb Newcomer

              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 Helper

                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 Helper

                  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

                    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 Helper

                      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 Helper

                        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

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

                          • 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