I'm trying to create a simple search box that will search in all the fields found within the grid.
I tried using the filterable option to get a search box. But I ended up getting search box/operators for every single column. All I want is a single search box in my grid that searches through all columns/fields. How can I do this? Also I setting the showOperators false for specific columns didn't work for me. The operators are always visible.
I can post additional code if necessary but it's out of context for the problem I'm experiencing.
<p></p><p>filterable: {<br> mode: 'row',<br> showOperators: false<br>}</p>
1 Answer, 1 is accepted
Please take a look at the following Progress Dojo which illustrates a Kendo Grid with a Search Box in the Toolbar.
Here are the main points:
1. The toolbar is using a template which contains the label, textbox, and buttons. Here is the code used:
<script id="template" type="text/x-kendo-template"> <label class="search-label" for="searchBox">Search Grid:</label> <input type="search" id="searchBox" class="k-textbox" style="width: 250px"/> <input type="button" id="btnSearch" class="k-button" value="Search"/> <input type="button" id="btnReset" class="k-button" value="Reset"/> </script>$("#grid").kendoGrid({ ... toolbar: [ { template: kendo.template($("#template").html()) } ], ... });2. The search button's click event sets the Kendo Grid's Datasource Filters depending on what is passed in the textbox. The reset button clears the filter. Here's the function used for the search:
$("#btnSearch").click(function () { var searchValue = $('#searchBox').val(); $("#grid").data("kendoGrid").dataSource.filter({ logic : "or", filters: [ { field : "ContactName", operator: "contains", value : searchValue }, { field : "ContactTitle", operator: "contains", value : searchValue }, { field : "CompanyName", operator: "contains", value : searchValue }, { field : "Country", operator: "contains", value : searchValue } ] }); });I hope this helps!
Regards,
Patrick
Telerik
Rank 1
Hello, I have this following code and the search toolbar doesn't work
<!DOCTYPE html>
<html>
<head>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/kendo/2017.1.223/kendo.all.min.js"></script>
<script src="~/Scripts/knockout-3.4.2.js"></script>
<script src="~/Scripts/knockout-kendo.js"></script>
<script src="~/Scripts/knockout-kendo.min.js"></script>
<link rel="stylesheet" href="~/Content/kendo/2017.1.223/kendo.common.min.css" />
<link rel="stylesheet" href="~/Content/kendo/2017.1.223/kendo.default.min.css" />
<link rel="stylesheet" href="~/Content/kendo/2017.1.223/kendo.blueopal.min.css" />
</head>
<body>
<script id="template" type="text/x-kendo-template">
<label class="search-label" for="searchBox">Search Ouvrage:</label>
<input type="search" id="searchBox" class="k-textbox" style="width: 250px" />
<input type="button" id="btnSearch" class="k-button" value="Search" />
<input type="button" id="btnReset" class="k-button" value="Reset" />
</script>
<div id="grid" data-bind="kendoGrid"> </div>
<script>
var categories = [];
var auteurs = [];
var ouvrages = [];
function Remplir_categories() {//Grid
$.ajax({
url: "http://localhost:31871/api/CategorieSets",
dataType: "json",
async: false,
success: function (result) {
for (var i = 0; i < result.length; i++) {
categories.push({ value: result[i]["Id"], text: result[i]["Nom"] });
}
},
});
}
Remplir_categories();
function Remplir_auteurs() {//Grid
$.ajax({
url: "http://localhost:31871/api/AuteurSets",
dataType: "json",
async: false,
success: function (result) {
for (var i = 0; i < result.length; i++) {
auteurs.push({ value: result[i]["Id"], text: result[i]["Nom"] });
}
},
});
}
Remplir_auteurs();
/* function auteurDropDownEditor(container, options) {
container.kendoDropDownList({
autoBind: true,
dataSource: auteurs,
dataTextField: "text",
dataValueField: "value",
});
};
/* function categoryDropDownEditor(container, options) {
container.kendoDropDownList({
autoBind: true,
dataSource: categories,
dataTextField: "text",
dataValueField: "value"
});
return categories.value
};*/
var OuvragesSetsDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://localhost:31871/api/OuvrageSets",
dataType: "json"
},
schema: {
model: {
id: "Id",
fields: {
Id: { editable: false, type: "number" },
Titre: { validation: { required: true } },
Description: { validation: { required: true } },
Prix: { validation: { required: true } },
Date_de_publication: { validation: { required: true } },
Image: { validation: { required: true } },
AuteurId: { validation: { required: true } },
CategorieId: { validation: { required: true } },
Auteur: { validation: { required: true } }
}
}
}
}
});
/* function Remplir_ouvrages() {//Grid
$.ajax({
url: "http://localhost:31871/api/OuvrageSets",
dataType: "json",
async: false,
success: function (result) {
for (var i = 0; i < result.length; i++) {
if (result[i]["Titre"] == "test") {
ouvrages.push(result[i]);
}
}
OuvragesSetsDataSource = ouvrages
},
});
}*/
// Remplir_ouvrages();
//
$("#btnSearch").click(function () {
var searchValue = $('#searchBox').val();
//Setting the filter of the Grid
kendoGrid.dataSource.filter({
filters: [
{
field: "Titre",
operator: "contains",
value: searchValue
}
]
});
});
//Clearing the filter
$("#btnReset").click(function () {
$("#grid").data("kendoGrid").dataSource.filter({});
});
var ViewModel = function () {
var self = this;
this.items = ko.observableArray([]);
ko.bindingHandlers.kendoGrid.options = {
groupable: true,
scrollable: true,
toolbar: [
{ template: kendo.template($("#template").html()) }
],
sortable: true,
pageable: true,
dataSource: OuvragesSetsDataSource,
height: 500,
columns: [
{
field: "Id",
title: "Id"
},
{
field: "Titre",
title: "Titre"
},
{
field: "Description",
title: "Description"
},
{
field: "Date_de_publication",
title: "Date_de_publication"
},
{
field: "Prix",
title: "Prix"
},
{
field: "Image",
title: "Image",
},
{
field: "AuteurId",
title: "Auteur",
values: auteurs,
dataTextField: "text",
dataValueField: "value"
},
{
field: "CategorieId",
title: "Categorie",
values: categories,
dataTextField: "text",
dataValueField: "value"
},
{
command: ["add"]
}
]
};
}
ko.applyBindings(new ViewModel());
</script>
</body>
</html>
Please have in mind that based on the provided code, the search button should work only on the Titre column, as the filter is set only for that column:
filters: [ { field: "Titre", operator: "contains", value: searchValue }]Also, please have in mind that the filtering will not work as expected for the DropDownList columns as the filter is made based on the value, but the Grid is displaying the text.
If additional assistance is needed, please provide a fully runnable example, or modify the one send by my colleague and I will gladly assist.
Regards,
Stefan
Telerik by Progress
Rank 1
Hi Patrick
Thanks, Your reply was very helpful. Could you kindly mention how do we reset it as well. when we click the reset button?
Thanks
S
We have a great Knowledge Base article which gives a solution to how to clear all filters in the Kendo UI Grid. In the example, it uses a button to clear the Grid's datasource filter by setting it as empty.
$("#grid").data("kendoGrid").dataSource.filter({});I hope this helps with your Grid's filtering implementation. Please let me know if you have any questions regarding the approach.
Regards,
Patrick
Progress Telerik
Rank 1
This is a nice feature.
How can I make it work with a grid that has drop down lists? The id is in the grid datasource, but the searchable text is in the dropdown. The id is a foreign key to the dropdown list which is passed in via the model.
Hello,
This can be done using the same approach as mentioned in this knowledge base article. Please take a look at this Progress Kendo UI Dojo which demonstrates a Kendo UI Grid with DropDownList filters and a clear all filters button.
Regards,
Patrick
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Hi, I don't see a search box in the demo you have referenced. Is this a different topic?
I have a grid. It has a row. That row has an id. That id is a foreign key. That foreign key is used to select a value in dropdown list. When I search I want to be able to search the text that is displayed in the dropdown. Is this possible?
This is similar to what my column looks like. I would want to search on Category Name, not Category ID:
columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData["categories"], "CategoryID", "CategoryName").Title("Category").Width(150);
Thanks.
Hello JT,
The Search panel can be configured to search for a specific field using the search.fields property. So, for example, if the Search Panel is utilized in our Foreign Key Column live demos(UI for ASP.NET MVC / UI for ASP.NET Core), here's how you would filter only for the Category.CategoryName field:
@(Html.Kendo().Grid<GridExample.Models.ProductViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.ProductName);
columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData["categories"], "CategoryID", "CategoryName")
.Title("Category").Width(200);
columns.Bound(p => p.UnitPrice).Width(200);
columns.Command(command => command.Destroy()).Width(150);
})
.ToolBar(toolBar =>
{
toolBar.Create();
toolBar.Save();
toolBar.Search();
})
.Search(e => e.Field(f => f.Category.CategoryName))
//...
)Regards,
Patrick
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.