onInitComplete fires before variables are set.

[David Slotemaker de Bruine]

Hi,

I am trying to set columns in a Datagrid depending on the size of the screen.

I have extended the DataGrid Component and added Array Variables that contain 
the columns that should be visible at each screen size. I have added a 
<j:ResponsiveResizeListener localId="resizer"/> to the component. On 
initCompleteEvent I setup the listeners for the ResponsiveSize Events. These 
all fire correctly and the colums are changed dynamically when the browser size 
is changed. The exception is the first time the page is loaded as no "resize" 
event fires. 

I have tried manually calling the handler duing the InitCompleteEvent but the 
Array variables that contain the list of columns are empty at this point. Is 
there another event that I can listen for?

The datagrid code is:

<?xml version="1.0" encoding="utf-8"?>
<j:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009";
                 xmlns:js="library://ns.apache.org/royale/basic"
                 xmlns:j="library://ns.apache.org/royale/jewel" 
                 initComplete="onInitComplete(event)"
                  >     
        <j:beads>
                <j:ResponsiveResizeListener localId="resizer"/>
                <!--<js:ViewDataBinding/>-->
        </j:beads>
        <fx:Script>
        <![CDATA[
                import org.apache.royale.collections.ArrayList;
                import org.apache.royale.jewel.supportClasses.ResponsiveSizes;

                public var columnsPhone:Array = new Array();
                public var columnsTablet:Array = new Array();
                public var columnsDesktop:Array = new Array();
                public var columnsWideScreen:Array = new Array();
                public var columnsFull:Array = new Array();
                        
                protected function onInitComplete(event:Event):void{
                setResponsiveSizeIndicatorListeners();
                handleResponsiveSizeChange(null);
            }

                private function setColumns(newColumns:Array):void
                {
                        if(newColumns.length != 0)
                        {
                                this.columns = newColumns;
                        }
                }
                
                private function setResponsiveSizeIndicatorListeners():void
                {
                        this.addEventListener('phoneResponsiveSize', 
handleResponsiveSizeChange);
            this.addEventListener('tabletResponsiveSize', 
handleResponsiveSizeChange);
            this.addEventListener('desktopResponsiveSize', 
handleResponsiveSizeChange);
            this.addEventListener('widescreenResponsiveSize', 
handleResponsiveSizeChange);
            this.addEventListener('fullResponsiveSize', 
handleResponsiveSizeChange);
         }
                            
         private function handleResponsiveSizeChange(event:Event = null):void
         {      
            if(resizer.currentResponsiveSize == ResponsiveSizes.PHONE) {
               setColumns(columnsPhone);
            }
            else if(resizer.currentResponsiveSize == ResponsiveSizes.TABLET) {
                setColumns(columnsTablet);
            }
            else if(resizer.currentResponsiveSize == ResponsiveSizes.DESKTOP) {
                 setColumns(columnsDesktop);
            }
            else if(resizer.currentResponsiveSize == 
ResponsiveSizes.WIDESCREEN) {
                 setColumns(columnsWideScreen);
            }
            else if(resizer.currentResponsiveSize == ResponsiveSizes.FULL) {
                 setColumns(columnsFull);
            }
        }       
        ]]>
</fx:Script>
</j:DataGrid>

And I set the mxml this way:

<components:DataGridExtended id="dg" width="100%" height="314" 
                                dataProvider="{pCSearchResults.pagedData}"
                                
columnsPhone="{[dgcCodigo,dgcNombre,dgcGPS,dgcTelSimple]}"
                                columnsTablet="{[dgcCodigo,dgcNombre]}"
                                
columnsDesktop="{[dgcCodigo,dgcNombre,dgcPoblacion]}"
                                
columnsWideScreen="{[dgcCodigo,dgcNombre,dgcPoblacion,dgcGPS,]}"
                                
columnsFull="{[dgcCodigo,dgcNombre,dgcPoblacion,dgcGPS]}"
                                >
<components:columns>
 <j:DataGridColumn localId="dgcCodigo" label="Codigo" dataField="notesCliente"  
/>
<j:DataGridColumn localId="dgcNombre" label="Nombre" dataField="nombreCompleto" 
 />
<j:DataGridColumn localId="dgcPoblacion" label="Poblacion" 
dataField="poblacionNombre" />
<j:DataGridColumn localId="dgcGPS" label="GPS" dataField="direccionLatLong" 
columnWidth="50" /><j:DataGridColumn localId="dgcTelSimple" label="Tlfno" 
dataField="tlfno" columnWidth="50" />
</components:columns>
</components:DataGridExtended>