0 Replies Latest reply on Apr 25, 2016 6:29 AM by Astraport2012

    Lose data in draggable List with nested ItemRenderers

    Astraport2012 Level 1

      I am suffering from this problem for a few days. There is a List in which you can drag items.

       

      [Bindable] public static var posts:ArrayCollection = new ArrayCollection();
      [Bindable] private var dragit:Boolean = false;
      protected function lst_itemClickHandler(evt:ItemClickEvent):void {
        
      if (evt.label == 'mousedown') {
        dragit
      = false;
        
      return;
        
      }
        
      if (evt.label == 'mouseup') {
        dragit
      = true;
        
      return;
        
      }
        
      }
      <s:List id="list" width="100%" height="100%" dataProvider="{posts}" itemRenderer="postIR" selectedIndex="0" dragEnabled="{dragit}" dragMoveEnabled="true" dropEnabled="true" useVirtualLayout="false"/>

       

      This list have an item renderer (postIR) as part of which buttons, images, TextArea and another Tile List with his item renderer - socIR. Here is postIR:

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
        
      xmlns:s="library://ns.adobe.com/flex/spark"
        
      xmlns:mx="library://ns.adobe.com/flex/mx"
        
      xmlns:c="*"
        
      autoDrawBackground="true" creationComplete="itemrenderer1_creationCompleteHandler(event)" maxHeight="120">
        
      <fx:Script>
        <![CDATA[
        [Bindable] private var index:int;
        [Bindable] private var socDP:ArrayCollection;
      protected function itemrenderer1_creationCompleteHandler(event:FlexEvent):void
        {
        index = ((this.owner as List).dataProvider as ArrayCollection).getItemIndex(data);

        socDP = Copypaste.socialVector[index] as ArrayCollection;
        soc.addEventListener(ItemClickEvent.ITEM_CLICK, soc_itemClickHandler);
        }
      //Deleted some code
      ]]>
        
      </fx:Script>
        
      <c:CheckList id="soc" width="100%" height="100%" itemRenderer="socIR" mouseDown="txt_mouseDownHandler(event)" mouseUp="soc_mouseUpHandler(event)"
        
      dataProvider="{socDP}" allowMultipleSelection="true" useVirtualLayout="false" click="soc_clickHandler(event)">
        
      <c:layout>
        
      <s:TileLayout requestedColumnCount="3" verticalAlign="top" padding="5"/>
        
      </c:layout>
        
      </c:CheckList>
        //Deleted some code
      </s:ItemRenderer>

       

      Here is socIR:

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
        
      xmlns:s="library://ns.adobe.com/flex/spark"
        
      xmlns:mx="library://ns.adobe.com/flex/mx"
        
      autoDrawBackground="true" click="itemrenderer1_clickHandler(event)" creationComplete="itemrenderer1_creationCompleteHandler(event)">
        
      <s:layout>
        
      <s:HorizontalLayout verticalAlign="middle" padding="5"/>
        
      </s:layout>
        
      <s:states>
        
      <s:State name="normal"/>
        
      <s:State name="selected"/>
        
      </s:states>
        
      <fx:Script>
        <![CDATA[

        protected function itemrenderer1_clickHandler(event:MouseEvent):void
        {
        if (this.selected) {
        data.selected = true;
        } else {
        data.selected = false;
        } 

        var parentList:List = owner as List;
        var e:ItemClickEvent = new ItemClickEvent(ItemClickEvent.ITEM_CLICK, true);
        e.item = data;
        e.index = parentList.dataProvider.getItemIndex(data);
        e.label = "selected";
        dispatchEvent(e);
        }

        override public function set data(value:Object):void
        {
        super.data = value;
        if (value.selected) {
        data.selected = true;
        } else {
        data.selected = false;
        } 
        } 

        protected function itemrenderer1_creationCompleteHandler(event:FlexEvent):void
        {
        if (data.selected) {
        this.selected = true;
        } else {
        this.selected = false;
        }
        }
        ]]>
        
      </fx:Script>
        
      <s:CheckBox id="socCheck" selected.selected="true" selected.normal="false" mouseEnabled="false"/>
        
      <s:Image source="{'images/socialicons/' + data.icon}"/>
        
      <s:Label text="{data.label}"/>
      </s:ItemRenderer>

       

      Everything works fine until I need to drag an items in main List. Selected items in socIR or disappear or randomly shuffled. I used a variety of methods - to store data when changing items in the main class in the vector for each itemrenderers - public static var socialVector:Vector. = new Vector.(); , but it only adds to the confusion. I experimented with useVirtualLayout, but it did not help. Please any advice how to avoid issue with data loss when drag an item. Thanks.

      PS so looks my list

      2016-04-25_14-27-40.png