3 Replies Latest reply on Aug 21, 2009 6:36 PM by babo_ya

    Datagrid Checkbox - Select All Headerrenderer

    DHTVP

      i have a datagrid that utilizes an itemrenderer and headerrender for the same column to have checkboxes and also a select all checkbox in the column header...as such:

      <mx:DataGrid width="100%" height="100%" id="dg" dataProvider="{employees}" sortableColumns="false"
                                  draggableColumns="false">
                                  <mx:columns>
                                      <mx:DataGridColumn width="30" textAlign="center">
                                          <mx:headerRenderer>
                                              <mx:Component>
                                                  <mx:CheckBox/>
                                              </mx:Component>
                                          </mx:headerRenderer>
                                          <mx:itemRenderer>
                                              <mx:Component>
                                                  <mx:CheckBox selected="{(data.@isSelected == 'true')?true:false}" click="{data.@isSelected = (data.@isSelected != 'true') ? 'true' : 'false';}"/>
                                              </mx:Component>
                                          </mx:itemRenderer>
                                      </mx:DataGridColumn>
                                      <mx:DataGridColumn headerText="Item ID" dataField="@id" width="60"/>
                                      <mx:DataGridColumn headerText="Date" dataField="@date" width="85"/>
                                  </mx:columns>
                              </mx:DataGrid>

       

      my XMLList is as follows (that populates the datagrid):

      <mx:XMLList id="employees">
              <request id="720" date="Aug 21 09" isSelected="false"/>
              <request id="721" date="Aug 21 09" isSelected="false"/>

              <request id="722" date="Aug 21 09" isSelected="false"/>

              <request id="723" date="Aug 21 09" isSelected="false"/>

      </mx:XMLList>

       

      Now, if I select a rows checkbox, it works fine and updates the XMLList with the new value of isSelected for that row.

      My question is this: how do I make it so that clicking on the checkbox inside the headerrenderer selects all the checkboxes in the itemrenderer?  I know that Flex doesn't build rows that are not in view yet, so what needs to happen here in order to a) select the itemrenderer checkboxes and b) update the related XMLList so all isSelected update to either true/false.

       

      Thanks!

        • 1. Re: Datagrid Checkbox - Select All Headerrenderer
          babo_ya Level 3

          I would create arrayCollection and parse the XML and also create custom itemRenderer.

           

          And when the header checkbox is clicked update the arrayCollection items.

           

           

          BaBo,

          http://twitter.com/babo_ya

          1 person found this helpful
          • 2. Re: Datagrid Checkbox - Select All Headerrenderer
            DHTVP Level 1

            Thanks for putting me on the right track for this...quick question:

             

            My arrayCollection looks like this:

            [Bindable]
            private var myAC:ArrayCollection = new ArrayCollection([
                {id:1, date: 'Bob Jones', isSelected: true},
                {id:2, date: 'Jane Smith', isSelected: true},   
                {id:3, date: 'Doug Johnson', isSelected: false},
                {id:4, date: 'Bob Jones', isSelected: true},
                {id:5, date: 'Jane Smith', isSelected: true},   
                {id:6, date: 'Doug Johnson', isSelected: false},
                {id:7, date: 'Bob Jones', isSelected: true},
                {id:8, date: 'Jane Smith', isSelected: true},   
                {id:9, date: 'Doug Johnson', isSelected: false},      
            ]);

             

            And the datagrid displays this correctly, so no problems there.

             

            Now, I have a function that gets called when the checkbox in the header is selected, but am stuck here as to how to update all of the isSelected values in myAC to true.

             

            This is what I tried with no success...any thoughts?

             

            public function checkAll():void {
                for(var i:int=0; i < myAC.length; i++){
                    myAC.itemUpdated(myAC.getItemAt(i).isSelected, false, true);
                }
            }

             

            Thanks!

            • 3. Re: Datagrid Checkbox - Select All Headerrenderer
              babo_ya Level 3

              You need a data type for example... "Employee" object.. such as below..

               

              class Employee

              {

                   public var date:String;

                   public var id:String;

                   public var isSelected:Boolean;

              }

               

              and parse the XML and create instance of this class per <request> tag...

               

              and make sure this class is [Bindable]

               

              and you also need to create an ItemRenderer.... and inside of the itemRenderer..

               

              <mx:CheckBox selected="{employee.isSelected}" />

               

               

              and on ur checkAll function...

               

              var i:int;

              var len:int = myAC.length;

              for(i = 0; i < len; i++)

              {

                   var e:Employee = myAC.getItemAt(i) as Employee;

                   e.isSelected = true; // or false....

              }