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" />
  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>
  20. </head>
  21. <body>
  24. <div id="example">
  25. <div id="grid"></div>
  27. <script>
  28. $(document).ready(function() {
  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" },
  43. }
  44. }
  45. },
  47. },
  48. scrollable: true,
  49. columns: [
  51. { field: "value", title: "S No", width: "130px" },
  52. { field: "text", title: "Technology", width: "130px" },
  54. ]
  55. }).data("kendoGrid");
  57. });
  58. </script>
  60. </div>
  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" />
  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>
  20. </head>
  21. <body>
  24. <div id="example">
  25. <div id="grid"></div>
  27. <script>
  28. $(document).ready(function() {
  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" },
  43. }
  44. }
  45. },
  47. },
  48. scrollable: true,
  49. columns: [
  51. { field: "value", title: "S No", width: "130px" },
  52. { field: "text", title: "Technology", width: "130px" },
  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>
  78. <style>
  79. .k-grid tbody tr {
  80. cursor: move;
  81. }
  82. </style>
  83. </div>
  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.