Flex - Tab View Multiple DataGrids and same dataProvider

I have a flex application in which I have a TabNavigator with multiple tabs and a datagrid in each of those tabs. I have bound s single array of data to each grid.

What I want to do is to bind each grid with a particular set of data in that array i.e. to distribute array contents among grids based on data type. For example items starting with letter A could be displayed in first grid, B in second, starting with C in third and so on. Hence you can say alphabeti开发者_开发技巧cally distribute the data on different grids. The problem is that the data will be added randomly by the user.

To make one data array for each grid is not an option (due to design restrictions).

Any suggestions please?

Thanks in advance

You're probably looking for filters, this article will help you get the idea behind filters.

Basically, the way I understand it, there is a function that will be passed each item and it will do test the conditions for that item and return true if it passes (you want it to be included) or false if it doesn't.

You'll need to create different filter functions for the different grids.

I hope this helps, if you need more help just let me know.

To do this with a single DataGrid and a single list, use a filter function on the list which changes based on tab activation (for the single list part). An easy (although perhaps clumsy) way to use a single DataGrid would be to just overlay the DataGrid over your TabNavigator. This is easy to do with a container like a Canvas using an absolute layout:

<mx:TabNavigator x="120.7" y="127.35" width="496" height="276">
    <mx:Canvas label="Test" width="100%" height="100%">
    </mx:Canvas>
    <mx:Canvas label="Test2" width="100%" height="100%">
    </mx:Canvas>
</mx:TabNavigator>

<mx:DataGrid x="305" y="169">
    <mx:columns>
        <mx:DataGridColumn headerText="Column 1" dataField="col1"/>
        <mx:DataGridColumn headerText="Column 2" dataField="col2"/>
        <mx:DataGridColumn headerText="Column 3" dataField="col3"/>
    </mx:columns>
</mx:DataGrid>

As long as the DataGrid is listed after the TabNavigator in mxml it'll display on top. Of course you'll need to take care to leave an appropriate size space on each tab for the datagrid and so on. There are other ways of doing this but this is probably the easiest and possibly the safest--assuming you want the DataGrid visible on all tabs.

But if this is the case you may also want to consider just shrinking the TabNavigator down in size to only contain the 'stuff' that is supposed to change on a tab change, leaving the DataGrid in the same higher-level container as the TabNavigator but not overlapping it.

If you need the DataGrid visible only on certain tabs but not others, you can also use actionscript to call addChild/removeChild on the tab containers. This works fine and the documentation for removeChild even suggests this is a typical use:

Removes a child DisplayObject from the child list of this Container. The removed child will have its parent property set to null. The child will still exist unless explicitly destroyed. If you add it to another container, it will retain its last known state.