This example demonstrates how to use buttons and jQuery drag-and-drop functionality to reorder grid rows.
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
ThirdPartyattribute to theresourcessection and add a reference to the jQuery UI library to theheadsection 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
resourcessection 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>