Introduction
The Search Toolbar in Kendo Grid is used to search the records in the grid with respect to any field.
Prerequisite:
Basic knowledge in Kendo UI with JQuery.
Search Toolbar in Kendo Grid
KendoGridSearchPanel.html
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- html {
- font-size: 14px;
- font-family: Arial, Helvetica, sans-serif;
- }
- </style>
- <title></title>
- <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default-v2.min.css" />
- <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js"></script>
- <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
- </head>
- <body>
- <div id="example">
- <div id="grid"></div>
- <script>
- $(document).ready(function () {
- $("#grid").kendoGrid({
- dataSource: {
- type: "json",
- transport: {
- read: "http://localhost:11207/api/Employees/EmpList"
- },
- pageSize: 20
- },
- height: 550,
- toolbar: ["search"],
- columns: [{
- field: "employeeId",
- title: "Employee ID",
- }, {
- field: "name",
- title: "Name"
- },]
- });
- });
- </script>
- </div>
- </body>
- </html>
From the above code you can notice we have given [“search”] value for the toolbar property in Kendo Grid which will enable the search control in kendo grid.
/api/Employees/EmpList is the API which was created in my last
article is used to get the employee list as shown in the below figure.
Kendo Grid with Search Toolbar
Search by Name
Search by Employee ID
Reference
https://demos.telerik.com/kendo-ui/grid/search-panel
Summary
We have seen how to implement the search toolbar in the Kendo grid with remote data binding, which will improve the search experience in the grid for the user.
I hope you have enjoyed this blog. Your valuable feedback, questions, or comments about this blog are always welcomed.
Happy Coding!