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.
Figure 1
Create a new HTML page. In my case, I named it KendoSortableGrid.cshtml.
- <!DOCTYPE html>
- <html>
- <head>
- <base href="http://demos.telerik.com/kendo-ui/sortable/integration-grid">
- <style>
- html {
- font-size: 14px;
- font-family: Arial, Helvetica, sans-serif;
- }
- </style>
- <title></title>
- <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common-material.min.css" />
- <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.material.min.css" />
- <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.material.mobile.min.css" />
-
- <script src="https://kendo.cdn.telerik.com/2017.3.913/js/jquery.min.js"></script>
- <script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>
-
-
- </head>
- <body>
-
-
- <div id="example">
- <div id="grid"></div>
-
- <script>
- $(document).ready(function() {
-
-
- var grid = $("#grid").kendoGrid({
- dataSource: {
- type: "json",
- transport: {
- read: "http://github-ci-staging.azurewebsites.net/api/Technologies/TechnologiesList"
- },
- schema: {
- model: {
- fields: {
- value: { type: "number" },
- text: { type: "string" },
-
- }
- }
- },
-
- },
- scrollable: true,
- columns: [
-
- { field: "value", title: "S No", width: "130px" },
- { field: "text", title: "Technology", width: "130px" },
-
- ]
- }).data("kendoGrid");
-
- });
- </script>
-
- </div>
-
-
- </body>
- </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
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
- <!DOCTYPE html>
- <html>
- <head>
- <base href="http://demos.telerik.com/kendo-ui/sortable/integration-grid">
- <style>
- html {
- font-size: 14px;
- font-family: Arial, Helvetica, sans-serif;
- }
- </style>
- <title></title>
- <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common-material.min.css" />
- <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.material.min.css" />
- <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.material.mobile.min.css" />
-
- <script src="https://kendo.cdn.telerik.com/2017.3.913/js/jquery.min.js"></script>
- <script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>
-
-
- </head>
- <body>
-
-
- <div id="example">
- <div id="grid"></div>
-
- <script>
- $(document).ready(function() {
-
-
- var grid = $("#grid").kendoGrid({
- dataSource: {
- type: "json",
- transport: {
- read: "http://github-ci-staging.azurewebsites.net/api/Technologies/TechnologiesList"
- },
- schema: {
- model: {
- fields: {
- value: { type: "number" },
- text: { type: "string" },
-
- }
- }
- },
-
- },
- scrollable: true,
- columns: [
-
- { field: "value", title: "S No", width: "130px" },
- { field: "text", title: "Technology", width: "130px" },
-
- ]
- }).data("kendoGrid");
- grid.table.kendoSortable({
- filter: ">tbody >tr",
- hint: $.noop,
- cursor: "move",
- autoScroll: true,
- placeholder: function(element) {
- return element.clone().addClass("k-state-hover").css("opacity", 0.65);
- },
- container: "#grid tbody",
- change: function(e) {
- var skip = grid.dataSource.skip(),
- oldIndex = e.oldIndex + skip,
- newIndex = e.newIndex + skip,
- data = grid.dataSource.data(),
- dataItem = grid.dataSource.getByUid(e.item.data("uid"));
- grid.dataSource.remove(dataItem);
- grid.dataSource.insert(newIndex, dataItem);
- }
- });
- });
- </script>
-
- <style>
- .k-grid tbody tr {
- cursor: move;
- }
- </style>
- </div>
-
-
- </body>
- </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,
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.