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.
- Open Visual Studio 2015, click on New Project, select ASP.NET Web Application, name it as “DraggableGrid”.
- Now, click OK button. Select template as “MVC”.
- Now, click OK button. It will create an empty MVC Application.
- Add new class inside Model folder, named “State”.
- 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; }
- }
- }
- 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;
- }
- }
- }
- Add new Action Method inside the HomeController name :”Learn” and call respository and its method.
- public ActionResult Learn()
- {
- return View(StateRepository.GetStates());
- }
- 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>
- 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" />
- 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.
- You need to make little changes _Layout.cshtml. Hence additional jQuery and CSS should be loaded.
- Proceed, as shown below.
- @*@Scripts.Render("~/bundles/jquery")
- @Scripts.Render("~/bundles/bootstrap")
- @RenderSection("scripts", required: false)*@
- Add your Learn Action method in menu bar.
- <li>@Html.ActionLink("Learn", "Learn", "Home")</li>
- 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>
- 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>
- 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>
- Now, we are done. Just press F5 and click Learn tab in your home screen.
- Now, select single or multiple rows in the grid. Drag & drop within the grid anywhere.
- Click Next and Previous button to do pagination and click header of Grid to sort.