Multi Select And Multi Draggable Rows Within Grid In ASP.NET MVC

We will look into how to make your tabular data in cshtml file into a  Grid and make that grid's rows multi selectable and multi draggable within the grid with the help of jQuery UI and jQuery datatables plug-in.

We will create a solution in Visual Studio 2015 step by step.

1. Open Visual Studio 2015, click on New Project, select ASP.NET Web Application, name it as “DraggableGrid”.
   
   
   
   
2. Now, click OK button. Select template as “MVC”.
   
   
   
   
3. Now, click OK button. It will create an empty MVC Application.
   
   
4. Add new class inside Model folder, named “State”.
   
   
   
   
5. Add the properties given below inside the class.
   

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Web;
   
   namespace DraggableGrid.Models
   {
       public class State
       {
           public int StateID { get; set; }
           public string StateName { get; set; }
           public string StateCapital { get; set; }
           public string Population { get; set; }
       }
   }

6. Add new repository class inside model folder named “StateRepository”.
   

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Web;
   
   namespace DraggableGrid.Models
   {
       public class StateRepository
       {
           public static IList<State> states = null;
   
           public static IList<State> GetStates()
           {
               if(states == null)
               {
                   states = new List<State>();
                   states.Add(new State() { StateID = 1, StateName = "Alabama", StateCapital = "Montgomery", City = "Birmingham" });
                   states.Add(new State() { StateID = 2, StateName = "Arizona", StateCapital = "Phoenix", City = "Phoenix" });
                   states.Add(new State() { StateID = 3, StateName = "Alaska", StateCapital = "Juneau", City = "Juneau" });
                   states.Add(new State() { StateID = 4, StateName = "California", StateCapital = "Sacramento", City = "Los Angeles" });
                   states.Add(new State() { StateID = 4, StateName = "Colorado", StateCapital = "Denver", City = "Denver" });
                   states.Add(new State() { StateID = 5, StateName = "Connecticut", StateCapital = "Hartford", City = "Bridgeport" });
                   states.Add(new State() { StateID = 6, StateName = "Delaware", StateCapital = "Dover", City = "Wilmington" });
                   states.Add(new State() { StateID = 7, StateName = "Florida", StateCapital = "Tallahassee", City = "Jacksonville" });
                   states.Add(new State() { StateID = 8, StateName = "Georgia", StateCapital = "Atlanta", City = "Atlanta" });
                   states.Add(new State() { StateID = 9, StateName = "Illinois", StateCapital = "Springfield", City = "Chicago" });
                   states.Add(new State() { StateID = 10, StateName = "Indiana", StateCapital = "Indianapolis", City = "Indianapolis" });
                   states.Add(new State() { StateID = 11, StateName = "Kansas", StateCapital = "Topeka", City = "Wichita" });
                   states.Add(new State() { StateID = 12, StateName = "Kentucky", StateCapital = "Frankfort", City = "New Orleans" });
                   states.Add(new State() { StateID = 13, StateName = "Maryland", StateCapital = "Annapolis", City = "Annapolis" });
                   states.Add(new State() { StateID = 14, StateName = "Massachusetts", StateCapital = "Boston", City = "Boston" });
                   states.Add(new State() { StateID = 15, StateName = "Oklahoma", StateCapital = "Oklahoma City", City = "Oklahoma City" });
               }
               return states;
           }
       }
   }

7. Add new Action Method inside the HomeController name :”Learn” and call respository and its method.
   

   public ActionResult Learn()
          {
              return View(StateRepository.GetStates());
          }

8. Right click on Action method and add new view for Learn action method.
   
   
   
   Learn.cshtml file will look, as shown below.
   

   @model IEnumerable<DraggableGrid.Models.State>
   
   @{
       ViewBag.Title = "Learn";
   }
   
   <h2>Learn</h2>
   
   <p>
       @Html.ActionLink("Create New", "Create")
   </p>
   <table class="table">
       <tr>
           <th>
               @Html.DisplayNameFor(model => model.StateName)
           </th>
           <th>
               @Html.DisplayNameFor(model => model.StateCapital)
           </th>
           <th>
               @Html.DisplayNameFor(model => model.City)
           </th>
           <th></th>
       </tr>
   
   @foreach (var item in Model) {
       <tr>
           <td>
               @Html.DisplayFor(modelItem => item.StateName)
           </td>
           <td>
               @Html.DisplayFor(modelItem => item.StateCapital)
           </td>
           <td>
               @Html.DisplayFor(modelItem => item.City)
           </td>
           <td>
               @Html.ActionLink("Edit", "Edit", new { id=item.StateID }) |
               @Html.ActionLink("Details", "Details", new { id=item.StateID }) |
               @Html.ActionLink("Delete", "Delete", new { id=item.StateID })
           </td>
       </tr>
   }
   
   </table>

9. Add jQuery ui and jQquery datatables plugin and give the reference in cshtml file.
   

   <script src="~/Scripts/jquery-1.10.2.min.js"></script>
   <link href="~/Content/jquery-ui.css" rel="stylesheet" />
   <script src="~/Scripts/jquery-ui.min.js"></script>
   <script src="~/Scripts/jquery.dataTables.min.js"></script>
   <link href="~/Content/jquery.dataTables.min.css" rel="stylesheet" />

10. When you add jQuery datatables plugin, then you will have to add a few imges also, which helps you to make your grid sortable. These images will be available in jQquery datatables plugin.
    
    
    
11. You need to make little changes _Layout.cshtml. Hence additional jQuery and CSS should be loaded.
    
    
1. Proceed, as shown below.
   

   @*@Scripts.Render("~/bundles/jquery")
   @Scripts.Render("~/bundles/bootstrap")
   @RenderSection("scripts", required: false)*@

2. Add your Learn Action method in menu bar.
   

   <li>@Html.ActionLink("Learn", "Learn", "Home")</li>

12. Add jQuery code given below in Learn.cshtml.
    

    <script type="text/javascript">
        $(document).ready(function () {
            $("#example").dataTable({
                "stripeClasses": [],
                aLengthMenu: [10],
                "pagingType": "simple"
            });
    
        $('#example tbody').on('click', 'tr', function () {
            $(this).toggleClass('selected');
        });
    
        $("#example tbody").sortable({
            revert: true,
            helper: function (e, item) {
                if (!item.hasClass('selected')) item.addClass('selected');
                var elements = $('.selected').not('.ui-sortable-placeholder').clone();
                var helper = $('<table />');
                item.siblings('.selected').addClass('hidden');
                return helper.append(elements);
            },
            start: function (e, ui) {
                var elements = ui.item.siblings('.selected.hidden').not('.ui-sortable-placeholder');
                ui.item.data('items', elements);
            },
            update: function (e, ui) {
                ui.item.after(ui.item.data("items"));
            },
            stop: function (e, ui) {
                ui.item.siblings('.selected').removeClass('hidden');
                $('tr.selected').removeClass('selected');
            }
        });
    });
    </script>

13. Add a few style changes as well in style tag in your Learn page.
    

    <style>
        table {
            border-collapse: collapse;
        }
        table thead tr {
            margin-left: 20px;
        }
        table tbody tr {
            border: 1px solid #ccc;
        }
        tr-selecting {
            background: #FECA40;
        }
        .selected {
            background: #ff6a00;
            color: white;
            cursor: move;
        }
        .dataTables_filter {
            display: none;
        }
        .dataTables_length {
            display: none !important;
        }
        .hidden {
            display: none;
        }
    </style>

14. After making all the changes in Learn.cshtml file, your Learn.cshtml will look, as shown below.
    

    @model IEnumerable<DraggableGrid.Models.State>
    
    <hr />
    <br />
    <style>
        table {
            border-collapse: collapse;
        }
        table thead tr {
            margin-left: 20px;
        }
        table tbody tr {
            border: 1px solid #ccc;
        }
        tr-selecting {
            background: #FECA40;
        }
        .selected {
            background: #ff6a00;
            color: white;
            cursor: move;
        }
        .dataTables_filter {
            display: none;
        }
        .dataTables_length {
            display: none !important;
        }
        .hidden {
            display: none;
        }
    </style>
    
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <link href="~/Content/jquery-ui.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-ui.min.js"></script>
    <script src="~/Scripts/jquery.dataTables.min.js"></script>
    <link href="~/Content/jquery.dataTables.min.css" rel="stylesheet" />
    
    <script type="text/javascript">
        $(document).ready(function () {
            $("#example").dataTable({
                "stripeClasses": [],
                aLengthMenu: [10],
                "pagingType": "simple"
            });
    
        $('#example tbody').on('click', 'tr', function () {
            $(this).toggleClass('selected');
        });
    
        $("#example tbody").sortable({
            revert: true,
            helper: function (e, item) {
                if (!item.hasClass('selected')) item.addClass('selected');
                var elements = $('.selected').not('.ui-sortable-placeholder').clone();
                var helper = $('<table />');
                item.siblings('.selected').addClass('hidden');
                return helper.append(elements);
            },
            start: function (e, ui) {
                var elements = ui.item.siblings('.selected.hidden').not('.ui-sortable-placeholder');
                ui.item.data('items', elements);
            },
            update: function (e, ui) {
                ui.item.after(ui.item.data("items"));
            },
            stop: function (e, ui) {
                ui.item.siblings('.selected').removeClass('hidden');
                $('tr.selected').removeClass('selected');
            }
        });
    });
    </script>
    
    <table id="example" class="table">
        <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.StateID)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.StateName)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.StateCapital)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.City)
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.StateID)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.StateName)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.StateCapital)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.City)
                    </td>
                </tr>
            }
        </tbody>
    </table>

15. Now, we are done. Just press F5 and click Learn tab in your home screen.
    



16. Now, select single or multiple rows in the grid. Drag & drop within the grid anywhere.
    



17. Click Next and Previous button to do pagination and click header of Grid to sort.