Note that the column drag-and-drop functionality must be enabled for an end-user to be able to group grid data by dragging column headers to the Group Panel.
Banded Layout Customization
The ASPxGridViewBehaviorSettings.ColumnMoveMode property determines how column drag and drop affects banded column layouts. By default, this property is set to GridColumnMoveMode.AmongSiblings. In this mode, an end-user can only reorder columns and bands within their current parent bands, and when a parent band is moved, it is moved along with all its children. This mode allows you to provide a way to rearrange grid columns while preserving their logical grouping.
Setting the ColumnMoveMode property to GridColumnMoveMode.ThroughHierarchy activates the banded layout editing mode, in which an end-user is allowed to move columns and bands between parents and hierarchy levels. Use this mode to provide your end-users with a way to manually build complex column layouts.
Moving Columns Programmatically
On the server side, the position in which a column is displayed within the current hierarchy level is defined by the column's WebColumnBase.VisibleIndex property. If the VisibleIndex property is set to -1, the column is hidden from the view. The code sample below demonstrates how to move a column to the leftmost position by setting its VisibleIndex to zero.
GridViewDataTextColumn col = ASPxGridView1.Columns["UnitPrice"]
col.VisibleIndex = 0;
Dim col As GridViewDataTextColumn = TryCast(ASPxGridView1.Columns("UnitPrice"), GridViewDataTextColumn)
col.VisibleIndex = 0
The hierarchy of columns in a banded column layout is determined by the nesting of GridViewColumn objects. A parent column stores its child columns in the GridViewColumn.Columns collection property. The code sample below demonstrates how to programmatically move a grid column between hierarchy levels by manipulating the nesting of column objects.
GridViewDataColumn ParentColumn = Grid.Columns["Address"] as GridViewDataColumn;
GridViewDataColumn ChildColumn = ParentColumn.Columns["Price"] as GridViewDataColumn;
Dim ParentColumn As GridViewDataColumn = TryCast(Grid.Columns("Address"), GridViewDataColumn)
Dim ChildColumn As GridViewDataColumn = TryCast(ParentColumn.Columns("Price"), GridViewDataColumn)
On the client side, it is possible to programmatically rearrange grid columns using the ASPxClientGridView.MoveColumn method. Overloads of this method cover a wide range of use case scenarios including grouping and moving columns through hierarchy levels. The code sample below demonstrates a possible application of this method.
By default, when an end-user moves a column using drag and drop, the client grid initiates a callback to re-render the grid's layout on the server side. However, the ASPxGridView provides the client column move processing mode allowing the grid to re-render itself completely on the client without initiating a callback. This feature increases the grid's responsiveness and reduces the amount of markup required to be produced on the server throughout the ASPxGridView control's life cycle. To activate the client column move processing mode, set the ASPxGridViewBehaviorSettings.ProcessColumnMoveOnClient property to true.
For a column move operation to be processed on the client side, the data already available for the client Grid View control must be sufficient to re-render the grid layout. Column move operations requiring any additional data to be obtained from the server cannot be processed on the client-side. As a result, these operations initiate a callback to re-render the grid layout on the server. The client-side processing of column move operations does not apply to the following operations.