Kendo UI Grid Filtering
I had a grid where I needed several possible types of filtering to be applied, and rather than build different service calls for each scenario, I was (after some trial and error) able to successfully apply filtering by modifying the filter array in the correct hierarchical format that the Telerik Kendo datasource requires. First I set the initial filters that will always be applied:
if (!openTrades) {
filters = [
{ field: "UserID", operator: "eq", value: userId },
{ field: "TradeStartDate", operator: "gte", value: kendo.parseDate(startDate, "yyyy-MM-dd") },
{ field: "TradeEndDate", operator: "lte", value: kendo.parseDate(endDate) }
];
}
else {
filters = [
{ field: "UserID", operator: "eq", value: userId },
{ field: "TradeStartDate", operator: "gte", value: kendo.parseDate(startDate, "yyyy-MM-dd") }
];
}
After that, I check for the possibility of adding further optional filtering. In this case, TradeSummaryID’s. If applicable, I push the new filter field and value to the filters array for later use in the datasource:
var newFilters = [];
for (var i = 0; i < aryTS.length; i++) {
newFilters.push({ field: "TradeSummaryID", operator: "eq", value: Number(aryTS[i]) });
}
var newFilterObj;
newFilterObj = {
logic: "or",
filters: newFilters
};
filters.push(newFilterObj);
At this point, we are ready to apply our filter to the datasource, which in the case calls an OData service:
$("#grid").kendoGrid({
dataSource: {
type: "odata-v4",
transport: {
read: {
url: function () {
if (rblOpenClosed.get_selectedIndex() == 0)
return "/OData/TradeSummaries";
else
return "/OData/TradeSummaryOpens";
}
}
},
schema: {
data: function (response) {
return response.value;
}
},
serverFiltering: true,
serverSorting: true,
filter: {
logic: "and",
filters: filters
},