[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
   Getting Started
  [Collapse]Grid View
   [Expand]Product Information
    Getting Started
    [Expand]Binding to Data
    [Collapse]Data Representation Basics
       Data Columns
       Command Columns
      [Expand]Unbound Columns
       Fixed Columns
       Accessing Columns
       Creating Columns and Binding Them to Data Fields
       Column Moving
       Column Resizing
     [Expand]Customization Window
     [Expand]Context Menu Overview
      Customization Dialog
    [Expand]Focus and Navigation
    [Expand]Data Editing
    [Expand]Data Shaping and Manipulation
    [Expand]Data Formatting
    [Expand]Master-Detail Relationship
     Appearance Customization
    ASPxGridView Designer
   [Expand]Visual Elements
   [Expand]Member Tables
  [Expand]Tree List
  [Expand]Card View
  [Expand]Chart Control
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Vertical Grid
  [Expand]Data Editors
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Controls
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Column Moving

Expanded Column Drag and Drop

ASPxGridView provides the drag-and-drop functionality allowing your end-users to change the order in which columns are displayed within the grid.

The column drag-and-drop functionality is enabled by default. To disable it, set the ASPxGridViewBehaviorSettings.AllowDragDrop property to false.

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 as shown below.


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.

Expanded 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.

Expanded Moving 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.

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.

Client-Side API

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.

In this code sample, a column is moved 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 (i.e., the moved column should become the target column's parent). Note that if the banded layout editing mode is not activated (the ASPxGridViewBehaviorSettings.ColumnMoveMode property is not set to GridColumnMoveMode.ThroughHierarchy), the ASPxClientGridColumnMovingTargetPosition.Top value will be ignored.

To learn how to store the grid's column layout information, refer to the Save and Restore Layout document.

Expanded Client-Side Processing

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.

Expanded See Also

Is this topic helpful?​​​​​​​