2 Replies Latest reply: Jul 13, 2011 8:48 AM by Flex harUI RSS

    Check box rendering problem in List.

    flex4 Community Member

      Hi All,

       

                  I am using list component in my app and list component allows multiple selections. I am using an itemrenderer having the checkbox and label in hbox.

      Rendering is working fine. but when I selected three or four items randomly using check boxes in list and If I scroll it vertically (up and down) the selections of check boxes changedto another items. If I keep on doing this finally I will get all the check boxes selected. but I have selected only three check boxes.

       

                   I wanted get out of this problem. If i selected two or three checkboxes and when scroll it vertically it should remain as it is. Selections should not change... please help on this.. 

       

       

                       I am posting the code of Item renderer

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalGap="2"
          width="100%" height="100%"
          implements="mx.controls.listClasses.IDropInListItemRenderer"
          initialize="init()"
          verticalScrollPolicy="off"
          horizontalScrollPolicy="off"
          click="handleClick(event)">
         
          <mx:Metadata>
              [Event(name="checkBoxEvent", type="com.comp.name.ui.events.CheckBoxEvent")]
          </mx:Metadata>

       

          <mx:Script>
              <![CDATA[
                  import mx.controls.List;
                  import mx.controls.listClasses.ListData;
                  import com.comp.name.ui.events.CheckBoxEvent;
                  import com.comp.name.ui.filters.StringUtils;
                  import mx.controls.dataGridClasses.DataGridListData;
                  import mx.controls.listClasses.BaseListData;
                     
                  private var _listData:BaseListData;
                  private var _list:List;
                 
                  public function init():void
                  {
                      this.addEventListener(Event.CHANGE, onChangeEvent);
                  }
                 
                  public function get listData() : BaseListData
                  {
                      return _listData;
                  }
                  public function set listData( value:BaseListData ) : void
                  {
                      _listData = value;
                      if(listData)
                      {
                          _list = listData.owner as List
                      }   
                  }
                  override public function set data(value:Object):void
                  {
                      super.data = value;
                  }
                  protected function handleClick(event:MouseEvent):void
                  {
                      if(check.selected)
                      {
                          check.selected = false;
                      }
                      else
                      {
                          check.selected = true;
                      }
                  }        
                  protected function checkBoxSelected(event:Event):void
                  {
                      if(data)
                      {
                          if(check.selected){
                              dispatchEvent(new CheckBoxEvent(CheckBoxEvent.CHECKBOX_EVENT, data.mx_internal_uid,data as Object, true,true));
                          }else
                          {
                              dispatchEvent(new CheckBoxEvent(CheckBoxEvent.CHECKBOX_EVENT, data.mx_internal_uid,data as Object, false,true));
                          }   
                      }
                  }
                  protected function onChangeEvent(event:Event):void
                  {
                     
                  }
              ]]>
          </mx:Script>
          <mx:CheckBox id="check" change="checkBoxSelected(event)" click="handleClick(event)"/>
          <mx:Label id="lb" width="100%" height="100%" htmlText="{_list.labelFunction(data)}"/>
      </mx:HBox>

       

       

      I have faced this problem in so many times in so many list component..  Please help me on this...