2 Replies Latest reply on Jul 22, 2011 12:12 AM by Flex harUI

    Datagrid with multiple checkboxes 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 checkboxes 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 checkboxes in front of every element. Now i am selecting the element by checking the checkboxes as i scroll down in the datagrid my selection get unselected. I need that my selected checkbox 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:ArrayCollection id="people">

       

      <mx:Object>
          <mx:name> ABC</mx:name>
          <mx:title>Sr. Software Engineer</mx:title>
          <mx:description>Working as Sr. developer. </mx:description>
      </mx:Object>
      <mx:Object>
          <mx:name> ABC</mx:name>
          <mx:title>Sr. Software Engineer</mx:title>
          <mx:description>Working as Sr. developer. </mx:description>
      </mx:Object>
      <mx:Object>
          <mx:name> ABC</mx:name>
          <mx:title>Sr. Software Engineer</mx:title>
          <mx:description>Working as Sr. developer. </mx:description>
      </mx:Object>
      <mx:Object>
          <mx:name> ABC</mx:name>
          <mx:title>Sr. Software Engineer</mx:title>
          <mx:description>Working as Sr. developer. </mx:description>
      </mx:Object>
      <mx:Object>
          <mx:name> ABC</mx:name>
          <mx:title>Sr. Software Engineer</mx:title>
          <mx:description>Working as Sr. developer. </mx:description>
      </mx:Object>
      <mx:Object>
          <mx:name> ABC</mx:name>
          <mx:title>Sr. Software Engineer</mx:title>
          <mx:description>Working as Sr. developer. </mx:description>
      </mx:Object>
      <mx:Object>
          <mx:name> ABC</mx:name>
          <mx:title>Sr. Software Engineer</mx:title>
          <mx:description>Working as Sr. developer. </mx:description>
      </mx:Object>
      <mx:Object>
          <mx:name> ABC</mx:name>
          <mx:title>Sr. Software Engineer</mx:title>
          <mx:description>Working as Sr. developer. </mx:description>
      </mx:Object>
      <mx:Object>
          <mx:name> ABC</mx:name>
          <mx:title>Sr. Software Engineer</mx:title>
          <mx:description>Working as Sr. developer. </mx:description>
      </mx:Object>
      <mx:Object>
          <mx:name> ABC</mx:name>
          <mx:title>Sr. Software Engineer</mx:title>
          <mx:description>Working as Sr. developer. </mx:description>
      </mx:Object>
      <mx:Object>
          <mx:name> ABC</mx:name>
          <mx:title>Sr. Software Engineer</mx:title>
          <mx:description>Working as Sr. developer. </mx:description>
      </mx:Object>
      <mx:Object>
          <mx:name> ABC</mx:name>
          <mx:title>Sr. Software Engineer</mx:title>
          <mx:description>Working as Sr. developer. </mx:description>
      </mx:Object>
      <mx:Object>
          <mx:name> ABC</mx:name>
          <mx:title>Sr. Software Engineer</mx:title>
          <mx:description>Working as Sr. developer. </mx:description>
      </mx:Object>
      <mx:Object>
          <mx:name> ABC</mx:name>
          <mx:title>Sr. Software Engineer</mx:title>
          <mx:description>Working as Sr. developer. </mx:description>
      </mx:Object>
      <mx:Object>
          <mx:name> ABC</mx:name>
          <mx:title>Sr. Software Engineer</mx:title>
          <mx:description>Working as Sr. developer. </mx:description>
      </mx:Object>
      <mx:Object>
          <mx:name> ABC</mx:name>
          <mx:title>Sr. Software Engineer</mx:title>
          <mx:description>Working as Sr. developer. </mx:description>
      </mx:Object>
      <mx:Object>
          <mx:name> ABC</mx:name>
          <mx:title>Sr. Software Engineer</mx:title>
          <mx:description>Working as Sr. developer. </mx:description>
      </mx:Object>
      <mx:Object>
          <mx:name> ABC</mx:name>
          <mx:title>Sr. Software Engineer</mx:title>
          <mx:description>Working as Sr. developer. </mx:description>
      </mx:Object>
      <mx:Object>
          <mx:name> ABC</mx:name>
          <mx:title>Sr. Software Engineer</mx:title>
          <mx:description>Working as Sr. developer. </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"/>
                      <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" selected="{data.titile}" />
                                 
                              </mx:HBox>
                          </mx:Component>
                        </mx:itemRenderer>
                      </mx:DataGridColumn>
                  </mx:columns>
                             
              </mx:DataGrid>
         
         
          </mx:Box>
      </mx:Application>

        • 1. Re: Datagrid with multiple checkboxes not working when scroll up and down
          Flex harUI Adobe Employee

          Your probably not handling recycling of renderers.  There are pretty good

          examples of checkboxes in datagrid.  There are some on my blog and Amy

          Blankenship has one I think.

           

          --

          Alex Harui

          Flex SDK Team

          Adobe System, Inc.

          http://blogs.adobe.com/aharui

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

            Add the selected data field in your Arraycollection.

            <mx:Object>
                <mx:name> ABC</mx:name>
                <mx:title>Sr. Software Engineer</mx:title>
                <mx:description>Working as Sr. developer. </mx:description>
                <mx:selected>0</mx:selected>
            </mx:Object>

             

            And make following changes in check box control.

            <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>

             

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

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