Move Columns

• Oct 13, 2022
• 4 minutes to read

Column Drag and Drop

ASPxGridView allows users to drag columns to reorder them within the grid.

You can disable the column drag-and-drop functionality. To do this, set the ASPxGridViewBehaviorSettings.AllowDragDrop property to false.

ASPX

<dx:ASPxGridView ID="ASPxGridView1" runat="server">
    ...
    <SettingsBehavior AllowDragDrop="false" />
    ...
</dx:ASPxGridView>

You can also enable or disable drag and drop for a particular grid column regardless of the global setting using the column’s Settings.AllowDragDrop property (see the markup below).

ASPX

<dx:ASPxGridView ID="ASPxGridView1" runat="server" DataSourceID="SqlDataSource1" KeyFieldName="ProductID">
    ...
    <SettingsBehavior AllowDragDrop="false" />
    <Columns>
        <dx:GridViewDataTextColumn FieldName="ProductName" VisibleIndex="0">               
        </dx:GridViewDataTextColumn>
        <dx:GridViewDataTextColumn FieldName="QuantityPerUnit" VisibleIndex="1">
            <Settings AllowDragDrop="True" />
        </dx:GridViewDataTextColumn>
        <dx:GridViewDataTextColumn FieldName="UnitPrice" VisibleIndex="2">
            <Settings AllowDragDrop="Default" />
        </dx:GridViewDataTextColumn>
        <dx:GridViewDataTextColumn FieldName="ProductID" VisibleIndex="3" ReadOnly="True">
            <EditFormSettings Visible="False" />
        </dx:GridViewDataTextColumn>
    </Columns>
    ...
</dx:ASPxGridView>

Note

The column drag-and-drop functionality must be enabled for a 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. This property is set to GridColumnMoveMode.AmongSiblings (the default setting). In this mode, a 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 users to rearrange grid columns while preserving their logical grouping.

If you set the ColumnMoveMode property to GridColumnMoveMode.ThroughHierarchy, it activates the banded layout edit mode, in which a user is allowed to move columns and bands between parents and hierarchy levels. Use this mode to allow users to manually build complex column layouts.

Move Columns Programmatically

Server-Side API

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.

C#

GridViewDataTextColumn col = ASPxGridView1.Columns["UnitPrice"] 
    as GridViewDataTextColumn;
col.VisibleIndex = 0;

VB.NET

Dim col As GridViewDataTextColumn = TryCast(ASPxGridView1.Columns("UnitPrice"), GridViewDataTextColumn)
col.VisibleIndex = 0

The column hierarchy 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 configures the nested columns to move a grid column between hierarchy levels.

C#

GridViewDataColumn ParentColumn = Grid.Columns["Address"] as GridViewDataColumn;
GridViewDataColumn ChildColumn = ParentColumn.Columns["Price"] as GridViewDataColumn;
ParentColumn.Columns.Remove(ChildColumn);
Grid.Columns.Add(ChildColumn);

VB.NET

Dim ParentColumn As GridViewDataColumn = TryCast(Grid.Columns("Address"), GridViewDataColumn)
Dim ChildColumn As GridViewDataColumn = TryCast(ParentColumn.Columns("Price"), GridViewDataColumn)
ParentColumn.Columns.Remove(ChildColumn)
Grid.Columns.Add(ChildColumn)

Client-Side API

On the client side, you can use the ASPxClientGridView.MoveColumn method to programmatically rearrange grid columns. 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.

JS

grid.MoveColumn("Category.CategoryName", 0, ASPxClientGridColumnMovingTargetPosition.Top);

This code sample moves a column to the leftmost position. The ASPxClientGridColumnMovingTargetPosition.Top value passed as the targetPosition parameter specifies that the moved column should be placed on top of the target column in the column hierarchy (the moved column becomes the target column’s parent). Note that if the banded layout edit mode is not activated (the ASPxGridViewBehaviorSettings.ColumnMoveMode property is not set to GridColumnMoveMode.ThroughHierarchy), the ASPxClientGridColumnMovingTargetPosition.Top value is ignored.

Refer to the following topic for details on how to store the grid’s column layout information: Save and Restore Layout.

Client-Side Processing

When a user drags a column, the client grid initiates a callback to re-render the grid’s layout on the server side (the default setting). However, ASPxGridView also has a client-side processing mode that re-renders the grid on the client without initiating a callback. This feature increases the grid’s responsiveness and reduces the amount of markup generated on the server during the ASPxGridView control’s life cycle. To activate this 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:

• Moving a column to/from the Group Panel.
• Moving a column to/from the Customization Window.