Flex datagrid and nested Array dataprovider

Question

I have used datagrid on many projects populate the grid using the following "Usual data structure" and brought the standard o/p as shown below Image. But now for one assignment I want to bring the same grid result using the below mentioned "Complex data structure" (nested array). I have some Idea which is process the data before pushing it to the Grid but the problem am having is I need to perform some update , edit delete operation through the grid renderers and the same should be reflected into the source collection also. Please let me know is there a way I can use the "Complex structure" and bring the expected o/p using any flex in build properties. Thanks in Advance.

Usual data structure

steps = [a,b,c];
a = {x:100,y:y1,z:z1};
b = {x:200,y:y2,z:z2};
c = {x:300,y:y3,z:z3};

Complex data structure

[] is an Array collection not Array type.    
a = [100,y1,z1];
b = [200,y2,z2];
c = [300,y3,z3];
steps = [[a,some objects],[b,some objects],[c,some objects]];

enter image description here

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
    <![CDATA[

        import mx.collections.ArrayCollection;

        private var a:ArrayCollection = new ArrayCollection(['x1','y1','z1']);
        private var b:ArrayCollection = new ArrayCollection(['x2','y2','z2']);
        private var c:ArrayCollection = new ArrayCollection(['x3','y3','z3']);
        [Bindable]
        private var stepsObjs:ArrayCollection = new ArrayCollection([{ items: a},{ items: b},{ items: c}]);

    ]]>
</mx:Script>

<mx:DataGrid dataProvider="{stepsObjs}" >
    <mx:columns>
        <mx:DataGridColumn dataField="items.0" headerText="x" />
        <mx:DataGridColumn dataField="items.1" headerText="y" />
        <mx:DataGridColumn dataField="items.2" headerText="z" />
    </mx:columns>
</mx:DataGrid>  
</mx:Application>

Jacob Eggers · Accepted Answer · 2011-08-08 16:59:41Z

3

EDIT Replacing with code to solve the new question.

This one worked for me:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
               >
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            private var a:ArrayCollection = new ArrayCollection([100,'y1','z1']);
            private var b:ArrayCollection = new ArrayCollection([200,'y2','z2']);
            private var c:ArrayCollection = new ArrayCollection([300,'y3','z3']);

            private var stepsObjs:ArrayCollection = new ArrayCollection([{ items: a},{ items: b},{ items: c}]);
            private var stepsColl:ArrayCollection = new ArrayCollection([[a],[b],[c]]);

        ]]>
    </fx:Script>
    <s:layout>
        <s:VerticalLayout />
    </s:layout>
    <mx:DataGrid dataProvider="{stepsObjs}" >
        <mx:columns>
            <mx:DataGridColumn dataField="items.0" headerText="x" />
            <mx:DataGridColumn dataField="items.1" headerText="y" />
            <mx:DataGridColumn dataField="items.2" headerText="z" />
        </mx:columns>
    </mx:DataGrid>

    <mx:DataGrid dataProvider="{stepsColl}" >
        <mx:columns>
            <mx:DataGridColumn dataField="0.0" headerText="x" />
            <mx:DataGridColumn dataField="0.1" headerText="y" />
            <mx:DataGridColumn dataField="0.2" headerText="z" />
        </mx:columns>
    </mx:DataGrid>

</s:Application>

edited Aug 8, 2011 at 16:59

answered Aug 5, 2011 at 16:40

Jacob Eggers

9,3282 gold badges27 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Sabha B Over a year ago

oops I copy/pasted wrong but I never write program in this way :) Let me try and reply you shortly.Thanks for your reply!

Sabha B Over a year ago

I have modified my complex data structure , could you please help me on this.Thanks!

Sabha B Over a year ago

Oh does it support "." notation in datafield , I didnt know that. Thanks a Lot!

Sabha B Over a year ago

@Jacao : thanks a lot. I have one last question after trying many times I decided asking you this question , may I know how to populate the same using objects with in that arraycollection is stored. For example private var o1:Object = new Object(); o1 = {items:a}; steps.addItem(o1); .

Jacob Eggers Over a year ago

@Anandh I just posted an example with dataField="items.0"

|

Amy Blankenship · Accepted Answer · 2011-08-05 17:33:27Z

1

The itemRenderers should dispatch an event that describes what should happen, and then it should be handled higher up.

Like this:

//inside item renderer
dispatchEvent(new ItemEvent(ItemEvent.DELETE_ITEM, true, item));//where true tells the event to bubble (you'll need to create this event)

//somewhere above the DataGrid
dataGrid.addEventListener(ItemEvent.DELETE_ITEM, deleteItemFromSource);

protected function deleteItemFromSource(e:ItemEvent):void {
    var lcv:ListCollectionView = (dataGrid.dataProvider as ListCollectionView);
    lcv.removeItemAt(lcv.getItemIndex(e.item));
}

Note as a FYI that you should be using some sort of ListCollectionView if you want the datagrid to automatically update when you change it, not an Array.

HTH;

Amy

answered Aug 5, 2011 at 17:33

Amy Blankenship

7,0613 gold badges27 silver badges51 bronze badges

3 Comments

Sabha B Over a year ago

Rite am using ArrayCollection only but my data even complex that what I posted(its a abstract). I thought If rendering nested array with one level is possible then multiple nested also possible. I will edit my question to exact data structure.

Amy Blankenship Over a year ago

You can't create an ArrayCollection with [thing1, thing2, thing3]. The closest you can come is new ArrayCollection([thing1, thing2, thing3]). So I think you are misunderstanding the datatypes and that is a large part of why your view is not updating.

Sabha B Over a year ago

Thats for explaining this actually I dont have any confusion with datatype's , since I want to put this question in simpler way so I didnt given fully qualified syntax. However it was my mistake too , from next time I will give the full description. Jacob solution works , now am going to try using your approach too. Thanks for your time.

Collectives™ on Stack Overflow

Flex datagrid and nested Array dataprovider

2 Answers 2

11 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related