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
                        },

Leave a Reply

Your email address will not be published. Required fields are marked *