I'm having trouble getting an AdvancedDataGrid to populate properly within an app I'm working on.
If I use the sample code found on this page http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7bf0.html in it's own page everything works fine but if I copy this code into the page within my app that needs to have the grid the column headers/data are not populated.
The page that needs the grid is displayed within a Spark NavigatorContent element, I'm not sure if this could somehow adversely effect the AdvancedDataGrid behaviour. I've even simplified the contained page to have just the sample code without anything else and it still does not work.
Any ideas would be greatly appreciated. Feel free to request any more info needed here, I'm fairly new to Flex and am pretty stuck here.
EDIT: Some code sample from the project:
//Code from 'main page' containing the NavigatorContent
<mx:ViewStack id="viewstack1" cornerRadius="12" dropShadowVisible="false">
<s:NavigatorContent label="Matrix View" backgroundColor="#FFFFFF">
<temporalShift:CCCPMatrixView id="matrixView" initialize="initMatrixView()" />
</s:NavigatorContent>
</mx:ViewStack>
//Code contained within 'CCCPMatrixView'
<?xml version="1.0"?>
<!-- dpcontrols/adg/ColumnGroupADG.mxml -->
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var dpFlat:ArrayCollection = new ArrayCollection([
{Region:"Southwest", Territory:"Arizona",
Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
{Region:"Southwest", Territory:"Arizona",
Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},
{Region:"Southwest", Territory:"Central California",
Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},
{Region:"Southwest", Territory:"Nevada",
Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},
{Region:"Southwest", Territory:"Northern California",
Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
{Region:"Southwest", Territory:"Northern California",
Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},
{Region:"Southwest", Territory:"Southern California",
Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
{Region:"Southwest", Territory:"Southern California",
Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}
]);
]]>
</fx:Script>
<mx:AdvancedDataGrid id="myADG"
dataProvider="{dpFlat}"
width="100%" height="100%">
<mx:groupedColumns>
<mx:AdvancedDataGridColumn dataField="Region"/>
<mx:AdvancedDataGridColumn dataField="Territory"/>
<mx:AdvancedDataGridColumn dataField="Territory_Rep"
headerText="Territory Rep"/>
<mx:AdvancedDataGridColumnGroup headerText="Revenues">
<mx:AdvancedDataGridColumn dataField="Actual"/>
<mx:AdvancedDataGridColumn dataField="Estimate"/>
</mx:AdvancedDataGridColumnGroup>
</mx:groupedColumns>
</mx:AdvancedDataGrid>
Well I feel a little silly. Turns out it was populating fine and it was just that the text was the same color as the background (as far as I can tell). Adding the following CSS fixed the issue:
mx|AdvancedDataGrid {
selection-color:#5f8ed4;
text-selected-color:#ffffff;
roll-over-color:#31962c;
text-roll-over-color:#ffffff;
font-family:ArialEmbeddedMX;
chrome-color: #C9C9C9;
header-style-name: "AdvancedDataGrid-HeaderStyle";
}
.AdvancedDataGrid-HeaderStyle {
text-roll-over-color:#ffffff;
corner-radius: 5;
text-selected-color:#ffffff;
color:#000000; font-size:12;
}