TreeGrid directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps
a suite of UI Components for development of web apps
Reorder permissions:
Advanced User Interface Controls and Components
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.
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.
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:
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.
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:
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.