Drag and Drop with DevExpress MVC Controls



Recently, I was working on a project using DevExpress MVC Extensions, and I wanted to add drag and drop functionality within a FormLayout Control for a list view. So, user can add/remove or drag & drop to re-arrange the <li> elements, then get the final order after each updated arrangement. Since the functionality is not already built-into the DevExpress control, I decided to go with the existing open source library I was using, jQuery-UI.

Note: The code in this article uses DevExpress, Bootstrap, and jQuery-ui library.

Feature Overview

The user can add new items to the list using the text box and the “Add” button, rearrange the listed items by dragging & dropping, remove the item by clicking (x) button on the right of the item, and during all these events, the Display List items gets updated.

Note: Add button is disabled if the Name textbox is empty. This prevents empty items being added to the list.

See the image:

Using the Code

Note: For the complete Index.cshtml sample code, see the attached file.

The first step is to create a FormLayout using Razor code. Then add the jQuery-ui’s sortable functionality on the <ul> element.

  1. Create the FormLayout control in the Index.cshtml:

    // FormLayout control from DevExpress
    @Html.DevExpress().FormLayout(formLayoutSettings =>
 formLayoutSettings.Name = "mainForm";
 formLayoutSettings.Width = 
      System.Web.UI.WebControls.Unit.Percentage(50); // set the width to 50%
 // Display List Items Group
 formLayoutSettings.Items.AddGroupItem(listItemsSettings =>
 listItemsSettings.Caption = "Display List Items";
 listItemsSettings.Items.Add(i =>
 i.ShowCaption = DefaultBoolean.False;
 i.SetNestedContent(() =>
 // every time new item is added/removed or re-ordered, 
      // this display <p> will get updated
 ViewContext.Writer.Write("<p id='listItems'></p>");
 // Input Group
 formLayoutSettings.Items.AddGroupItem(inputGroupSettings =>
 inputGroupSettings.Caption = "Input";
 inputGroupSettings.Items.Add(i =>
 i.ShowCaption = DefaultBoolean.False;
 i.SetNestedContent(() =>
 // puts some padding for the layout
 ViewContext.Writer.Write("<table><tr><td style=\"padding-right:5px;\">");
 // text box for list item name
 Html.DevExpress().TextBox(tbs =>
 tbs.Name = "listItemTextBox";
 tbs.Properties.Caption = "Name";
 tbs.Properties.ClientSideEvents.KeyUp = 
      "OnlistItemTextBoxKeyUp"; // checks when to enable/disable Add button
 Html.DevExpress().Button(bs =>
 bs.Name = "addButton";
 bs.Text = "Add";
 bs.ClientSideEvents.Click = "OnAddButtonClick";
 bs.ClientEnabled = false; // by default or initial load 
      // keeps the button disabled
 ViewContext.Writer.Write("<br />");
 // List items can be re-arranged, deleted from this <ul> element
 ViewContext.Writer.Write("<h5><strong>List Items:</strong></h5>
      <div style='width:100%; height:150px; overflow:auto; border:solid thin;'>
      <ul id='ulContent'></ul></div>");

  2. Next, add some CSS for the List items layout:
    @* Custom style used for sortable <ul> element's content for draggable 
    <li> elements, and remove button *@
 #ulContent {
 list-style-type: none; /*removes the default bullet point*/
 margin: 0;
 padding: 0;
 #ulContent li { /* makes the room for adding draggable icon on the left */
 margin: 0 3px 3px 3px;
 display: list-item;
 padding-left: 1.5em;
 #ulContent li span { /* aligns the span properly */
 display: inline-block;
 margin-left: -1.3em;

  3. Now, add the JavaScript to handle the drag & drop event, update the display view after each remove/add/re-arrangement of the list items.
     $(document).ready(function () {
 $(function () {
 update: function (event, ui) {
 function OnRemoveListItem(buttonElement) {
 function OnlistItemTextBoxKeyUp(s, e) {
 if (s.GetText().trim() == "") {
 } else {
 function OnAddButtonClick(s, e) {
 $('#ulContent').append("<li class='ui-state-default'>
      <span class='ui-icon ui-icon-arrowthick-2-n-s' style='align-content:center'></span>" + 
      listItemTextBox.GetText() + "<span role='button' onclick='OnRemoveListItem($(this))' 
 class='ui-icon ui-icon-circlesmall-close' style='float:right'></span></li>");
 function updateDisplayLabel() {
 var listItemsString = "";
 $("#ulContent li").each(function (idx, li) {
 listItemsString = listItemsString + " <" + $(li).text() + ">";
 $("#listItems").text(" " + listItemsString);


  • 9th July, 2017 – First version