Search Flex Samples

Toggling resizable columns in a Flex DataGrid control

The following example demonstrates how you can enable/disable resizable columns in a Flex DataGrid control using the DataGrid class’s resizableColumns property, as well as toggling specific column’s resizability using the DataGridColumn class’s resizable property.





<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="vertical"

verticalAlign="middle"

backgroundColor="white">



<mx:Array id="arr">

<mx:Object label="User 1" data="1" />

<mx:Object label="User 2" data="2" />

<mx:Object label="User 3" data="3" />

<mx:Object label="User 4" data="4" />

<mx:Object label="User 5" data="5" />

<mx:Object label="User 6" data="6" />

<mx:Object label="User 7" data="7" />

<mx:Object label="User 8" data="8" />

</mx:Array>



<mx:ApplicationControlBar dock="true">

<mx:CheckBox id="resizableColumnsCh"

label="resizableColumns"

selected="true" />



<mx:CheckBox id="labelResizableCh"

label="label.resizable"

selected="true" />



<mx:CheckBox id="dataResizableCh"

label="data.resizable"

selected="true" />

</mx:ApplicationControlBar>



<mx:DataGrid id="dataGrid"

resizableColumns="{resizableColumnsCh.selected}"

dataProvider="{arr}">

<mx:columns>

<mx:DataGridColumn dataField="label"

resizable="{labelResizableCh.selected}" />

<mx:DataGridColumn dataField="data"

resizable="{dataResizableCh.selected}" />

</mx:columns>

</mx:DataGrid>

</mx:Application>




<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="horizontal"

verticalAlign="middle"

backgroundColor="white">



<mx:Script>

<![CDATA[

import mx.controls.dataGridClasses.DataGridColumn;

import mx.controls.DataGrid;

import mx.events.DataGridEvent;



private function dataGrid_columnStretch(evt:DataGridEvent):void {

var dg:DataGrid = DataGrid(evt.currentTarget);

var column:DataGridColumn = dg.columns[evt.columnIndex];

debug.text += evt.dataField + " == " + column.width + "px" + "\n";

}

]]>

</mx:Script>



<mx:Array id="arr">

<mx:Object label="User 1" data="1" />

<mx:Object label="User 2" data="2" />

<mx:Object label="User 3" data="3" />

<mx:Object label="User 4" data="4" />

<mx:Object label="User 5" data="5" />

<mx:Object label="User 6" data="6" />

<mx:Object label="User 7" data="7" />

<mx:Object label="User 8" data="8" />

</mx:Array>



<mx:DataGrid id="dataGrid"

dataProvider="{arr}"

columnStretch="dataGrid_columnStretch(event)">

<mx:columns>

<mx:DataGridColumn dataField="label" />

<mx:DataGridColumn dataField="data" />

</mx:columns>

</mx:DataGrid>

<mx:TextArea id="debug"

width="{dataGrid.width}"

height="{dataGrid.height}" />

</mx:Application>

0 comments:

Related Flex Samples

Learn Flex: Flex Samples | Flex Video Tutorials Flex Examples