12 Replies Latest reply on Aug 28, 2009 12:40 PM by karnatis

    Strange behavior in datagrid with combobox selection(SIMPLE ONE...)

    karnatis Level 1

      Hi All,

       

         I’m having 2 datagrids, one is on top and another one is bottom. I have check boxes for selecting data grid rows. I’m having 2 different arrays one is source another is destination. I’m selecting checkboxes in top datagrid and moving selected datagrid rows to bottom datagrid. I defined datagrids as below

       

      <mx:DataGrid id="mySourceDataGrid" dataProvider="{mySourceDataProvider}" x="54" y="65" width="365">

                   <mx:columns>

                           <mx:DataGridColumn>

                                   <mx:itemRenderer>

                                           <mx:Component>

                                                   <mx:VBox paddingLeft="5">

                                                           <mx:CheckBox id="source"

                                                                                          selected="{data.isRowSelected}"

                                                                                          click="outerDocument.updateSelectedRowFlag(event);"/>

                                                   </mx:VBox>

                                           </mx:Component>

                                   </mx:itemRenderer>

                           </mx:DataGridColumn>

                           <mx:DataGridColumn dataField="name"/>

                           <mx:DataGridColumn dataField="age"/>

                           <mx:DataGridColumn dataField="comment"/>

                   </mx:columns>

           </mx:DataGrid>

          

       

       

            <mx:Button id="btnMoveSelectedRows" x="421" y="126" height="28" width="170"

                       label="Move Selected Rows &gt;&gt;" click="moveSelectedRows()"/>

       

       

           <mx:DataGrid id="myDestinationDataGrid" x="579" y="65" width="365" dataProvider="{myDestinationDataProvider}">

                   <mx:columns>

                               <mx:DataGridColumn>

                                   <mx:itemRenderer>

                                           <mx:Component>

                                                   <mx:VBox paddingLeft="5">

                                                           <mx:CheckBox                                                                                    id="dest" selected="{data.isRowSelected}" enabled="true" click="outerDocument.updateDestFlag(event);"/>

                                                   </mx:VBox>

                                           </mx:Component>

                                   </mx:itemRenderer>

                           </mx:DataGridColumn>

                           <mx:DataGridColumn dataField="name"/>

                           <mx:DataGridColumn dataField="age"/>

                           <mx:DataGridColumn dataField="comment"/>

                   </mx:columns>

           </mx:DataGrid>

       

         The problem I’m facing is that say I selected first 3 rows in top datagrid and moved(move button selected) the selected rows to bottom datagrid. In bottom datagrid I unselected 2 row checkbox, it is unselected correctly in bottom datagrid. In top datagrid still it shows 3 checkboxes are selected, and I press move button it copies only 1 and 3 rows. It is not coping 2 row.

       

         The changes which I did for bottom datagrid is effecting top datagrid, I’m really didn’t understand why this is happening, in code I’m using destination array for bottom datagrid it is different from source array.

       

         Here I’m giving code for selecting/unselecting checkbox scripts..

       

                  public function updateSelectedRowFlag(event:MouseEvent):void

                   {

                        Alert.show("Inside updateSelectedRowFlag:", event.currentTarget.id);

                       var currSource:CheckBox = CheckBox(event.currentTarget);

                       var selIndex:int;

                       if(currSource.selected)

                       {

                               selIndex = mySourceDataGrid.selectedIndex;

                               mySourceDataProvider[selIndex].isRowSelected = true;

                       }

                       else

                       {

                               selIndex = mySourceDataGrid.selectedIndex;

                               mySourceDataProvider[selIndex].isRowSelected = false;

                       }

                   }//end of updateSelectedRowFlag

                  

                  

                  

                   public function updateDestFlag(event:MouseEvent):void

                   {

                        Alert.show("Inside updateDestFlag:", event.currentTarget.id);

                       var currSource1:CheckBox = CheckBox(event.currentTarget);

                       var selIndex:int;

                       if(currSource1.selected)

                       {

                               selIndex = myDestinationDataGrid.selectedIndex;

                               myDestinationDataProvider[selIndex].isRowSelected = true;

                       }

                       else

                       {

                               selIndex = myDestinationDataGrid.selectedIndex;

                               myDestinationDataProvider[selIndex].isRowSelected = false;

                       }

                   }//end of updateDestFlag

       

         Can please give me your input.

       

      Thanks,

      Sharath.

       

       

        • 1. Re: Strange behavior in datagrid with combobox selection(SIMPLE ONE...)
          babo_ya Level 3

          I'm missing the data source.

          Can you copy/paste the source?

          Babo,

          • 2. Re: Strange behavior in datagrid with combobox selection(SIMPLE ONE...)
            karnatis Level 1

            Please find code here...

             

            Thanks in advance.

             

            Regards,

            Sharath.

            • 3. Re: Strange behavior in datagrid with combobox selection(SIMPLE ONE...)
              karnatis Level 1

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

              <mx:Script>
                       <![CDATA[

                           import mx.controls.Alert;
                          
                           [Bindable]
                           public var mySourceDataProvider:Array = new Array({isRowSelected: false, name:'Name1', age:10, comment:'Comment1'},
                                       {isRowSelected: false, name:'Name2', age:20, comment:'Comment2'},
                                       {isRowSelected: false, name:'Name3', age:30, comment:'Comment3'},
                                       {isRowSelected: false, name:'Name4', age:40, comment:'Comment4'});
                            
                           [Bindable]          
                           public var myDestinationDataProvider:Array = [];
                          
                           private function handleCheckBoxSelection():void
                           {
                                   if(chkBoxSelectAll.selected)
                                   {
                                           chkBoxSelectAll.label = "Uncheck to De-select All";
                                           selectOrDeselect(true);
                                   }
                                   else
                                   {
                                           chkBoxSelectAll.label = "Check to Select All";
                                           selectOrDeselect(false);
                                   }
                           }

                           private function selectOrDeselect(flgSelect:Boolean):void
                           {
                                   var selIndicesArr:Array = [];
                                   var dataProvLen:int = mySourceDataProvider.length;
                                   for(var i:int = 0; i < dataProvLen; i++)
                                   {
                                           selIndicesArr.push(i);
                                           mySourceDataProvider[i].isRowSelected = flgSelect;
                                   }

                                   if(flgSelect)
                                   {
                                           mySourceDataGrid.selectedIndices = selIndicesArr;
                                   }
                                   else
                                   {
                                           mySourceDataGrid.selectedIndices = [];
                                   }
                           }


                           public function updateSelectedRowFlag(event:MouseEvent):void
                           {
                                Alert.show("Inside updateSelectedRowFlag:", event.currentTarget.id);
                               var currSource:CheckBox = CheckBox(event.currentTarget);
                               var selIndex:int;
                               if(currSource.selected)
                               {
                                       selIndex = mySourceDataGrid.selectedIndex;
                                       mySourceDataProvider[selIndex].isRowSelected = true;
                               }
                               else
                               {
                                       selIndex = mySourceDataGrid.selectedIndex;
                                       mySourceDataProvider[selIndex].isRowSelected = false;
                               }
                           }//end of updateSelectedRowFlag
                          
                          
                          
                           public function updateDestFlag(event:MouseEvent):void
                           {
                                Alert.show("Inside updateDestFlag:", event.currentTarget.id);
                               var currSource1:CheckBox = CheckBox(event.currentTarget);
                               var selIndex:int;
                               if(currSource1.selected)
                               {
                                       selIndex = myDestinationDataGrid.selectedIndex;
                                       myDestinationDataProvider[selIndex].isRowSelected = true;
                               }
                               else
                               {
                                       selIndex = myDestinationDataGrid.selectedIndex;
                                       myDestinationDataProvider[selIndex].isRowSelected = false;
                               }
                           }//end of updateDestFlag


                           private function moveSelectedRows():void
                           {
                                   var selIndicesArr:Array = [];
                                   var dataProvLen:int = mySourceDataProvider.length;
                                   Alert.show("moveSelectedRows dataProvLen:",String(dataProvLen));
                                   for(var i:int = 0; i < dataProvLen; i++)
                                   {
                                            Alert.show("moveSelectedRows row selected:",mySourceDataProvider[i].isRowSelected);
                                            Alert.show("moveSelectedRows i:",String(i));
                                           if(mySourceDataProvider[i].isRowSelected)
                                           {
                                                   selIndicesArr.push(i);
                                           }
                                   }

                                   mySourceDataGrid.selectedIndices = selIndicesArr;


                                   myDestinationDataProvider =[];
                                   var noOfRowsSelected:int =  mySourceDataGrid.selectedIndices.length;
                                   for(var j:int = 0; j < noOfRowsSelected; j++)
                                   {
                                           var selIndex:int = mySourceDataGrid.selectedIndices[j];
                                           myDestinationDataProvider.push(mySourceDataProvider[selIndex]);
                                   }
                                  
                                   /*var noOfRowsInserted:int = myDestinationDataProvider.length;
                                   for(var k:int = 0; k < noOfRowsInserted; k++)
                                   {
                                            myDestinationDataProvider[k].isRowSelected = false;                            
                                   }*/
                                                        
                                   myDestinationDataGrid.dataProvider = myDestinationDataProvider;
                           } //end of moveSelectedRows
                          
                           private function deleteRows():void
                           {
                                    var deleteArr:Array = [];                    
                                   var dataProvLen:int = myDestinationDataProvider.length;
                                   Alert.show("deleteRows dataProvLen:",String(dataProvLen));
                                   //myDestinationDataProvider.splice(1,1);
                                   for(var i:int = 0; i < dataProvLen; i++)
                                   {
                                            Alert.show("deleteRows rowselected:",myDestinationDataProvider[i].isRowSelected);
                                            Alert.show("deleteRows rowselected index:",String(i));
                                           if(myDestinationDataProvider[i].isRowSelected)
                                           {
                                                    deleteArr.push(i);                                     
                                                   //myDestinationDataProvider.splice(i,1);                                    
                                           }
                                   }
                                  
                                   trace(deleteArr);
                                   for(var j:int = deleteArr.length; j > 0; j-- )
                                   {
                                        Alert.show("deleteRows:"+ String(deleteArr[j-1]));
                                        myDestinationDataProvider.splice(deleteArr[j-1],1);
                                   }
                                   myDestinationDataGrid.dataProvider = myDestinationDataProvider;
                                  
                           }//end of deleteRows
                                      
                                      


                       ]]>
              </mx:Script>
                   <mx:VBox>  
                   <mx:CheckBox id="chkBoxSelectAll" x="54" y="39"
                                 label="Check to Select All" color="#800000"
                                 change="handleCheckBoxSelection();"/>


                   <mx:DataGrid id="mySourceDataGrid" dataProvider="{mySourceDataProvider}" x="54" y="65" width="365">
                           <mx:columns>
                                   <mx:DataGridColumn>
                                           <mx:itemRenderer>
                                                   <mx:Component>
                                                           <mx:VBox paddingLeft="5">
                                                                   <mx:CheckBox id="source"
                                                                       selected="{data.isRowSelected}"
                                                                       click="outerDocument.updateSelectedRowFlag(event);"/>
                                                           </mx:VBox>
                                                   </mx:Component>
                                           </mx:itemRenderer>
                                   </mx:DataGridColumn>
                                   <mx:DataGridColumn dataField="name"/>
                                   <mx:DataGridColumn dataField="age"/>
                                   <mx:DataGridColumn dataField="comment"/>
                           </mx:columns>
                   </mx:DataGrid>
                  


                    <mx:Button id="btnMoveSelectedRows" x="421" y="126" height="28" width="170"
                               label="Move Selected Rows &gt;&gt;" click="moveSelectedRows()"/>


                   <mx:DataGrid id="myDestinationDataGrid" x="579" y="65" width="365" dataProvider="{myDestinationDataProvider}">
                           <mx:columns>
                                       <mx:DataGridColumn>
                                           <mx:itemRenderer>
                                                   <mx:Component>
                                                           <mx:VBox paddingLeft="5">
                                                                   <mx:CheckBox
                                                                       id="dest" selected="{data.isRowSelected}" enabled="true" click="outerDocument.updateDestFlag(event);"/>
                                                           </mx:VBox>
                                                   </mx:Component>
                                           </mx:itemRenderer>
                                   </mx:DataGridColumn>
                                   <mx:DataGridColumn dataField="name"/>
                                   <mx:DataGridColumn dataField="age"/>
                                   <mx:DataGridColumn dataField="comment"/>
                           </mx:columns>
                   </mx:DataGrid>
                  
                   <mx:Button id="btnDeleteRows" x="421" y="126" height="28" width="170"
                               label="Delete Rows" click="deleteRows()"/>

                   </mx:VBox>


              </mx:Application>

              • 4. Re: Strange behavior in datagrid with combobox selection(SIMPLE ONE...)
                babo_ya Level 3

                First of all, you know there is a trace statement instead of Alert.

                 

                BaBo,

                • 5. Re: Strange behavior in datagrid with combobox selection(SIMPLE ONE...)
                  babo_ya Level 3

                  for(var j:int = 0; j < noOfRowsSelected; j++)

                                       {

                                               var selIndex:int = mySourceDataGrid.selectedIndices[j];

                   

                   

                                               var obj:Object = new Object();

                                               obj.isRowSelected = mySourceDataProvider[selIndex].isRowSelected;

                                               obj.name = mySourceDataProvider[selIndex].name;

                                               obj.comment = mySourceDataProvider[selIndex].commant;

                                               obj.age = mySourceDataProvider[selIndex].age;

                   

                   

                   

                                               myDestinationDataProvider.push(obj);

                                       }

                   

                   

                  Here try this.. It worked for me..

                   

                  You need to create an instance and add it to the array instead of referencing the object.

                   

                  BaBo,

                  • 6. Re: Strange behavior in datagrid with combobox selection(SIMPLE ONE...)
                    karnatis Level 1

                    BaBo,

                     

                       I already used trace thing but I don't know where this will print....I checked in my firebug console but it is not showing this values???

                    you can see trace thing in my code....

                     

                       I'm thiking that this strange thing is happening because of data.isRowSelected, I'm using this mapping for both source and destination data grids.

                     

                       <mx:CheckBox id="dest" selected="{data.isRowSelected}" enabled="true" click="outerDocument.updateDestFlag(event);"/>

                     


                       I'm in a impression that when we refer data it will point to current dataprovider for this datagrid.

                     

                       Can you please check this and give me your advice...

                     

                    Thanks,

                    Sharath.

                    • 7. Re: Strange behavior in datagrid with combobox selection(SIMPLE ONE...)
                      babo_ya Level 3

                      Window > other view > console.

                       

                      Try my code above..

                       

                      BaBo,

                      • 8. Re: Strange behavior in datagrid with combobox selection(SIMPLE ONE...)
                        karnatis Level 1

                        Thanks Babo,

                         

                        It is working fine but only question is why this is not working with my code where I'm referring directly source array?

                         

                        One more question, if you see my code I'm adding a checkbox above to top datagrid for selecting all check boxes in top datagrid. Is it possible to add this checkbox in datagrid header column rather than adding separately with same functionality?

                         

                        Thanks in advance.

                         

                        --Sharath.

                        • 9. Re: Strange behavior in datagrid with combobox selection(SIMPLE ONE...)
                          babo_ya Level 3

                          Please set my post as correct answer if this helped.

                          I will get back to u on adding the checkbox.

                          BaBo,

                          • 10. Re: Strange behavior in datagrid with combobox selection(SIMPLE ONE...)
                            babo_ya Level 3

                            Try this.;::

                             

                            <mx:DataGrid id="mySourceDataGrid" dataProvider="{mySourceDataProvider}" x="54" y="65" width="365">

                                         <mx:columns>

                                                 <mx:DataGridColumn>

                                                 <mx:headerRenderer>

                                                 <mx:Component>

                                                 <mx:CheckBox />

                                                 </mx:Component>

                                                 </mx:headerRenderer>

                                                         <mx:itemRenderer>

                                                                 <mx:Component>

                                                                         <mx:VBox paddingLeft="5">

                                                                                 <mx:CheckBox id="source"

                                                                                     selected="{data.isRowSelected}"

                                                                                     click="outerDocument.updateSelectedRowFlag(event);"/>

                                                                         </mx:VBox>

                                                                 </mx:Component>

                                                         </mx:itemRenderer>

                                                 </mx:DataGridColumn>

                                                 <mx:DataGridColumn dataField="name"/>

                                                 <mx:DataGridColumn dataField="age"/>

                                                 <mx:DataGridColumn dataField="comment"/>

                                         </mx:columns>

                                 </mx:DataGrid>

                             

                             

                            BaBo,

                            • 11. Re: Strange behavior in datagrid with combobox selection(SIMPLE ONE...)
                              karnatis Level 1

                              I didn't find window thing for setting console in browser, can you please explain how to set this to check trace thing in IE & Firefox also...

                               

                              Thanks for your help.

                               

                              Regards,

                              Sharath.

                              • 12. Re: Strange behavior in datagrid with combobox selection(SIMPLE ONE...)
                                karnatis Level 1

                                Hi Babo,

                                 

                                   I added your code for displaying checkbox in header column...

                                 

                                   <mx:headerRenderer>
                                                                 <mx:Component>
                                                                     <mx:CheckBox click="outerDocument.headerCheckBoxSelection(event);"/>
                                                                 </mx:Component>
                                   </mx:headerRenderer>

                                 

                                 

                                When selecting header checkbox it is seleting below checkboxes(in datagrid rows), but I'm having 2 problems.

                                 

                                1. When I select header checkbox it is not showing selected thing(checkbox selected).
                                2. It is adding default sort request on this column, which I'd like to remove.

                                 

                                I'm new to flex and I don't have any information to solve these problems, can you please give me your input.

                                 

                                Thanks alot for helping me on this.

                                 

                                Regards,

                                Sharath.