3 Replies Latest reply on Sep 24, 2009 10:40 AM by Handycam

    Data: 1 collection,  4 lists, delete item = problem

    Handycam Level 1

      I have a XMLListCollection of a bunch of recipes, displayed in a Spark List with a custom item renderer, appropriately named "recipeListCollection".

       

      I have a button to "add" the selected recipe to a Menu (the meal kind, not the computer kind).  To hold the menu, I have an XMLList,  menuList.  I did it as a list so I can access things in it with E4X, seems xmlListCollection won't let me.

       

      The add button has a function

      protected function copyItem_clickHandler(event:MouseEvent):void {
         var i:int = cardList.selectedIndex;
         menuList += recipeListCollection.getItemAt(i); }
      

      My problem is, like any good menu, I need to show these items grouped by course.  I have tried a grouping collection, but I don't like the way it displays.  So I was trying to do 4  spark lists that would display a subset of the menuList.  i have found that I can create 4 XMLList collections, like:

       

      starters = new XMLListCollection(menuList.(@course=="starters"));

       

      and then use these for data providers for the 4 lists.

       

      This looks fine, but the problem comes from having to remove an item from the menu.  If I add an item renderer on the list to delete the item from that list, how does it get deleted from the "master" menuList?

        • 1. Re: Data: 1 collection,  4 lists, delete item = problem
          Flex harUI Adobe Employee

          I'd try it.  In theory, when you delete the item in one collection it deletes it from XML and notifications should get sent to the other xmllists and their collections.  If that doesn't work you may have to use one XMLList, make four collections from that single xmllist and use filtering on the collection.  You can always use the source XMLList to query using e4x

           

          Alex Harui

          Flex SDK Developer

          Adobe Systems Inc.

          Blog: http://blogs.adobe.com/aharui

          • 2. Re: Data: 1 collection,  4 lists, delete item = problem
            Handycam Level 1

            It's not working, unless I am doing something wrong:

             

            protected function copyItem_clickHandler(event:MouseEvent):void {
                 var i:int = cardList.selectedIndex;
                 // add the item on the currently selected card to the menu list
                 menuList += recipeListCollection.getItemAt(i);
                 
                 shoppingListCollection = new XMLListCollection(menuList..item);
                 
                 starters = new XMLListCollection(menuList.(@course=="starters"));
                 sides = new XMLListCollection(menuList.(@course=="sides"));
                 mainCourse = new XMLListCollection(menuList.(@course=="main"));
                 desserts = new XMLListCollection(menuList.(@course=="desserts"));
            }
            

             

            I have 4 spark lists, one to display each of the courses above.

             

            <s:Label text="Starters" horizontalCenter="0"/>
            <s:List id="startersList" dataProvider="{starters}" width="100%" skinClass="skins.MenuSectionListSkin">
               <s:itemRenderer>
                 <fx:Component>
                     <comp:MenuListItem/>
                 </fx:Component>
               </s:itemRenderer>
            </s:List>
            

            The item  renderer contains the delete button & its code:

             

            <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/halo">
                 <fx:Script>
                      <![CDATA[
                           import spark.components.List;
                           public function deleteItem():void {
                              var parentList:List = owner as List;
                              // remove the item
                              parentList.dataProvider.removeItemAt(parentList.dataProvider.getItemIndex(data));
                           }
                      ]]>
                 </fx:Script>     
                 <s:HGroup>
                      <s:Label text="{XML(data).title}" />
                      <s:Button id="remove" label="X"  click="deleteItem()"/>
                 </s:HGroup>
            </s:ItemRenderer>
            

             

             

             

            I have 1 data grid, to display the shoppingListCollection.  When something is deleted with the above button, it is removed from that List, but not from the other collections, apparently.  The shoppingListCollection still contains the item that was deleted.

            • 3. Re: Data: 1 collection,  4 lists, delete item = problem
              Handycam Level 1

              Part of the problem, that prevents me from figuring it out, is if all the delete this row functions are made by row index, something in row index 0 in one of the sub-collection lists is NOT item zero in the main data list.