Problem with DataGrid DataSource

Question

Hello,
I am having problems to populate my advanced datagrid. Though
the grid is getting headers, it is not getting the data from my
datasource (Please note that I am using a cfc functions called
"getOrds" to retrieve the data.
Am I missing something in the code??
It would be great if someone could help me out with this one.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="vertical">
<mx:Script>
<![CDATA[
import mx.collections.IHierarchicalCollectionView;
[Bindable]
[Bindable]
public var ords:ArrayCollection = new ArrayCollection;
public function getOrds(event:ResultEvent):void
ords = event.result as ArrayCollection;
]]>
</mx:Script>
<mx:AdvancedDataGrid id="adg" x="28" y="64" width="609"
height="228" creationComplete="gc2.refresh();"
initialize="gc2.refresh();" designViewDataType="tree"
defaultLeafIcon="{null}" folderClosedIcon="{null}"
folderOpenIcon="{null}" >
<mx:dataProvider>
<mx:GroupingCollection id="gc2" source="{ords}" >
<mx:Grouping>
<mx:GroupingField name="rule_no" >
<mx:summaries>
<mx:SummaryRow summaryPlacement="group">
<mx:fields>
<mx:SummaryField dataField="rule_no" operation="SUM" />
</mx:fields>
</mx:SummaryRow>
</mx:summaries>
</mx:GroupingField>
<mx:GroupingField name="cakes">
<mx:summaries>
<mx:SummaryRow summaryPlacement="group" >
<mx:fields>
<mx:SummaryField dataField="cakes" operation="COUNT" />
</mx:fields>
</mx:SummaryRow>
</mx:summaries>
</mx:GroupingField>
</mx:Grouping>
</mx:GroupingCollection>
</mx:dataProvider>
<mx:groupedColumns>
<mx:AdvancedDataGridColumn headerText="rule_no" />
<mx:AdvancedDataGridColumn headerText="Cakes"
dataField="cakes"/>
</mx:groupedColumns>
</mx:AdvancedDataGrid>
<mx:RemoteObject id="myService" destination="ColdFusion"
source="components.AdvancedDG" showBusyCursor="true"
fault="Alert.show(event.fault.message,'Error')">
<mx:method name="getOrds" result="getOrs(event)"/>
</mx:RemoteObject>
</mx:Application>

Answer 1

Please see following changes:
<mx:ViewStack id="menuOptions" width="100%" paddingBottom="5" height="100%">
      <mx:Panel width="100%" height="100%" layout="absolute" id="panel1" label="Panel 1" title="Panel 1" titleIcon="@Embed(source='resources/panel_icon.png')">
            <mx:DataGrid id="grid1" width="100%" height="100%"/>
      </mx:Panel>
      <mx:Panel width="100%" height="100%" layout="absolute" id="panel2" label="Panel 2" title="Panel 2" titleIcon="@Embed(source='resources/panel_icon.png')">
            <mx:DataGrid id="grid2" width="100%" height="100%" />
      </mx:Panel>
      <mx:Panel width="100%" height="100%" layout="absolute" id="panel3" label="Panel 3" title="Panel 3" titleIcon="@Embed(source='resources/panel_icon.png')">
            <mx:DataGrid id="grid3" width="100%" height="100%"/>
      </mx:Panel>
</mx:ViewStack>