Search Toolbar in Kendo Grid with Remote Data Binding

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 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>     
  4.     <style>  
  5.         html {  
  6.             font-size: 14px;  
  7.             font-family: Arial, Helvetica, sans-serif;  
  8.         }  
  9.     </style>  
  10.     <title></title>  
  11.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default-v2.min.css" />  
  12.     <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js"></script>  
  13.     <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>  
  14. </head>  
  15. <body>  
  16.     <div id="example">  
  17.         <div id="grid"></div>  
  18.         <script>  
  19.         $(document).ready(function () {  
  20.             $("#grid").kendoGrid({  
  21.                 dataSource: {  
  22.                     type: "json",  
  23.                     transport: {  
  24.                         read: "http://localhost:11207/api/Employees/EmpList"  
  25.                     },  
  26.                     pageSize: 20  
  27.                 },  
  28.                 height: 550,  
  29.                 toolbar: ["search"],               
  30.                 columns: [{                     
  31.                     field: "employeeId",  
  32.                     title: "Employee ID",                     
  33.                 }, {  
  34.                     field: "name",  
  35.                     title: "Name"  
  36.                 },]  
  37.             });  
  38.         });  
  39.         </script>  
  40.     </div>  
  41. </body>  
  42. </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!
Next Recommended Reading Date Field Binding In Kendo Grid