3 Replies Latest reply on Jun 9, 2010 8:43 AM by asifdegr8

    Header Renderer for data grid

    asifdegr8 Level 1

      I have populated datagrid based on XMLList as data provider. I have to make checkbox as header rendered in datagrid, when i click it should check all checkboxes in datagrid. I am also attaching the code for reference...

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
          <mx:Script>
              <![CDATA[
                  import mx.collections.ArrayCollection;

       

              ]]>
          </mx:Script>
          <mx:XMLList xmlns="" id="listdp">   
                  <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>
          </mx:XMLList>

       

          <mx:DataGrid x="35" y="10" id="mydg" dataProvider="{listdp}">
              <mx:columns>
                  <mx:DataGridColumn editable="true">
                      <mx:itemRenderer>
                          <mx:Component>
                              <mx:CheckBox selected="{data.recselected.text()=='true'?true:false}" click="{data.recselected = (data.recselected != 'true') ? 'true' : 'false';}"  />   
                          </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>

        • 1. Re: Header Renderer for data grid
          BhaskerChari Level 4

          Hi,

           

          you need to do something like below:

           

          I think its better to use arraycollection instead of XmlList as dataprovider for your Grid. This way it could be easy for you to accomplish your task.

           

          <?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.collections.ArrayCollection;
                     
                      private function init():void
                      {
                      
                      }
                     
                  ]]>
              </mx:Script>
              <mx:XMLList xmlns="" id="listdp">
                      <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>
              </mx:XMLList>


              <mx:DataGrid x="35" y="10" id="mydg" dataProvider="{listdp}">
                  <mx:columns>        
                      <mx:DataGridColumn editable="true" sortable="false">
                       <mx:headerRenderer>
                        <mx:Component>
                                  <mx:CheckBox click="checkUnCheckCheckBoxes()">
                                   <mx:Script>
                        <![CDATA[
                   private function checkUnCheckCheckBoxes():void
                   {
                    // Getting a reference to the outer XmlList listdp
                    var xmlList:XMLList = outerDocument.listdp;
                    var bool:Boolean = this.selected;
                    // If bool is true you need to check all check boxes else you need to uncheck all check boxes 
                    // Here you need to write the logic to traverse through the XMLList
                    // listdp and chnage the recselected values for all to either true or false based on the hearder checkbox status
                   }
                        ]]>
                    </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: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

           

          1 person found this helpful
          • 2. Re: Header Renderer for data grid
            BhaskerChari Level 4

            Hi Asif,

             

            This is the working code for your application:

             

            I have converted the XMLList to XML and converted the XML to an ArrayCollection on creationComplete to accomplish this..

             

            <?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: Header Renderer for data grid
              asifdegr8 Level 1

              Thanks Bhasker Chari ... my problem is solved ... you r da blessings in disguise