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="EB9781849699136_3.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.