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

<!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!

3 Comments

Join the conversation! Your thoughts help the community grow.

Văn Phúc Trần3y ago
Thanks!Very helpful.
Elle Faming6y ago
Always looking for new opportunities care to look and give me fair review <a href="https://www.rangefinderguides.com/best-golf-rangefinder/">Best golf Rangefinder</a>
Elle Faming6y ago
Always looking for new opportunities care to look and give me fair review https://www.rangefinderguides.com/