3 Replies Latest reply on Sep 6, 2012 9:55 PM by zgs08shou

    Providing Checkbox to the row of a DataGrid Result

    kiran7881 Level 1

      I am displaying some data from DataBase on to a DataGrid , the DataGrid is getting Populated with the Data as per the search .

      Now please let me know how can i Provide checkbox before every row of a DataGrid ??

      Do i need to use ItemRenderer for this ??

       

      Thanks for reading .

        • 1. Re: Providing Checkbox to the row of a DataGrid Result
          Sebastien V. Level 3

          Hi

           

          Yes, you will need to use an item renderer. Search this forum (or google) for "checkbox itemrenderer" and you should find examples real quick.

          • 2. Re: Providing Checkbox to the row of a DataGrid Result
            BhaskerChari Level 4

            Hi Kiran,

             

            Check the example below:

             

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();">
                <mx:Script>
                    <![CDATA[
                     import mx.rpc.xml.SimpleXMLDecoder;
                        import mx.collections.ArrayCollection;
                        [Bindable]
                        public var gridDP:ArrayCollection = new ArrayCollection();
                        [Bindable]public var headerSelected:Boolean = false;
                       
                        private function init():void
                        {
                         var xml:XML = listdp;
                var xmlDoc:XMLDocument = new XMLDocument(xml);
                var decoder:SimpleXMLDecoder = new SimpleXMLDecoder(true);
                var obj:Object = decoder.decodeXML(xmlDoc);
                gridDP = obj.employees.employee as ArrayCollection;
                        }
                       
                    ]]>
                </mx:Script>
                <mx:XML id="listdp" format="e4x">
                  <employees>
                         <employee>
                             <firstName>Justin</firstName>
                             <lastName>Henin</lastName>   
                             <recselected>true</recselected>           
                         </employee>
                         <employee>
                             <firstName>Martina</firstName>
                             <lastName>Hingis</lastName>       
                             <recselected>false</recselected>       
                         </employee>           
                         <employee>
                             <firstName>Serena</firstName>
                             <lastName>Williams</lastName>
                             <recselected>true</recselected>               
                         </employee>       
                         <employee>
                             <firstName>David</firstName>
                             <lastName>Becham</lastName>
                             <recselected>true</recselected>               
                         </employee>
                         <employee>
                             <firstName>Rafael</firstName>
                             <lastName>Nadal</lastName>
                             <recselected>true</recselected>               
                         </employee>
                         <employee>
                             <firstName>Roger</firstName>
                             <lastName>Federer</lastName>
                             <recselected>true</recselected>               
                         </employee>
                         <employee>
                             <firstName>Kevin</firstName>
                             <lastName>Peterson</lastName>
                             <recselected>true</recselected>               
                         </employee>
                         <employee>
                             <firstName>Jack</firstName>
                             <lastName>Russel</lastName>
                             <recselected>true</recselected>               
                         </employee>
                        </employees>
                </mx:XML>
             
                <mx:DataGrid x="35" y="10" id="mydg" dataProvider="{gridDP}">
                    <mx:columns>        
                        <mx:DataGridColumn editable="true" sortable="false">
                         <mx:headerRenderer>
                          <mx:Component>
                                    <mx:CheckBox selected="{outerDocument.headerSelected}" click="checkUnCheckCheckBoxes()">
                                     <mx:Script>
                          <![CDATA[
                           import mx.collections.ArrayCollection;
                                         
                     private function checkUnCheckCheckBoxes():void
                     {
                      outerDocument.headerSelected = !outerDocument.headerSelected;
                      var gridDP:ArrayCollection = outerDocument.gridDP;
                      var bool:Boolean = this.selected;
                     
                      for(var i:int=0;i<gridDP.length;i++)
                      {
                       gridDP.getItemAt(i).recselected = bool;
                      }
                      gridDP.refresh();         
                     }
                          ]]>
                      </mx:Script>
                                    </mx:CheckBox>
                                </mx:Component>
                         </mx:headerRenderer>
                            <mx:itemRenderer>                
                                <mx:Component>
                                    <!--<mx:CheckBox selected="{data.recselected.text()=='true'?true:false}" click="{data.recselected = (data.recselected != 'true') ? 'true' : 'false';}"/>-->
                                    <mx:CheckBox selected="{data.recselected}" click="{data.recselected = !data.recselected}"/>
                                </mx:Component>
                            </mx:itemRenderer>
                        </mx:DataGridColumn>
                        <mx:DataGridColumn headerText="Column 1" dataField="firstName"/>
                        <mx:DataGridColumn headerText="Column 2" dataField="lastName"/>           
                    </mx:columns>
                </mx:DataGrid>


            </mx:Application>

             

            If this post answers your question or helps, please kindly mark it as such.


            Thanks,

            Bhasker Chari

            • 3. Re: Providing Checkbox to the row of a DataGrid Result
              zgs08shou

              Hi BhaskerChari,

                   Now I choosed some rows,but if I want to delete them,how to do it ? Thanks ..