Post
Ask Question

Integrating Kendo Sortable In Grid

Introduction

In this article, I am going to discuss how to integrate the Kendo Sortable control in the Grid so that we can drag and drop the records within a Grid. 

Remote Data Source for Kendo Grid

I am going to use the API response given below to construct my remote data source for Kendo Grid which was created in my previous article.

API - http://github-ci-staging.azurewebsites.net/api/Technologies/TechnologiesList

Type - GET.

Testing the APIs, using POSTMAN.

JQuery
Figure 1

Create a new HTML page. In my case, I named it KendoSortableGrid.cshtml.

KendoSortableGrid.cshtml 

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <base href="http://demos.telerik.com/kendo-ui/sortable/integration-grid">  
  5.     <style>  
  6.         html {  
  7.             font-size: 14px;  
  8.             font-family: Arial, Helvetica, sans-serif;  
  9.         }  
  10.     </style>  
  11.     <title></title>  
  12.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common-material.min.css" />  
  13.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.material.min.css" />  
  14.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.material.mobile.min.css" />  
  15.   
  16.     <script src="https://kendo.cdn.telerik.com/2017.3.913/js/jquery.min.js"></script>  
  17.     <script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>  
  18.   
  19.   
  20. </head>  
  21. <body>  
  22.   
  23.   
  24.     <div id="example">  
  25.         <div id="grid"></div>  
  26.   
  27.         <script>  
  28.                 $(document).ready(function() {  
  29.   
  30.                   
  31.                     var grid = $("#grid").kendoGrid({  
  32.                         dataSource: {  
  33.                             type: "json",  
  34.                             transport: {  
  35.                                 read: "http://github-ci-staging.azurewebsites.net/api/Technologies/TechnologiesList"  
  36.                             },    
  37.                             schema: {  
  38.                                 model: {  
  39.                                     fields: {  
  40.                                         value: { type: "number" },  
  41.                                         text: { type: "string" },  
  42.   
  43.                                     }  
  44.                                 }  
  45.                             },  
  46.   
  47.                         },  
  48.                         scrollable: true,  
  49.                         columns: [  
  50.   
  51.                             { field: "value", title: "S No", width: "130px" },  
  52.                             { field: "text", title: "Technology", width: "130px" },  
  53.   
  54.                         ]  
  55.                     }).data("kendoGrid");  
  56.   
  57.  });  
  58.         </script>  
  59.   
  60.     </div>  
  61.   
  62.   
  63. </body>  
  64. </html>  

From the code given above, it is obvious that we have constructed a data source for the Kendo Grid using our API, i.e., http://github-ci-staging.azurewebsites.net/api/Technologies/TechnologiesList.

Kendo Grid in Browser

JQuery
Figure 2

Kendo Sortable

Kendo Sortable makes the DOM element sortable by drag and drop with a mouse or a finger in mobile device.

Integrating Kendo Sortable in Kendo Grid

KendoSortableGrid.cshtml

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <base href="http://demos.telerik.com/kendo-ui/sortable/integration-grid">  
  5.     <style>  
  6.         html {  
  7.             font-size: 14px;  
  8.             font-family: Arial, Helvetica, sans-serif;  
  9.         }  
  10.     </style>  
  11.     <title></title>  
  12.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common-material.min.css" />  
  13.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.material.min.css" />  
  14.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.material.mobile.min.css" />  
  15.   
  16.     <script src="https://kendo.cdn.telerik.com/2017.3.913/js/jquery.min.js"></script>  
  17.     <script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>  
  18.   
  19.   
  20. </head>  
  21. <body>  
  22.   
  23.   
  24.     <div id="example">  
  25.         <div id="grid"></div>  
  26.   
  27.         <script>  
  28.                 $(document).ready(function() {  
  29.   
  30.                   
  31.                     var grid = $("#grid").kendoGrid({  
  32.                         dataSource: {  
  33.                             type: "json",  
  34.                             transport: {  
  35.                                 read: "http://github-ci-staging.azurewebsites.net/api/Technologies/TechnologiesList"  
  36.                             },    
  37.                             schema: {  
  38.                                 model: {  
  39.                                     fields: {  
  40.                                         value: { type: "number" },  
  41.                                         text: { type: "string" },  
  42.   
  43.                                     }  
  44.                                 }  
  45.                             },  
  46.   
  47.                         },  
  48.                         scrollable: true,  
  49.                         columns: [  
  50.   
  51.                             { field: "value", title: "S No", width: "130px" },  
  52.                             { field: "text", title: "Technology", width: "130px" },  
  53.   
  54.                         ]  
  55.                     }).data("kendoGrid");  
  56.                     grid.table.kendoSortable({  
  57.                         filter: ">tbody >tr",  
  58.                         hint: $.noop,  
  59.                         cursor: "move",  
  60.                         autoScroll: true,  
  61.                         placeholder: function(element) {  
  62.                             return element.clone().addClass("k-state-hover").css("opacity", 0.65);  
  63.                         },  
  64.                         container: "#grid tbody",  
  65.                         change: function(e) {  
  66.                             var skip = grid.dataSource.skip(),  
  67.                                 oldIndex = e.oldIndex + skip,  
  68.                                 newIndex = e.newIndex + skip,  
  69.                                 data = grid.dataSource.data(),  
  70.                                 dataItem = grid.dataSource.getByUid(e.item.data("uid"));  
  71.                                 grid.dataSource.remove(dataItem);  
  72.                                 grid.dataSource.insert(newIndex, dataItem);  
  73.                         }  
  74.                     });  
  75.                 });  
  76.         </script>  
  77.   
  78.         <style>  
  79.             .k-grid tbody tr {  
  80.                 cursor: move;  
  81.             }  
  82.         </style>  
  83.     </div>  
  84.   
  85.   
  86. </body>  
  87. </html>  

"Change event" definition of the Kendo Sortable is used to reorder the index of the data item which is in Grid data source.

  • Filter - This determines which items are sortable
  • Container - Determines to which boundaries the hint movement will be constrained
  • autoScroll - To enable scrolling when there is drag and drop within scrollable Grid
Result in Browser

After reordering the records by drag and drop using mouse,

JQuery
Figure 3

I hope, you have enjoyed this article. Your valuable feedback, questions, or comments about this article are always welcome.

References 

http://docs.telerik.com/kendo-ui/controls/interactivity/sortable/overview

Download the source code here.


Similar Articles