devexpress-examples/how-to-reorder-aspxgridview-rows-using-buttons-or-drag-and-drop-e4582

Use buttons and jQuery drag-and-drop functionality to reorder rows in ASPxGridView.

Grid View for ASP.NET Web Forms - Reorder Grid Rows Using Buttons and Drag-and-Drop

This example demonstrates how to use buttons and jQuery drag-and-drop functionality to reorder rows in ASPxGridView.

Set up the grid and create an invisible column that stores row order indices. Sort the grid by this column and disable sorting at the control level.

<dx:ASPxGridView ID="gvProducts" runat="server" ...>
    <Columns>
        ...
        <dx:GridViewDataTextColumn FieldName="DisplayOrder" Visible="false" SortIndex="0"
            SortOrder="Ascending" />
    </Columns>
    <SettingsBehavior AllowSort="false" ... />
    ...
</dx:ASPxGridView>

When a user clicks the button or drags and drops a row, the grid sends a callback to the server, sets the invisible column value to a new row order index, and updates the grid data.

Files to Look At

• Default.aspx (VB: Default.aspx)
• Default.aspx.cs (VB: Default.aspx.vb)

Documentation

• Draggable
• Droppable
• ASPxGridView.SettingsBehavior.AllowSort
• GridViewDataColumn.SortIndex
• GridViewDataColumn.SortOrder

More Examples

• Grid View for ASP.NET Web Forms - How to Use jQuery to Drag and Drop Items from One Grid to Another
• TreeList for ASP.NET Web Forms - How to Reorder ASPxTreeList Sibling Nodes Using Buttons or Drag-and-Drop
• Grid View for ASP.NET Web Forms - How to Move Up or Down a Grid Row Using External Buttons