Using built-in sorting (Simple)

This recipe demonstrates the built-in sorting feature of Kendo Grids.

Getting ready

Open 2-sorting.html in your editor or create a new HTML file with the same name.

How to do it...

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>

How it works...

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
});
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset