4 Replies Latest reply on Aug 28, 2009 11:17 PM by Venkat,Flex Developer

    Flex-2 ItemRenderer

    Venkat,Flex Developer

      In flex 2 i am using this code for itemrenderer if i select a checkbox in datagridand when i scroll the grid many nonselected checkbox are getting selected how can i solve this problem

       

      <mx:DataGridColumn headerText="Update" dataField="udata" >
                      <mx:itemRenderer>
                               <mx:Component>
                                   <mx:CheckBox selectedField="udata" change="data.udata = selected" />
                               </mx:Component>
                           </mx:itemRenderer>
                      </mx:DataGridColumn>

       

      Thanks in advance.

        • 1. Re: Flex-2 ItemRenderer
          Andrew Rosewarn

          Hi Ventak

           

          Yea I found this a pain but this should work for you, example below, hope it helps.

           

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

          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  xmlns:ns1="*">

          <mx:Script>

          <![CDATA[

          import mx.collections.ArrayCollection;

           

          [Bindable]

          private var ac:ArrayCollection = new ArrayCollection([

          {theName : 'Test 0', answer : true},

          {theName : 'Test 1', answer : false},

          {theName : 'Test 2', answer : false},

          {theName : 'Test 3', answer : true},

          {theName : 'Test 4', answer : false},

          {theName : 'test 5', answer : false},

          {theName : 'Test 6', answer : true},

          {theName : 'Test 7', answer : false},

          {theName : 'Test 8', answer : false},

          {theName : 'Test 9', answer : true},

          {theName : 'Test 10', answer : false}

          ]);

           

          ]]>

          </mx:Script>

           

          <mx:DataGrid x="251" y="178" dataProvider="{ac}">

          <mx:columns>

          <mx:DataGridColumn headerText="Column 1" dataField="theName"/>

          <mx:DataGridColumn headerText="Column 2" dataField="answer">

            <mx:itemRenderer>

                <mx:Component>

                   <mx:CheckBox click="{data.answer=!data.answer}"  selected="{data.answer}"/>

                </mx:Component>

             </mx:itemRenderer>

          </mx:DataGridColumn>

          </mx:columns>

          </mx:DataGrid>

          </mx:Application>

          • 2. Re: Flex-2 ItemRenderer
            christopher.mina

            To be more certain about it, you can also use the syntax:

            <mx:Component>

            <mx:Checkbox selected="{data.answer}" change="data.answer = this.selected"/>

            </mx:Component>

             

            Here I'm using the actual selection property of the checkbox to set the answer, so we're confident the user is always seeing the correct outcome.  They both work fine, though.

            • 3. Re: Flex-2 ItemRenderer
              ShardulSingh Level 3

              Hi,

              Pls find the soution of your problem.

              I am using two Datagrid on the selection of any checkbox, I am showing that in the another one.

              Pls let me know if you have any issue.

               

               

              MainApplication.mxml

               

                <?xml version="1.0"?>

              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

              <mx:Script>

                  <![CDATA[

                      import mx.events.ListEvent;

                      import mx.collections.ArrayCollection;

                         

                          [Bindable]

                          private var docDetailAC:ArrayCollection = new ArrayCollection([

                              {chkBoxValue:false,srNo:'1',docName:'Employee Details'},

                              {chkBoxValue:false,srNo:'2',docName:'Busines Policies'},

                              {chkBoxValue:false,srNo:'3',docName:'Tax Policies'}

                          ]);

                         

                          [Bindable]

                          private var acCopy : ArrayCollection = new ArrayCollection();

                         

                          private function onItemClick(event : ListEvent):void

                          {

                              if(event.itemRenderer is CheckBoxItemRenderer)

                              {

                                  var currentIndex : Number = event.rowIndex;

                                  if(acCopy.length > 0)

                                  {

                                      acCopy.removeAll();

                                      acCopy.refresh();

                                      for (var i:Number = 0;i < docDetailAC.length;i++)

                                      {

                                          if(i == currentIndex)

                                          {

                                              docDetailAC[i].chkBoxValue = true;

                                          }

                                          else

                                          {

                                              docDetailAC[i].chkBoxValue = false;

                                          }

                                          docDetailGrid.invalidateList();

                                      }

                                  }

                             

                                  var acItem : Object = docDetailAC.getItemAt(currentIndex);

                                  acCopy.addItem(acItem);

                                  }

                          }

                         

                  ]]>

              </mx:Script>

                  <mx:Panel height="100%" width="100%"

                      paddingTop="10" paddingLeft="10" paddingRight="10">

               

               

                      <mx:Label width="100%" color="black"

                          text="Select a row in the DataGrid control."/>

               

               

                     <mx:DataGrid width="300" height="150" id="docDetailGrid"

                              dataProvider="{docDetailAC}"

                              editable="true"

                              horizontalScrollPolicy="off"

                              itemClick="onItemClick(event)">

                              <mx:columns>                               

                                  <mx:DataGridColumn id="docDetailDG_1" headerText="No" width="40" editable="false"

                                      itemRenderer="CheckBoxItemRenderer" />

                                  <mx:DataGridColumn headerText="No" width="40" dataField="srNo" editable="false"/>

                                  <mx:DataGridColumn headerText="Doc Name" dataField="docName" />

                              </mx:columns>

                          </mx:DataGrid>

                 

                      <mx:Label width="100%" color="red"

                          text="Selected item in the DataGrid control."/>                           

                    <mx:DataGrid width="300" height="150"

                                                  dataProvider="{acCopy}"

                                                  horizontalScrollPolicy="off">

                                                  <mx:columns>                               

                                                      <mx:DataGridColumn  headerText="No" width="40" dataField="srNo" editable="false"/>

                                                      <mx:DataGridColumn  headerText="Document Name " dataField="docName" />

                                                  </mx:columns>

                                              </mx:DataGrid>                           

                                             

                  </mx:Panel>

              </mx:Application>

               

               

               

               

              CheckBoxItemRenderer.mxml

               

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

              <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"

                  horizontalScrollPolicy="off"

                  horizontalAlign="center" verticalAlign="middle">

                  <mx:Script>

                      <![CDATA[

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

                          {

                              super.data = value;

                          }

                         

                          private function onCheckBoxClick():void

                          {

                              this.data.chkBoxValue = true;

                          }

                      ]]>

                  </mx:Script>

                  <mx:Spacer width="1" />

                  <mx:CheckBox click="onCheckBoxClick()" selected="{data.chkBoxValue}"/>

                  <mx:Spacer width="1" />   

              </mx:HBox>

               

               

               

               

               

               

               

               

              with  Regards,

              Shardul Singh Bartwal

               

               

              • 4. Re: Flex-2 ItemRenderer
                Venkat,Flex Developer Level 1

                Hi,

                Thans for your replay really it works