1 Reply Latest reply on Jul 25, 2011 6:44 AM by Pooja Kuber

    Datagrid with multiple comboboxes not working when scroll up and down

    swapnildixit14

      Hello,

           I need a help in coding of the flex, I am  devleloping a list where multiple combobox in a datagrid. As i added  all those in a datagrid the vertical scroll bar appears for viewing all  the elements in the datagrid with the comboboxes in front of every  element. Now i am selecting the data from combobox,  as i  scroll down in the datagrid my data get disturbed and whichever is at first that data is to appearing. I need that my  selected data in combobox remain selected even i scroll down the datagrid up or  down.Is there any solution for it? or it is the bug in flex. My Code is  as follow

      <?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;
                  [Bindable]               
                  private var myDP:ArrayCollection = new ArrayCollection([
                      {Name:"Bikrant", City:"Delhi"},
                      {Name:"Brijesh", City:"Bombay"},
                      {Name:"Ravi", City:"Kanpur"},
                      {Name:"Avanish", City:"Chennai"},
                        {Name:"Bikrant", City:"Delhi"},
                      {Name:"Brijesh", City:"Bombay"},
                      {Name:"Ravi", City:"Kanpur"},
                      {Name:"Avanish", City:"Chennai"},
                        {Name:"Bikrant", City:"Delhi"},
                      {Name:"Brijesh", City:"Bombay"},
                      {Name:"Ravi", City:"Kanpur"},
                      {Name:"Avanish", City:"Chennai"},
                        {Name:"Bikrant", City:"Delhi"},
                      {Name:"Brijesh", City:"Bombay"},
                      {Name:"Ravi", City:"Kanpur"},
                      {Name:"Avanish", City:"Chennai"},
                        {Name:"Bikrant", City:"Delhi"},
                      {Name:"Brijesh", City:"Bombay"},
                      {Name:"Ravi", City:"Kanpur"},
                      {Name:"Avanish", City:"Chennai"},
                        {Name:"Bikrant", City:"Delhi"},
                      {Name:"Brijesh", City:"Bombay"},
                      {Name:"Ravi", City:"Kanpur"},
                      {Name:"Avanish", City:"Chennai"},
                        {Name:"Bikrant", City:"Delhi"},
                      {Name:"Brijesh", City:"Bombay"},
                      {Name:"Ravi", City:"Kanpur"},
                      {Name:"Avanish", City:"Chennai"},
                        {Name:"Bikrant", City:"Delhi"},
                      {Name:"Brijesh", City:"Bombay"},
                      {Name:"Ravi", City:"Kanpur"},
                      {Name:"Avanish", City:"Chennai"},
                        {Name:"Bikrant", City:"Delhi"},
                      {Name:"Brijesh", City:"Bombay"},
                      {Name:"Ravi", City:"Kanpur"},
                      {Name:"Avanish", City:"Chennai"},
                        {Name:"Bikrant", City:"Delhi"},
                      {Name:"Brijesh", City:"Bombay"},
                      {Name:"Ravi", City:"Kanpur"},
                      {Name:"Avanish", City:"Chennai"}
                  ]);              
              ]]>
          </mx:Script>
          <mx:ArrayCollection id="people">    
              <mx:Object>
                  <mx:name> Kunal</mx:name>
                  <mx:title>Sr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Kunal.JPG</mx:image>
                  <mx:description>Working as Sr. developer.    </mx:description>
                 
                 
              </mx:Object>   
              <mx:Object>
                  <mx:name> Prashant Bhole</mx:name>
                  <mx:title>Sr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Prashant.JPG</mx:image>
                  <mx:description>Working as Sr. developer.    </mx:description>
                 
              </mx:Object>
                 
              <mx:Object>
                  <mx:name> Vikash</mx:name>
                  <mx:title>Sr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Vikash.JPG</mx:image>
                  <mx:description>Working as Sr. developer.    </mx:description>
                 
              </mx:Object>
              <mx:Object>
                  <mx:name> Harshal</mx:name>
                  <mx:title>Sr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Harshal.JPG</mx:image>
                  <mx:description>Working as Sr. developer.    </mx:description>
                 
              </mx:Object>
              <mx:Object>
                  <mx:name> Bikram</mx:name>
                  <mx:title>Sr. QA Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Bikram.JPG</mx:image>
                  <mx:description>Working as developer.    </mx:description>
                 
              </mx:Object>
              <mx:Object>
                  <mx:name> Swapnil Dixit</mx:name>
                  <mx:title>Jr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Swapnil.JPG</mx:image>
                  <mx:description>Working as developer.    </mx:description>
                 
              </mx:Object>
              <mx:Object>
                  <mx:name> Sadhana</mx:name>
                  <mx:title>HR</mx:title>
                  <mx:image>D:\Indiv Pics\Sadhana.JPG</mx:image>
                  <mx:description>Working as HR.    </mx:description>
                 
              </mx:Object>
                  <mx:Object>
                  <mx:name> Kunal</mx:name>
                  <mx:title>Sr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Kunal.JPG</mx:image>
                  <mx:description>Working as Sr. developer.    </mx:description>
                 
                 
              </mx:Object>   
              <mx:Object>
                  <mx:name> Prashant Bhole</mx:name>
                  <mx:title>Sr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Prashant.JPG</mx:image>
                  <mx:description>Working as Sr. developer.    </mx:description>
                 
              </mx:Object>
                 
              <mx:Object>
                  <mx:name> Vikash</mx:name>
                  <mx:title>Sr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Vikash.JPG</mx:image>
                  <mx:description>Working as Sr. developer.    </mx:description>
                 
              </mx:Object>
              <mx:Object>
                  <mx:name> Harshal</mx:name>
                  <mx:title>Sr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Harshal.JPG</mx:image>
                  <mx:description>Working as Sr. developer.    </mx:description>
                 
              </mx:Object>
              <mx:Object>
                  <mx:name> Bikram</mx:name>
                  <mx:title>Sr. QA Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Bikram.JPG</mx:image>
                  <mx:description>Working as developer.    </mx:description>
                 
              </mx:Object>
              <mx:Object>
                  <mx:name> Swapnil Dixit</mx:name>
                  <mx:title>Jr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Swapnil.JPG</mx:image>
                  <mx:description>Working as developer.    </mx:description>
                 
              </mx:Object>
              <mx:Object>
                  <mx:name> Sadhana</mx:name>
                  <mx:title>HR</mx:title>
                  <mx:image>D:\Indiv Pics\Sadhana.JPG</mx:image>
                  <mx:description>Working as HR.    </mx:description>
                 
              </mx:Object>
                  <mx:Object>
                  <mx:name> Kunal</mx:name>
                  <mx:title>Sr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Kunal.JPG</mx:image>
                  <mx:description>Working as Sr. developer.    </mx:description>
                 
                 
              </mx:Object>   
              <mx:Object>
                  <mx:name> Prashant Bhole</mx:name>
                  <mx:title>Sr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Prashant.JPG</mx:image>
                  <mx:description>Working as Sr. developer.    </mx:description>
                 
              </mx:Object>
                 
              <mx:Object>
                  <mx:name> Vikash</mx:name>
                  <mx:title>Sr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Vikash.JPG</mx:image>
                  <mx:description>Working as Sr. developer.    </mx:description>
                 
              </mx:Object>
              <mx:Object>
                  <mx:name> Harshal</mx:name>
                  <mx:title>Sr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Harshal.JPG</mx:image>
                  <mx:description>Working as Sr. developer.    </mx:description>
                 
              </mx:Object>
              <mx:Object>
                  <mx:name> Bikram</mx:name>
                  <mx:title>Sr. QA Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Bikram.JPG</mx:image>
                  <mx:description>Working as developer.    </mx:description>
                 
              </mx:Object>
              <mx:Object>
                  <mx:name> Swapnil Dixit</mx:name>
                  <mx:title>Jr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Swapnil.JPG</mx:image>
                  <mx:description>Working as developer.    </mx:description>
                 
              </mx:Object>
              <mx:Object>
                  <mx:name> Sadhana</mx:name>
                  <mx:title>HR</mx:title>
                  <mx:image>D:\Indiv Pics\Sadhana.JPG</mx:image>
                  <mx:description>Working as HR.    </mx:description>
                 
              </mx:Object>
                  <mx:Object>
                  <mx:name> Kunal</mx:name>
                  <mx:title>Sr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Kunal.JPG</mx:image>
                  <mx:description>Working as Sr. developer.    </mx:description>
                 
                 
              </mx:Object>   
              <mx:Object>
                  <mx:name> Prashant Bhole</mx:name>
                  <mx:title>Sr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Prashant.JPG</mx:image>
                  <mx:description>Working as Sr. developer.    </mx:description>
                 
              </mx:Object>
                 
              <mx:Object>
                  <mx:name> Vikash</mx:name>
                  <mx:title>Sr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Vikash.JPG</mx:image>
                  <mx:description>Working as Sr. developer.    </mx:description>
                 
              </mx:Object>
              <mx:Object>
                  <mx:name> Harshal</mx:name>
                  <mx:title>Sr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Harshal.JPG</mx:image>
                  <mx:description>Working as Sr. developer.    </mx:description>
                 
              </mx:Object>
              <mx:Object>
                  <mx:name> Bikram</mx:name>
                  <mx:title>Sr. QA Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Bikram.JPG</mx:image>
                  <mx:description>Working as developer.    </mx:description>
                 
              </mx:Object>
              <mx:Object>
                  <mx:name> Swapnil Dixit</mx:name>
                  <mx:title>Jr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Swapnil.JPG</mx:image>
                  <mx:description>Working as developer.    </mx:description>
                 
              </mx:Object>
              <mx:Object>
                  <mx:name> Sadhana</mx:name>
                  <mx:title>HR</mx:title>
                  <mx:image>D:\Indiv Pics\Sadhana.JPG</mx:image>
                  <mx:description>Working as HR.    </mx:description>
                 
              </mx:Object>
              <mx:Object>
                  <mx:name> Kunal</mx:name>
                  <mx:title>Sr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Kunal.JPG</mx:image>
                  <mx:description>Working as Sr. developer.    </mx:description>
                 
                 
              </mx:Object>   
              <mx:Object>
                  <mx:name> Prashant Bhole</mx:name>
                  <mx:title>Sr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Prashant.JPG</mx:image>
                  <mx:description>Working as Sr. developer.    </mx:description>
                 
              </mx:Object>
                 
              <mx:Object>
                  <mx:name> Vikash</mx:name>
                  <mx:title>Sr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Vikash.JPG</mx:image>
                  <mx:description>Working as Sr. developer.    </mx:description>
                 
              </mx:Object>
              <mx:Object>
                  <mx:name> Harshal</mx:name>
                  <mx:title>Sr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Harshal.JPG</mx:image>
                  <mx:description>Working as Sr. developer.    </mx:description>
                 
              </mx:Object>
              <mx:Object>
                  <mx:name> Bikram</mx:name>
                  <mx:title>Sr. QA Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Bikram.JPG</mx:image>
                  <mx:description>Working as developer.    </mx:description>
                 
              </mx:Object>
              <mx:Object>
                  <mx:name> Swapnil Dixit</mx:name>
                  <mx:title>Jr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Swapnil.JPG</mx:image>
                  <mx:description>Working as developer.    </mx:description>
                 
              </mx:Object>
              <mx:Object>
                  <mx:name> Sadhana</mx:name>
                  <mx:title>HR</mx:title>
                  <mx:image>D:\Indiv Pics\Sadhana.JPG</mx:image>
                  <mx:description>Working as HR.    </mx:description>
                 
              </mx:Object>
                  <mx:Object>
                  <mx:name> Kunal</mx:name>
                  <mx:title>Sr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Kunal.JPG</mx:image>
                  <mx:description>Working as Sr. developer.    </mx:description>
                 
                 
              </mx:Object>   
              <mx:Object>
                  <mx:name> Prashant Bhole</mx:name>
                  <mx:title>Sr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Prashant.JPG</mx:image>
                  <mx:description>Working as Sr. developer.    </mx:description>
                 
              </mx:Object>
                 
              <mx:Object>
                  <mx:name> Vikash</mx:name>
                  <mx:title>Sr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Vikash.JPG</mx:image>
                  <mx:description>Working as Sr. developer.    </mx:description>
                 
              </mx:Object>
              <mx:Object>
                  <mx:name> Harshal</mx:name>
                  <mx:title>Sr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Harshal.JPG</mx:image>
                  <mx:description>Working as Sr. developer.    </mx:description>
                 
              </mx:Object>
              <mx:Object>
                  <mx:name> Bikram</mx:name>
                  <mx:title>Sr. QA Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Bikram.JPG</mx:image>
                  <mx:description>Working as developer.    </mx:description>
                 
              </mx:Object>
              <mx:Object>
                  <mx:name> Swapnil Dixit</mx:name>
                  <mx:title>Jr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Swapnil.JPG</mx:image>
                  <mx:description>Working as developer.    </mx:description>
                 
              </mx:Object>
              <mx:Object>
                  <mx:name> Sadhana</mx:name>
                  <mx:title>HR</mx:title>
                  <mx:image>D:\Indiv Pics\Sadhana.JPG</mx:image>
                  <mx:description>Working as HR.    </mx:description>
                 
              </mx:Object>
                  <mx:Object>
                  <mx:name> Kunal</mx:name>
                  <mx:title>Sr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Kunal.JPG</mx:image>
                  <mx:description>Working as Sr. developer.    </mx:description>
                 
                 
              </mx:Object>   
              <mx:Object>
                  <mx:name> Prashant Bhole</mx:name>
                  <mx:title>Sr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Prashant.JPG</mx:image>
                  <mx:description>Working as Sr. developer.    </mx:description>
                 
              </mx:Object>
                 
              <mx:Object>
                  <mx:name> Vikash</mx:name>
                  <mx:title>Sr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Vikash.JPG</mx:image>
                  <mx:description>Working as Sr. developer.    </mx:description>
                 
              </mx:Object>
              <mx:Object>
                  <mx:name> Harshal</mx:name>
                  <mx:title>Sr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Harshal.JPG</mx:image>
                  <mx:description>Working as Sr. developer.    </mx:description>
                 
              </mx:Object>
              <mx:Object>
                  <mx:name> Bikram</mx:name>
                  <mx:title>Sr. QA Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Bikram.JPG</mx:image>
                  <mx:description>Working as developer.    </mx:description>
                 
              </mx:Object>
              <mx:Object>
                  <mx:name> Swapnil Dixit</mx:name>
                  <mx:title>Jr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Swapnil.JPG</mx:image>
                  <mx:description>Working as developer.    </mx:description>
                 
              </mx:Object>
              <mx:Object>
                  <mx:name> Sadhana</mx:name>
                  <mx:title>HR</mx:title>
                  <mx:image>D:\Indiv Pics\Sadhana.JPG</mx:image>
                  <mx:description>Working as HR.    </mx:description>
                 
              </mx:Object>
                  <mx:Object>
                  <mx:name> Kunal</mx:name>
                  <mx:title>Sr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Kunal.JPG</mx:image>
                  <mx:description>Working as Sr. developer.    </mx:description>
                 
                 
              </mx:Object>   
              <mx:Object>
                  <mx:name> Prashant Bhole</mx:name>
                  <mx:title>Sr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Prashant.JPG</mx:image>
                  <mx:description>Working as Sr. developer.    </mx:description>
                 
              </mx:Object>
                 
              <mx:Object>
                  <mx:name> Vikash</mx:name>
                  <mx:title>Sr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Vikash.JPG</mx:image>
                  <mx:description>Working as Sr. developer.    </mx:description>
                 
              </mx:Object>
              <mx:Object>
                  <mx:name> Harshal</mx:name>
                  <mx:title>Sr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Harshal.JPG</mx:image>
                  <mx:description>Working as Sr. developer.    </mx:description>
                 
              </mx:Object>
              <mx:Object>
                  <mx:name> Bikram</mx:name>
                  <mx:title>Sr. QA Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Bikram.JPG</mx:image>
                  <mx:description>Working as developer.    </mx:description>
                 
              </mx:Object>
              <mx:Object>
                  <mx:name> Swapnil Dixit</mx:name>
                  <mx:title>Jr. Software Engineer</mx:title>
                  <mx:image>D:\Indiv Pics\Swapnil.JPG</mx:image>
                  <mx:description>Working as developer.    </mx:description>
                 
              </mx:Object>
              <mx:Object>
                  <mx:name> Sadhana</mx:name>
                  <mx:title>HR</mx:title>
                  <mx:image>D:\Indiv Pics\Sadhana.JPG</mx:image>
                  <mx:description>Working as HR.    </mx:description>
              </mx:Object>
                     
          </mx:ArrayCollection>
         
          <mx:Box height="100%" width="100%" showEffect="Fade" styleName="padBox" direction="horizontal" verticalScrollPolicy="auto">
         
          <mx:DataGrid  allowMultipleSelection="true" id="dg_disk" dataProvider="{people}" height="100%" width="100%" selectedIndex="0" x="50" y="50">
                  <mx:columns>
                      <mx:DataGridColumn dataField="name"             id="empname"     headerText="EmpName" editable="true"/>
                          <mx:DataGridColumn dataField="title"         id="title"         headerText="Title"/>
                          <mx:DataGridColumn dataField="description"     id="desc"        headerText="Description"/>
                          <mx:DataGridColumn dataField="selected"     id="selected"    headerText="Select" width="150">
                          <mx:itemRenderer>
                              <mx:Component>
                                   <mx:HBox horizontalAlign="center">
                                      <mx:CheckBox id="ch_box" click="{data.selected=!data.selected}" selected="{data.selected}" />
                                 
                                  </mx:HBox>
                              </mx:Component>
                            </mx:itemRenderer>
                          </mx:DataGridColumn>
                          <mx:DataGridColumn headerText="City">
                              <mx:itemRenderer>
                                  <mx:Component>
                                      <mx:ComboBox>
                                          <mx:dataProvider>
                                              <mx:String>Delhi</mx:String>
                                              <mx:String>Bombay</mx:String>
                                              <mx:String>Kanpur</mx:String>
                                              <mx:String>Chennai</mx:String>
                                              <mx:String>Lucknow</mx:String>
                                          </mx:dataProvider>
                                      </mx:ComboBox>
                                  </mx:Component>
                              </mx:itemRenderer>
                          </mx:DataGridColumn>
                      </mx:columns>
                             
              </mx:DataGrid>
         
         
          </mx:Box>
      </mx:Application>

        • 1. Re: Datagrid with multiple comboboxes not working when scroll up and down
          Pooja Kuber

          Try this. It worked for me.

           

          <mx:DataGridColumn headerText="City" dataField="comboSelection">
                                  <mx:itemRenderer>
                                      <mx:Component>
                                      <mx:Canvas>
                                          <mx:ComboBox id="cmb_box" change="{data.comboSelection = cmb_box.selectedIndex}" selectedIndex="{data.comboSelection}">
                                              <mx:dataProvider>
                                                  <mx:String>Delhi</mx:String>
                                                  <mx:String>Bombay</mx:String>
                                                  <mx:String>Kanpur</mx:String>
                                                  <mx:String>Chennai</mx:String>
                                                  <mx:String>Lucknow</mx:String>
                                              </mx:dataProvider>
                                          </mx:ComboBox>
                                      </mx:Canvas>
                                      </mx:Component>
                                  </mx:itemRenderer>
                              </mx:DataGridColumn>

          Thanks and Regards,
          ..................................................................... ......................
          Pooja Kuber | pkuber@infocepts.com | www.infocepts.com

          ...................................................................... .....................