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> | 
10:29 AM
 | 
Labels:
Flex Controls Samples,
Flex DataGrid Samples
 | 
 
				 This entry was posted on 10:29 AM
	and is filed under          
Flex Controls Samples
,
Flex DataGrid Samples
						.
							
				You can follow any responses to this entry through 
				the RSS 2.0 feed. 
				
				
					You can leave a response,
		        
				or trackback from your own site.
			


0 comments:
Post a Comment