This recipe demonstrates how to allow the user to filter the data in a Kendo Grid column.
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>
<script src="js/personData.js"></script>
</head>
<body>
<h3 style="color:#4f90ea;">Exercise 7 - Filtering Column Data</h3>
<p><a href="index.html">Home</a></p>
<script type="text/javascript">
$(document).ready(function() {
var myDataSource = new kendo.data.DataSource({
data: personData,
schema: {
model: {
fields: {
FirstName: { type: "string" },
LastName: { type: "string" },
Rank: { type: "string" },
DOB: { type: "date" },
PersonId: { type: "number" }
}
}
}
} );
$("#myGrid").kendoGrid({
dataSource: myDataSource,
filterable: {
extra: false, // true if a second "AND/OR" filter is needed
operators: {
string: {
startswith: "Starts with",
eq: "Equals",
neq: "Not equal to"
}
}
},
columns: [
{ field: "Name", title: "Full Name", width: "300px", template: '#=FirstName# #=LastName#', filterable: false },
{ field: "DOB", title: "Date of Birth", width: "300px", format: "{0:yyyy-MM-dd}", filterable: { ui: "datepicker" } },
{ field: "Rank", title: "Rank", width: "300px" }
]
});
});
</script>
<div id="myGrid"></div>
</body>
</html>In this recipe, we defined the grid as filterable and passed some additional parameters to our filterable parameter to control how many filters there are and what kind of text is shown when the user tries to filter the column. We also specified two special scenarios in our column definitions. We made the FullName column unfilterable and then we made the DOB column filterable using a Kendo DatePicker object.
There is a lot more that you can do with filtering, such as using predefined dropdowns or multiple search parameters. However, a word of caution is to always keep it simple for your users. Although you might not have a problem with logic such as "starts with *** and does not equal ***", some users may find it confusing. No matter how you choose to implement your grid, filtering can be a very helpful tool for users to parse through large amounts of data.