Hi David, Did you try add event listener initComplete to DataGrid itself initially ?
Thanks, Piotr czw., 25 mar 2021 o 11:38 David Slotemaker de Bruine < [email protected]> napisał(a): > 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> > -- Piotr Zarzycki
