Post
Ask Question

How To Customize Sorting In Kendo Grid

Introduction

This blog tells you when to customize the sorting functionality in Kendo Grid and how to perform it. 
 
Sorting in Kendo Grid

We can enable the sorting in Kendo Grid simply by setting the sortable property as true, as shown below.
 
KendoSorting.html  
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8"/>  
  5.     <title>Kendo UI Snippet</title>  
  6.   
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"/>  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"/>  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css"/>  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"/>  
  11.   
  12.     <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>  
  14. </head>  
  15. <body>  
  16.     
  17. <div id="grid"></div>  
  18. <script>  
  19.    
  20.   
  21.     var dataSource = new kendo.data.DataSource({  
  22.         data: [  
  23.             { id: 1, EmployeeName: "Saravanan", Salary:1100 },  
  24.             { id: 2, EmployeeName: "Atheek", Salary:1500 },  
  25.             { id: 3, EmployeeName: "Allywn", Salary:1000 }  
  26.         ]  
  27.     });  
  28.   
  29.     $("#grid").kendoGrid({  
  30.         dataSource: dataSource,  
  31.         sortable: true,  
  32.         columns: [{  
  33.             Title:"Name",  
  34.             field: "EmployeeName",  
  35.              
  36.             }  
  37.         },  
  38.           {field:"Salary", format: '{0:c}'}]  
  39.     });  
  40.   
  41. </script>  
  42. </body>  
  43. </html>  
From the data shown above, the inbuilt sorting feature will work as expected.
 
Result
 
Consider The data given below is used to populate Kendo Grid. 
  1. data: [    
  2.            { id: 1, item: "two" },    
  3.            { id: 2, item: "one" },    
  4.            { id: 3, item: "three" }    
  5.        ]    
The item will be bound in Kendo Grid, as it was a string type. The sorting will be based on its type.
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8"/>  
  5.     <title>Kendo UI Snippet</title>  
  6.   
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"/>  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"/>  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css"/>  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"/>  
  11.   
  12.     <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>  
  14. </head>  
  15. <body>  
  16.     
  17. <div id="grid"></div>  
  18. <script>  
  19.   
  20.     var dataSource = new kendo.data.DataSource({  
  21.         data: [  
  22.             { Id: 1, item: "two" },  
  23.             { Id: 2, item: "one" },  
  24.             { Id: 3, item: "three" }  
  25.         ]  
  26.     });  
  27.   
  28.     $("#grid").kendoGrid({  
  29.         dataSource: dataSource,  
  30.         sortable: true,  
  31.         columns: [{  
  32.             field: "item",  
  33.              
  34.         }]  
  35.     });  
  36.   
  37. </script>  
  38. </body>  
  39. </html>  
Result
 
 
In some cases, as per the requirement, we need to customize this sorting, where it should not happen based on type, so we need to write our own customized function to make the sorting, as we expect, which can be easily done by a comparison function
 
KendoSorting.html  
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8"/>  
  5.     <title>Kendo UI Snippet</title>  
  6.   
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"/>  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"/>  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css"/>  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"/>  
  11.   
  12.     <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>  
  14. </head>  
  15. <body>  
  16.     
  17. <div id="grid"></div>  
  18. <script>  
  19.     var numbers = {  
  20.         "one"  : 1,  
  21.         "two"  : 2,  
  22.         "three": 3  
  23.     };  
  24.   
  25.     var dataSource = new kendo.data.DataSource({  
  26.         data: [  
  27.             { id: 1, item: "two" },  
  28.             { id: 2, item: "one" },  
  29.             { id: 3, item: "three" }  
  30.         ]  
  31.     });  
  32.   
  33.     $("#grid").kendoGrid({  
  34.         dataSource: dataSource,  
  35.         sortable: true,  
  36.         columns: [{  
  37.             field: "item",  
  38.           sortable: {  
  39.                 compare: function(a, b) {  
  40.                     
  41.                     return numbers[a.item] - numbers[b.item];  
  42.                 }  
  43.             }  
  44.              
  45.         }]  
  46.     });  
  47.   
  48. </script>  
  49. </body>  
  50. </html>  
Result
 
 
I hope you have enjoyed this blog. Your valuable feedback, questions or comments about this blog are always welcome.