Grid View for ASP.NET MVC - Reorder grid rows using buttons and drag-and-drop

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

Overview

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.

@Html.DevExpress().GridView(settings => {
    settings.Name = "gridView";
    settings.SettingsBehavior.AllowSort = false;
    settings.Columns.Add(column => {
        column.FieldName = "DisplayIndex";
        column.Visible = false;
        column.SortOrder = ColumnSortOrder.Ascending;
    });
}).Bind(Model).GetHtml()

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 grid data.

To enable jQuery drag-and-drop functionality, add a jQuery UI component to your project. Use one of the following approaches:

Add the ThirdParty attribute to the resources section and add a reference to the jQuery UI library to the head section after extension scripts.

<resources>
    <add type="ThirdParty" />
</resources>

<head>
    <title>@ViewBag.Title</title>
    @Html.DevExpress().GetStyleSheets(
        new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
        new StyleSheet { ExtensionSuite = ExtensionSuite.Editors },
        new StyleSheet { ExtensionSuite = ExtensionSuite.GridView }
    )
    @Html.DevExpress().GetScripts(
        new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
        new Script { ExtensionSuite = ExtensionSuite.Editors },
        new Script { ExtensionSuite = ExtensionSuite.GridView }
    )
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"
        type="text/javascript"></script>
</head>

Make the resources section empty and add the jQuery UI libraries before extension scripts.

<resources>
</resources>

<head>
    <title>@ViewBag.Title</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"
        type="text/javascript"></script>
    @Html.DevExpress().GetStyleSheets(
        new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
        new StyleSheet { ExtensionSuite = ExtensionSuite.Editors },
        new StyleSheet { ExtensionSuite = ExtensionSuite.GridView }
    )
    @Html.DevExpress().GetScripts(
        new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
        new Script { ExtensionSuite = ExtensionSuite.Editors },
        new Script { ExtensionSuite = ExtensionSuite.GridView }
    )
</head>

Files to Review

HomeController.cs (VB: HomeController.vb)
DBHelper.cs (VB: DBHelper.vb)
_GridViewPartial.cshtml
Index.cshtml

Documentation

More Examples

Grid View for ASP.NET Web Forms - Reorder grid rows using buttons and drag-and-drop

Does this example address your development requirements/objectives?