I need to Create a Kendo ui grid. Since this has many filters, I need to have 4 regular filters and rest should be able to add dynamically according to users choice. Can someone provide assistance on this?

I need to Create a Kendo ui grid. Since this has many filters, I need to have 4 regular filters and rest should be able to add dynamically according to users choice. Can someone provide assistance on this?

• javascript
• c#
• kendo-ui
• kendo-grid

• OK. But what you tried for this? – Ramesh Rajendran Commented May 31, 2018 at 10:25
• Few ways like adding a drop down and text box separately on data columns of the grid but there are couple of problems. Like I cannot avoid filtering for each drop down select . It should only happen if I type something in text box. Secondly I am unable to read what is the selected drop down value and typed Text in Text box. If these two are possible I can handle the rest – Lakshan Commented Jun 1, 2018 at 7:41

2 Answers 2

In order to filter by text box you can hook up a keyUp event in order to retrieve the value. You can then add this as a filter to the existing filter object.

$('#NameOfInput').keyup(function () {
    var val = $('#NameOfInput').val();
    var grid = $("#yourGrid").data("kendoGrid");
    var filter = grid.dataSource.filter();
    filter.filters.push({
        field: "NameOfFieldYouWishToFilter",
        operator: "eq",
        value: val,
        FilterName: "UniqueIdentifierForFilter"
    });
    grid.dataSource.filter(filter);
});

Using a drop down box, you can achieve the desired functionality by using the onChange event, get the value using $('#yourDropDown').val();.

The FilterName is optional incase you require additional logic to add/remove filters. i.e. you can use this to determine whether the filter already exists in the array and if so you can use splice to remove it.

EDIT

Using FilterName you can search to see if a filter already exists and remove it:

var filterIndex = filter.filters.map((e: any) => { return e.FilterName }).indexOf("UniqueIdentifierForFilter");
if (filterIndex > -1)
{
    filter.filters.splice(filterIndex, 1);
}

For @lakshan, while this is largely correct, you will get an error if there are no filters at first. I found this answer when I encountered the undefined filter error. My full solution for adding a filter, either to an undefined filter set, or along with an existing one:

var grid = $("#ActivityGrid").data("kendoGrid");
var dataSource = grid.dataSource;
var gridFilter = dataSource.filter();
var upingFilter = {
    field: "ActivityDate",
    operator: "gte",
    value: new Date(),
    FilterName: "UpingOnly"
};
if ($("#UpingOnlyCheckbox")[0].checked) {
    if (gridFilter == undefined) {
        dataSource.filter(upingFilter);
    }
    else {
        gridFilter.filters.push(upingFilter);
        dataSource.filter(gridFilter);
    }

}