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="index.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
});