5 Replies Latest reply on Jul 18, 2011 10:41 AM by ShardulSingh

    CheckBox in the DataGrid

    Shweta Gothe
      Header 1Header 2Header 3
      Student ACheckBox1CheckBox2

       

       

      Hi,

       

      Can someone help me to come up the the datagrid displayed as above.

       

      At a time user should be able to click wither checkbox 1 or checkbox 2. They are muually exclusive. (checkbox 1 and 2 are actually component chekboxes)

       

      If Checkbox1 is selected and user clicks CheckBox 2  , Checkbox 1 should be deselected.

       

      Once user clicks a checkbox  I should know which column and row he is clicking,

       

      Can you pls hellp me with it.

       

       

      Thanks and Regards,

      Shweta

        • 1. Re: CheckBox in the DataGrid
          UbuntuPenguin Level 4
          ...

          Can you pls hellp me with it.

          ...

           

           

          Don't shweta it.  You datagrid is tasked with representing

          data that is present on your value objects.  So when a checkbox is clicked, it should change a value on your value object either directly or through the use of a function.  In the following examples I used functions whereas I would really prefer to use getters and setters but I think the functions are more concise and easily understood.

           

          [Bindable] public var a:Boolean;

          [Bindable] public var b:Boolean;

           

          public function selectA( value:Boolean ):void

          {

             a = value;

             if( a == b )

             {

                b = (  b == true ? false : true );

             }

          }

           

          public function selectB( value:Boolean ):void

          {

             b = value;

             if( a == b )

             {

                a = (  a == true ? false : true );

             }

          }

          • 2. Re: CheckBox in the DataGrid
            Shweta Gothe Level 1

            Do you have any example ? I am struggling to get it in place.

             

            In this case for two checkboxes do we have to use one item renderer or two itemrenders?

             

            Thanks,

            Shweta

            • 3. Re: CheckBox in the DataGrid
              ShardulSingh Level 3

              Hi shweta,

               

              Below is the solution with code for your issue.If you have any issue let me know:-

               

              MainApplication:-

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                              layout="absolute" minWidth="955" minHeight="600">
                  <mx:Script>
                      <![CDATA[
                          import mx.collections.ArrayCollection;
                          import mx.events.FlexEvent;
                         
                         
                          private var ac : ArrayCollection = new ArrayCollection([
                              {name : 'name1',age : false,height :false},
                              {name : 'name1',age : false,height :false},
                              {name : 'name1',age : false,height :false},
                          ])

               

                          protected function dg_creationCompleteHandler(event:FlexEvent):void
                          {
                              dg.dataProvider = ac;
                          }

               

                      ]]>
                  </mx:Script>
                  <mx:AdvancedDataGrid id="dg" width="150" height="150" creationComplete="dg_creationCompleteHandler(event)">
                      <mx:columns>
                          <mx:AdvancedDataGridColumn dataField="name"/>
                          <mx:AdvancedDataGridColumn dataField="age" itemRenderer="AgeItemRenderer"/>
                          <mx:AdvancedDataGridColumn dataField="height" itemRenderer="HeightItemRenderer"/>
                      </mx:columns>   
                  </mx:AdvancedDataGrid>
              </mx:Application>

               

              AgeItemRenderer:-

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" width="40" height="30"
                      horizontalAlign="center" verticalAlign="middle">
                  <mx:Script>
                      <![CDATA[
                          import mx.utils.ObjectUtil;
                          override public function set data(value:Object):void {
                              super.data = value;
                          }
                         
                          protected function chk_changeHandler(event:Event):void
                          {
                              data.age = true;
                              data.height = false;
                              this.parentDocument.dg.invalidateList();
                          }

               

                      ]]>
                  </mx:Script>
                  <mx:CheckBox id="chk" change="chk_changeHandler(event)" selected="{data.age}"/>
                  </mx:Box>  

               

               

              HeightItemRenderer:-

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" width="40" height="30"
                      horizontalAlign="center" verticalAlign="middle">
                  <mx:Script>
                      <![CDATA[
                          override public function set data(value:Object):void {
                              super.data = value;
                          }
                          protected function chk_changeHandler(event:Event):void
                          {
                              data.age = false;
                              data.height = true;
                              this.parentDocument.dg.invalidateList();
                          }

               

                      ]]>
                  </mx:Script>
                  <mx:CheckBox id="chk" change="chk_changeHandler(event)" selected="{data.height}"/>
              </mx:Box>

               

               

               

              with Regards,

              Shardul

              1 person found this helpful
              • 4. Re: CheckBox in the DataGrid
                Shweta Gothe Level 1

                Hey Shardul . This helps.

                 

                The user should be able to deselect the selected  checkbox also.

                 

                Can you pls let me know how to do it in the code that you have given?

                 

                Thanks,

                Shweta

                • 5. Re: CheckBox in the DataGrid
                  ShardulSingh Level 3

                  Hi,

                  Pls made the chagnes as below to your both itemRenderers mentioned earlier:-

                   

                  AgeItemRenderer:-

                   

                  <?xml version="1.0" encoding="utf-8"?>

                  <mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" width="40" height="30"

                  horizontalAlign="center" verticalAlign="middle">

                  <mx:Script>

                  <![CDATA[

                  import mx.utils.ObjectUtil;

                  override public function set data(value:Object):void {

                  super.data = value;

                  }

                   

                  private var isSelected : Boolean = false;

                  protected function chk_changeHandler(event:Event):void

                  {

                  if(isSelected == false)

                  {

                  data.age = true;

                  data.height = false;

                  isSelected = true;

                  this.parentDocument.dg.invalidateList();

                  }

                  else

                  {

                  data.age = false;

                  data.height = false;

                  isSelected = false;

                  this.parentDocument.dg.invalidateList();

                  }

                  }


                  ]]>

                  </mx:Script>

                  <mx:CheckBox id="chk" change="chk_changeHandler(event)" selected="{data.age}"/>

                  </mx:Box>

                   

                   

                  HeightItemRenderer:-

                   

                  <?xml version="1.0" encoding="utf-8"?>

                  <mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" width="40" height="30"

                  horizontalAlign="center" verticalAlign="middle">

                  <mx:Script>

                  <![CDATA[

                  override public function set data(value:Object):void {

                  super.data = value;

                  }

                   

                  private var isSelected : Boolean = false;

                  protected function chk_changeHandler(event:Event):void

                  {

                  if(isSelected == false)

                  {

                  data.age = false;

                  data.height = true;

                  isSelected = true;

                  this.parentDocument.dg.invalidateList();

                  return;

                  }

                  else

                  {

                  data.age = false;

                  data.height = false;

                  isSelected = false;

                  this.parentDocument.dg.invalidateList();

                  }

                   

                  }

                   

                  ]]>

                  </mx:Script>

                  <mx:CheckBox id="chk" change="chk_changeHandler(event)" selected="{data.height}"/>

                  </mx:Box>

                  with Regards,
                  Shardul