0 Replies Latest reply on Sep 16, 2008 9:17 AM by peterh8234

    Items in Tree control move around when data is submitted using custom ItemRenderer

    peterh8234

      I'm working on a Tree control with an XMLListCollection as its dataProvider. The dataProvider has information looking like this :
      quote:


      <?xml version='1.0' encoding='utf-8'?>
      <INFO>
      <FIELD label="STR_USER_NAME"
      type="text"
      value=""
      >
      </FIELD>
      <FIELD label="STR_USER_EMAIL"
      type="text"
      value=""
      >
      </FIELD>
      <FIELD label="STR_OPTIONAL"
      type="branch"
      value="0"
      >
      <FIELD label="STR_USER_ADDRESS"
      type="text"
      value=""
      >
      </FIELD>
      <FIELD label="STR_USER_POSTAL_CODE"
      type="text"
      value=""
      >
      </FIELD>
      </FIELD>
      </INFO>


      So in the Tree control I'd like the information to show up with a label and an editable textbox for each item :

      [Label] [textbox]

      To do this I made a tree like this :
      quote:


      <mx:Tree id="userTree"
      editable="true"
      rendererIsEditor="true"
      editorDataField="curVal"
      itemRenderer="{new ClassFactory(ItemRendererUser)}"
      itemEditEnd="e_ProcessData(event);"
      dataDescriptor="{new DataDescriptorUsers()}"
      showRoot="false"
      verticalScrollPolicy="{ScrollPolicy.AUTO}"
      />


      where the e_ProcessData() function looks like this (I used http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/js/html/wwhelp.htm?href=celleditor_ 073_16.html#202105 as a guide) :
      quote:


      public function e_ProcessData(event:ListEvent):void
      {
      event.preventDefault();

      userTree.editedItemRenderer.data.@value = ItemRendererUsers(event.currentTarget.itemEditorInstance).curVal;

      userTree.destroyItemEditor();

      userTree.dataProvider.notifyItemUpdate(userTree.editedItemRenderer);
      } // END OF e_ProcessData()


      I attached the rest of the files because they're a little bit longer.


      When I run the program, the data shows up fine when it is initialized the very first time, and I made a test button that just dumps the contents of the dataProvider in a trace statement to verify that the data has been set properly.
      The problem I've run into is whenever the textfield is edited, the item that I've selected jumps around the list.

      For example, if I edit the item "STR_USER_NAME" after I finish the edit, it will move from the very first position in the Tree to the bottom of the Tree.
      I traced the contents of the dataProvider and the dataProvider structure stays the same, with the "STR_USER_NAME" at the top, but if I look at the flex app in the web browser, its position is at the bottom of the Tree.

      This happens for every other item I try to edit... I read in the documentation that the ItemRenderers are recycled, so it means I should be checking to make sure the initial states are covered, but I'm not sure how this affects my application.

      Can anyone help me out with this ? Its very confusing - I've tried making an ItemRenderer using pure actionscript, mxml and the combination you see in this example and I always end up with the same behaviour - So I must be missing something critical...