Introduction
In this blog, you will learn how to integrate the search box in the kendo grid and various operators used to filter the data.
Search Box
To add a search box into a kendo grid we need to add Toolbar and search properties while initializing the kendo grid.
toolbar: ["search"],
search: {
fields: [{
name: "age",
operator: "eq"
}, {
name: "name",
operator: "contains"
}, ]
},
Fields is an array of each field defined for the kendo grid. From the above snippet, the search will be applied for the name and age field of the grid.
Operator “eq” is set to age field which defines the field and filters out only the records equal with the typed text in the search box.
Operator “contains” is set to name field which defines the field and filter out only the records containing the typed text in the search box.
Complete code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.default-v2.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.3.1207/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [{
field: "name",
title: "Name"
}, {
field: "age",
title: "Age"
}],
toolbar: ["search"],
search: {
fields: [{
name: "age",
operator: "eq"
}, {
name: "name",
operator: "contains"
}, ]
},
dataSource: {
data: [{
name: "Alexa",
age: 29
}, {
name: "Siri",
age: 30
}, {
name: "Shaaniya",
age: 30
}, ]
}
});
</script>
</body>
</html>
Kendo Grid with a Search box
![]()
Search by age
![]()
The data has been filtered for Age equals 30.
Search by name
![]()
The data has been filtered for a name containing 'a'.
Conclusion
We have seen how to integrate search box with kendo grid and how effectively the operators can be used for filtering the data. You can explore more about the operators here.
Happy Coding !!!
Click here to get the source code.