Search Flex Samples

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.




<?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="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>

0 comments:

Related Flex Samples

Learn Flex: Flex Samples | Flex Video Tutorials Flex Examples