This recipe demonstrates the built-in sorting feature of Kendo Grids.
Copy the following code into your new document:
<!DOCTYPE html> <html> <head> <title>Kendo UI Grid How-to</title> <link rel="stylesheet" type="text/css" href="kendo/styles/kendo.common.min.css"> <link rel="stylesheet" type="text/css" href="kendo/styles/kendo.default.min.css"> <script src="kendo/js/jquery.min.js"></script> <script src="kendo/js/kendo.web.min.js"></script> </head> <body> <h3 style="color:#4f90ea;">Exercise 2 - Using Built-in Sorting</h3> <p><a href="EB9781849699136_3.html">Home</a></p> <script type="text/javascript"> $(document).ready(function(){ $("#myGrid").kendoGrid({ sortable: { mode: "multiple", // a value of "single" would only allow the user to sort one column at a time allowUnsort: true } }); }); </script> <table id="myGrid"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Rank</th> </tr> </thead> <tbody> <tr> <td>Jim</td> <td>Kirk</td> <td>Captain</td> </tr> <tr> <td>Jim</td> <td>Raynor</td> <td>Captain</td> </tr> <tr> <td>Sarah</td> <td>Kerrigan</td> <td>Ghost Recon</td> </tr> <tr> <td>Jean-Luc</td> <td>Picard</td> <td>Captain</td> </tr> <tr> <td>Steve</td> <td>Rogers</td> <td>Captain</td> </tr> </tbody> </table> </body> </html>
When you add the sortable
parameter to the grid, Kendo automatically includes all of the client-side functionality you need to sort the columns of your grid. The mode
and allowUnsort
parameters provided to the sortable
parameter are optional. You can also use the default sort functionality by simply defining sortable
as true
:
$("#myGrid").kendoGrid({ sortable: true });