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.

View MXML

<?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:

View MXML

<?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.

9 thoughts on “Toggling sortable columns in a Flex DataGrid control

  1. bit bug :)

    debug.text = column.dataField ” (sortDescending:” column.sortDescending “)” “n”;

    At end, replace “n”; by “\n”;

  2. 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

  3. 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

  4. 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

  5. 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

    1. @raghava,

      I’m not sure what you’re seeing, but I only get the sort arrow if the Boolean sortable property to true. Are you changing the sortable or sortableColumns property at runtime?

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
       
          <mx:DataGrid>
              <mx:columns>
                  <mx:DataGridColumn dataField="c1" headerText="sortable=true" sortable="true" width="150" />
                  <mx:DataGridColumn dataField="c2" headerText="sortable=false" sortable="false" width="150" />
              </mx:columns>
              <mx:dataProvider>
                  <mx:ArrayCollection>
                      <mx:Object c1="1.One" c2="1.Two" />
                      <mx:Object c1="2.One" c2="2.Two" />
                      <mx:Object c1="3.One" c2="3.Two" />
                      <mx:Object c1="4.One" c2="4.Two" />
                      <mx:Object c1="5.One" c2="5.Two" />
                      <mx:Object c1="6.One" c2="6.Two" />
                      <mx:Object c1="7.One" c2="7.Two" />
                      <mx:Object c1="8.One" c2="8.Two" />
                      <mx:Object c1="9.One" c2="9.Two" />
                  </mx:ArrayCollection>
              </mx:dataProvider>
          </mx:DataGrid>
       
      </mx:Application>

      Peter

Comments are closed.