Advanced User Interface Controls and Components

Column Reorder in Tree Grid for AngularJS

Created: 10 April 2015

AngularJS Tree Grid directive offers supports for column reordering. In following sections of this article, you will learn how to drag and drop columns and reorder them during run-time. Different ways to control which column is draggable and where can be dropped is also presented. The demonstration below shows how this looks like in action.

TreeGrid directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps

Reorder permissions:

Reordering of columns by default is disabled. To enable it, we need to set the allowColumnReorder attribute to true. This allows you to change the position for all columns dynamically during run-time.

<iui-treegrid name="{{gridName}}" columns="columns" rows="rows" allow-column-reorder="true"></iui-treegrid>

As it is shown in demonstration above, a column can be dragged by left-clicking on its header and then moving the mouse cursor while holding the left mouse button over other column header. During this process, a tooltip shows information about which column is dragged, and position markers that display at which position the column will be dropped. When left mouse button is released, the column will be dropped at target position. In this way, you can dynamically reorder columns.

Column Reorder Permissions

In some case, we may need to prevent some column from changing its position, while allowing it for other columns. Each column object has two fields that determine reordering operation:

  • allowDrag – a field in column object which determines whether specified column can be moved
  • allowDrop – a field in column object which determines whether other columns can drop over specified column

By setting the allowDrag field value to false, a specified column cannot be dragged and moved. In similar way, by setting the allowDrop field value to false, the specified column cannot accept other columns to be dropped over their header.

This gives you ways to create specific conditions on when and how columns can be reordered.

Column Reorder Events

Furthermore, you can add more permissions by handling the events that are fired during drag drop operation of columns. Whenever a column changes its position dynamically, two events are fired:

  • columnPoschanging – occurs before column position is changed
  • columnPoschanged – occurs after column position is changed

The event objects carried within these events contains references to the source and target columns. By using these objects, you can set custom conditions on how reorder operations are executed.

For example, by adding a handler for columnPoschanging event, you can set a custom condition by which, you can determine whether to cancel or not the reordering operation:

$scope.onColumnPosChanging = function(e){

return false;


<iui-treegrid name="{{gridName}}" columns="columns" rows="rows" allow-column-reorder="true" column-poschanging="onColumnPosChanging(e)"></iui-treegrid>

In above code example, by returning false without setting any condition, all reorder operations are cancelled.

Did you Like this Article?

Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.