Toggling sortable columns in a Flex DataGrid control
The following example demonstrates how you can enable/disable sortable columns in a Flex DataGrid control using the DataGrid class’s sortableColumns property, as well as toggling specific column’s sortability using the DataGridColumn class’s sortable property.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/31/toggling-sortable-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="sortableColumnsCh"
label="sortableColumns"
selected="true" />
<mx:CheckBox id="labelSortableCh"
label="label.sortable"
selected="true" />
<mx:CheckBox id="dataSortableCh"
label="data.sortable"
selected="true" />
</mx:ApplicationControlBar>
<mx:DataGrid id="dataGrid"
sortableColumns="{sortableColumnsCh.selected}"
dataProvider="{arr}">
<mx:columns>
<mx:DataGridColumn dataField="label"
sortable="{labelSortableCh.selected}" />
<mx:DataGridColumn dataField="data"
sortable="{dataSortableCh.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 header has been clicked, you can listen for the headerRelease 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.DataGridEvent;
private function dataGrid_headerRelease(evt:DataGridEvent):void {
var dg:DataGrid = DataGrid(evt.currentTarget);
var column:DataGridColumn = dg.columns[evt.columnIndex];
debug.text += column.dataField + " (sortDescending:" + column.sortDescending + ")" + "\\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}"
headerRelease="dataGrid_headerRelease(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.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
-
Add Widgets (Content Sidebar)
This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.
9 Responses to Toggling sortable columns in a Flex DataGrid control
-
Categories
- Accordion
- AccordionHeader
- ActionScript
- AddChild
- AdvancedDataGrid
- Alert
- alpha
- Animate
- AnimateProperties
- Application
- Application (Spark)
- ArrayCollection
- BarChart
- baseColor
- beta
- beta1
- beta2
- Bitmap
- Bitmap/BitmapData
- BitmapData
- BitmapFill
- BitmapFill (Spark)
- BitmapGraphic
- BitmapImage
- BitmapImage (Spark)
- BitmapImageResizeMode
- Border (Spark)
- BorderContainer (Spark)
- Box
- BuildInfo
- Button
- Button (Spark)
- ButtonBar
- ButtonBar (Spark)
- ByteArray
- Camera
- Charting
- CheckBox
- CheckBox (Spark)
- ClassFactory
- CollectionEvent
- Color
- ColorPicker
- ColorUtil
- ComboBox
- ComboBoxArrowSkin
- Compiler
- Component
- Component (Spark)
- Configuration
- Container
- ContextMenu
- ContextMenuEvent
- ContextMenuItem
- CSSCondition
- CSSSelector
- CSSStyleDeclaration
- CurrencyFormatter
- CursorManager
- Data Binding
- DataGrid
- DataGrid (Spark)
- DataGridColumn
- Date
- DateBase
- DateChooser
- DateField
- DateFormatter
- Debugging
- DefaultComplexItemRenderer
- DefaultTileListEffect
- DropDownList
- DropDownList (Spark)
- DropDownListButtonSkin
- DropDownListSkin
- DropShadowFilter
- E4X
- Effects
- Ellipse
- EmailValidator
- Embed
- Event
- Fade
- FileFilter
- FileReference
- fill
- Filters
- Flash
- Flash Integration
- FlashVars
- Flex 3 SDK
- Flex Builder
- Flex Builder 3
- Flex SDK
- Flex4
- FLVPlayback
- FocusManager
- FontLookup
- Fonts
- Form
- Form (Spark)
- FormHeading (Spark)
- FormItem
- FormItem (Spark)
- Forms
- FTETextField (Spark)
- FullScreen
- FullScreenEvent
- FxAnimateColor
- FxButtonBar
- FxCheckBox
- FXG
- FxHScrollBar
- FxHSlider
- FxList
- FxNumericStepper
- FxRadioButton
- FxRotate3D
- FxScroller
- FxTextArea
- FxTextInput
- FxToggleButton
- FxVScrollBar
- FxVSlider
- getStyleDeclaration()
- GradientEntry
- Graphic (Spark)
- HBox
- HDividedBox
- HGroup (Spark)
- HorizontalLayout
- HorizontalList
- HSBColor (Spark)
- HScrollBar (Spark)
- HSlider
- HSlider (Spark)
- HTML template
- ID3Info
- Image
- Image (Spark)
- ImageSnapshot
- itemRenderer
- JointStyle
- Label
- Label (Spark)
- Legend
- LegendItem
- LigatureLevel
- Line
- LinearGradientStroke
- LineScaleMode
- LinkBar
- LinkButton
- List
- List (Spark)
- Menu
- MenuBar
- Metadata
- MetadataEvent
- Model
- Mouse
- MouseCursor
- MouseEvent
- Move
- Namespace
- NavigatorContent (Spark)
- needsSWF
- NetConnection
- NetStream
- Nightly Builds
- NumberBaseRoundType
- NumberFormatter
- NumberValidator
- NumericCompare
- NumericStepper
- NumericStepper (Spark)
- ObjectProxy
- ObjectUtil
- paddingLeft
- paddingRight
- Panel
- Panel (Spark)
- Parallel
- Path
- PieChart
- PieSeries
- PieSeriesItem
- PopUpAnchor (Spark)
- PopUpButton
- PopUpManager
- ProgrammaticSkin
- ProgressBar
- PropertyChangeEvent
- QName
- RadialGradient
- RadioButton
- RadioButton (Spark)
- RadioButtonGroup
- RadioButtonGroup (Spark)
- Rect
- RegExp
- Regular Expressions
- Repeater
- RichEditableText
- RichText
- RichText (Spark)
- RichTextEditor
- Rotate
- Rotate3D (Spark)
- Scroller (Spark)
- Sequence
- setStyle()
- SimpleText
- SimpleText (Spark)
- skinClass
- Slider
- SliderEvent
- SolidColor
- SolidColorStroke
- Sort
- SortField
- Sound
- SoundEffect
- Spinner (Spark)
- SpriteVisualElement (Spark)
- StageDisplayState
- States
- StringUtil
- StringValidator
- StyleManager
- Styles
- SWFLoader
- SWFObject
- System
- SystemManager
- TabBar
- TabBar (Spark)
- TabNavigator
- TabStopFormat
- Text
- Text Layout Framework (TLF)
- TextArea
- TextArea (Spark)
- TextBox
- TextConverter
- TextEvent
- TextFlow
- TextFlowUtil
- TextFormat
- TextGraphic
- TextInput
- TextInput (Spark)
- TextLayoutFormat
- TextView
- Themes
- TileLayout
- TileList
- TileOrientation
- Timer
- TitleWindow
- TitleWindow (Spark)
- TLF
- ToggleButton (Spark)
- ToggleButtonBar
- ToolTip
- Transition
- Tree
- TruncationOptions
- UIComponent
- UIFTETextField
- Updater
- URLLoader
- URLRequest
- URLUtil
- URLVariables
- ValidationResultEvent
- Validator
- Validators
- VBox
- VDividedBox
- Vector
- VerticalLayout
- VerticalLayout (Spark)
- VGroup (Spark)
- Video
- VideoDisplay
- VideoElement
- VideoElement (Spark)
- VideoEvent
- VideoPlayer (Spark)
- VideoPlayerScrubBar
- ViewStack
- VScrollBar (Spark)
- VSlider
- VSlider (Spark)
- XML
- XMLList
- XMLListCollection
- ZipCodeValidator
- ZipCodeValidatorDomainType
- Zoom
-
Articles
- December 2010
- November 2010
- October 2010
- September 2010
- August 2010
- July 2010
- June 2010
- May 2010
- April 2010
- March 2010
- February 2010
- January 2010
- December 2009
- November 2009
- October 2009
- September 2009
- August 2009
- July 2009
- June 2009
- May 2009
- April 2009
- March 2009
- February 2009
- January 2009
- December 2008
- November 2008
- October 2008
- September 2008
- August 2008
- July 2008
- June 2008
- May 2008
- April 2008
- March 2008
- February 2008
- January 2008
- December 2007
- November 2007
- October 2007
- September 2007
- August 2007
- July 2007
-
Meta


very good!this is very basic sample!
bit bug :)
debug.text = column.dataField ” (sortDescending:” column.sortDescending “)” “n”;
At end, replace “n”; by “\n”;
Alberto,
Thanks for the heads up. The code actually has the ‘\n’ if you download source, but something in the HTML or WordPress template always eats my single backslashes. I doubled up the backslash so now it should appear properly above.
Peter
Hi guys, someone knows why when i start clicking the datagrid header column, i receive two events with the same order? example:
label (sortDescending:false)
label (sortDescending:false)
label (sortDescending:true)
After the 3ยบ click, the order ascending/descending starts to work correctly.
Is it a bug?
thx in advance
Thanks for interesting clause
Hi All.
Just incase, you come across this sample, you will find that Alejandro is talking the truth. For whatever reason the sortDescending property does not accurately reflect the sort order. For a good sample that works and shows the correct sorting order, take a look at http://blog.flexexamples.com/2007/08/23/determining-a-datagridcolumn-objects-current-sort-order/#more-117
It works as expected.
how to sort the data in the datagrid wnen an xml was passed as swap the header coluimn using the selected item in the combobox
Hi Peter,
I want to have some more functionality here. If we make the srtableColumns false, still the sortIcon appears in the datagrid. Can please tell me is it possible for me to this.
regards
Raghava
@raghava,
I’m not sure what you’re seeing, but I only get the sort arrow if the Boolean
sortableproperty to true. Are you changing thesortableorsortableColumnsproperty at runtime?Peter