How to dynamically reorder columns in a DataGrid in 1 line of code SQLite Sorcerer v1.5 is available
Oct 03

Here is a new component that I wanted to share. It extends the mx:DataGrid and its goal is to keep a column "fixed" in the DataGrid. This, whatever the dataProvider is or changes and even when columns are dragged or new ones are added. This is maybe specific to my own need but you never know ;)

My problem:

In my application SQLite Sorcerer, I have 2 main DataGrids:

  1. one showing the table definitions with DataGridColumns defined in MXML, the structure never changes, only data,
  2. one showing the data of selected tables with columns that are regenerated each time a table is selected.

For each, I want to define a column containing the same itemRenderer with buttons to edit or delete the selected item of the datagrid. And I don’t want that this column is removed when the dataProvider changes. I also want that the column can’t be moved, kept stuck at the very right of the datagrid.

Here is the demo :

  • Play with properties described below
  • Try to drag and drop a column before or after the fixed column
  • Try to add a new column before or after the fixed column

 

The properties

  • fixedColumn: define the DataGridColumn to fix in your datagrid (headerText, width, itemRenderer…
  • showFixedColumn: show or hide the fixed column
  • fixedColumnPosition: fix the column at the very right or left. When "off", the column can lose its position

The overrides

In order to keep the fixed column at its position, I had to override the following:

  • set column: to manipulate the array of column before the super method is called (ensuring that the fixed column is at the first or last position according to fixedColumnPosition).
  • mx_internal function shiftColumns: here is a very interesting function that is unfortunately not documented. It is called when you drag a column to a new position and you can use it to reorder columns dynamically. I modified the function to ensure that it is not possible the drop a column before or after a fixed column.

Suggestion of use and advantages

  • Like with the 1st example, you can define your column with renderers to manipulate your items and be sure that it will always be at the same place.
  • You can show the column or even change the renderer easily depending on a State or any other parameter.

Licence:

This component is free for use, modification and distribution under the following condition:

Just mention the name and the url of the author in a part of your product that is visible to the user (about section, documentation…).

You can avoid this constrain with a donation ;).

The icons used in the demo are from http://www.pinvoke.com.

Download DataGridWithFixedColumn Version 1.0

Downloaded a total of 697 times

I hope this can be helpful. Have fun !

 

 

Information:

Version History:

Version 1.0.1:

- Fixed issue generating an error when columns is empty

Version 1.0:

- First release

Known issues:

 

 

Related posts

Written by Arnaud
Creative Commons License
Tags: , ,

Share/Save/Bookmark

Help me improve my blog by rating this post or sending a comment.

not goodquite goodgoodvery goodexcellent (1 votes, average: 5 out of 5)
Loading ... Loading ...


Comments