반응형
Toggling draggable columns in a Flex DataGrid control
The following example demonstrates how you can enable/disable draggable columns in a Flex DataGrid control using the DataGrid class’s draggableColumns property, as well as toggling specific column’s dragability using the DataGridColumn class’s draggable property.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/30/toggling-draggable-columns-in-a-flex-datagrid-control/ -->
<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="draggableColumnsCh"
label="draggableColumns"
selected="true" />
<mx:CheckBox id="labelDraggableCh"
label="label.draggable"
selected="true" />
<mx:CheckBox id="dataDraggableCh"
label="data.draggable"
selected="true" />
</mx:ApplicationControlBar>
<mx:DataGrid id="dataGrid"
draggableColumns="{draggableColumnsCh.selected}"
dataProvider="{arr}">
<mx:columns>
<mx:DataGridColumn dataField="label"
draggable="{labelDraggableCh.selected}" />
<mx:DataGridColumn dataField="data"
draggable="{dataDraggableCh.selected}" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
View source is enabled in the following example.
If you want to detect when a data grid column has been reordered, you can listen for the headerShift event on the DataGrid control, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/30/toggling-draggable-columns-in-a-flex-datagrid-control/ -->
<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.IndexChangedEvent;
private function dataGrid_headerShift(evt:IndexChangedEvent):void {
var dg:DataGrid = DataGrid(evt.currentTarget);
var column:DataGridColumn = dg.columns[evt.newIndex];
debug.text += column.dataField + " (oldIndex:" + evt.oldIndex + ", newIndex:" + evt.newIndex + ")" + "\\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}"
headerShift="dataGrid_headerShift(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>
View source is enabled in the following example.
