The DevExpress ASP.NET MVC GridView allows you to move grid columns using drag-and-drop. To move a column, drag the column's header to the desired position. The location in which the dragged column will be inserted after you release the left mouse button is visually indicated by two arrows. By default, the GridView only allows the reordering of columns within their current nesting level. To allow the modification of column nesting using drag and drop, set the SettingsBehavior.ColumnMoveMode to ThroughHierarchy.
By default, when you move a grid column, the grid initiates a callback to re-render the grid layout accordingly. Setting the SettingsBehavior.ProcessColumnMoveOnClient to true allows the grid to re-render itself completely on the client, without sending a callback to the server. In this demo, you can switch between the server and client column moving modes using the Process column moving on client check box. For demonstration purposes, the grid's callback time is intentionally extended.
Local Copy of this Demo
To inspect the source code for this demo on your machine, you must first install our components via the DevExpress Component Installer.
You can open a local copy of this online demo directly from this webpage (if using v20.2.8, 21.1.4 or higher).
The source code files for this demo are installed (by default) in the following directory:
Open CS Solution
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\CS\MVCxGridViewDemos