Post
Ask Question

Reorder Columns In Kendo Grid

Introduction
 
This blog tells you how to reorder Kendo Grid columns, which is based on the reorderColumn method and column reordering properties in Kendo Grid.
 
Kendo Grid with DataSource  
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <title>Untitled</title>  
  6.   
  7.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common.min.css">  
  8.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.rtl.min.css">  
  9.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.default.min.css">  
  10.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.mobile.all.min.css">  
  11.   
  12.   <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>  
  13.   <script src="http://kendo.cdn.telerik.com/2016.3.1118/js/angular.min.js"></script>  
  14.   <script src="http://kendo.cdn.telerik.com/2016.3.1118/js/jszip.min.js"></script>  
  15.   <script src="http://kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script></head>  
  16. <body>  
  17.   <div id="example">  
  18.             <div id="grid"></div>  
  19.   
  20.             <script>  
  21.                 $(document).ready(function() {  
  22.                     $("#grid").kendoGrid({  
  23.                        columns: [  
  24.                        { field: "name", title:"Name"},  
  25.                        { field: "age", title:"Age" },  
  26.                        { field:"Designation", title:"Designation"}  
  27.                              ],  
  28.                     dataSource: [  
  29.                        { name: "Jane Doe", age: 30, Designation:"Software Engineer" },  
  30.                        { name: "John Doe", age: 33, Designation : "Tester" }  
  31.                             ]  
  32.   
  33.                     });  
  34.                 });  
  35.             </script>  
  36.         </div>  
  37.   
  38. </body>  
  39. </html>  
Result
 

Reorder the column based on reorderColumn function
 
The reorderColumn function is used to change the position of the column in the Grid. It consist of the two parameters given below.
  1. The new position of the column
  2. Column whose position should be changed.  
ReorderColumn .html 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <title>Reorder Column</title>  
  6.   
  7.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common.min.css">  
  8.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.rtl.min.css">  
  9.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.default.min.css">  
  10.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.mobile.all.min.css">  
  11.   
  12.   <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>  
  13.   <script src="http://kendo.cdn.telerik.com/2016.3.1118/js/angular.min.js"></script>  
  14.   <script src="http://kendo.cdn.telerik.com/2016.3.1118/js/jszip.min.js"></script>  
  15.   <script src="http://kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script></head>  
  16. <body>  
  17.   <div id="example">  
  18.             <div id="grid"></div>  
  19.   
  20.             <script>  
  21.                 $(document).ready(function() {  
  22.                     $("#grid").kendoGrid({  
  23.                        columns: [  
  24.                        { field: "name", title:"Name"},  
  25.                        { field: "age", title:"Age" },  
  26.                        { field:"Designation", title:"Designation"}  
  27.                              ],  
  28.                     dataSource: [  
  29.                        { name: "Jane Doe", age: 30, Designation:"Software Engineer" },  
  30.                        { name: "John Doe", age: 33, Designation : "Tester" }  
  31.                             ]  
  32.   
  33.                     });  
  34.                     var grid = $("#grid").data("kendoGrid");  
  35.                     grid.reorderColumn(2, grid.columns[1]);  
  36.                 });  
  37.             </script>  
  38.         </div>  
  39.   
  40. </body>  
  41. </html>  
From the code given above, you can notice the reorderColumn function consists of the two parameters, which says change the age column position from 1 to 2, as show below.
 

Reordering the columns based on the Reorderable property

The reorderable property is used to change the position of the Grid column just by dragging the header cell. By default, this property is disabled. 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <title>Reorder Column</title>  
  6.   
  7.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common.min.css">  
  8.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.rtl.min.css">  
  9.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.default.min.css">  
  10.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.mobile.all.min.css">  
  11.   
  12.   <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>  
  13.   <script src="http://kendo.cdn.telerik.com/2016.3.1118/js/angular.min.js"></script>  
  14.   <script src="http://kendo.cdn.telerik.com/2016.3.1118/js/jszip.min.js"></script>  
  15.   <script src="http://kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script></head>  
  16. <body>  
  17.   <div id="example">  
  18.             <div id="grid"></div>  
  19.   
  20.             <script>  
  21.                 $(document).ready(function() {  
  22.                    
  23.                     $("#grid").kendoGrid({  
  24.                        columns: [  
  25.                        { field: "name", title:"Name"},  
  26.                        { field: "age", title:"Age" },  
  27.                        { field:"Designation", title:"Designation"}  
  28.                              ],  
  29.                     dataSource: [  
  30.                        { name: "Jane Doe", age: 30, Designation:"Software Engineer" },  
  31.                        { name: "John Doe", age: 33, Designation : "Tester" }  
  32.                             ] ,
  33.                    reorderable: true, 
  34.   
  35.                     });  
  36.                       
  37.                 });  
  38.             </script>  
  39.         </div>  
  40.   
  41. </body>  
  42. </html>  
Result
 
 

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