jquery kendo grid filter property is undefined

user_153923 0
Viewed 1550

I have a jquery function that should filter the datasource based on the Service Type value of the button that was clicked.

I used this post on telerik to get my guidance:

Adding filters to Grid's source

From that, I created this buttonFilter() function:

function buttonFilter() {
    var buttonText = 'All';
    var button = $('#ReadTypeBtnGroup > button.btn.btn-default.active');
    if (button != null) {
        buttonText = button.val();
    }
    console.log('buttonFilter:: buttonText: ' + buttonText);
    var dataSource = $('#grid').data('kendoGrid').dataSource;
    if (dataSource.filter() != undefined) {
        dataSource.filter().length = 0; // remove any existing filters
    }
    if (buttonText != 'All') {
        dataSource.filter().push({ field: "serviceType", operator: 'eq', value: buttonText });
    }
    return buttonText;
}

The error I am getting is:

Uncaught TypeError: Cannot read property 'push' of undefined

The filter() property is supposed to be an array, but I am not great when it comes to javascript or jquery.

What am I doing wrong?

kendo-grid kendo-ui jquery javascript
3 Answers

You got it wrong. You can't change filter properties changing the result of filter() method. Instead, you have to use it passing parameters. That method only returns readonly values.

Example:

var filters = dataSource.filter(); // Getting current filters 
dataSource.filter(null); // Clearing filters
dataSource.filter({ field: "abc", value: "1" }); // Setting new filters

Always check the docs

user_12673040

@Dontvotemedown is largely correct, and that answer will work well for what you specifically want to do (i.e. clear filters completely and apply your own). However, if you want to manually add a filter to existing filters, your original path was close to correct. I found this answer in my original search, then this when I couldn't add to an undefined filter. 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 upcomingFilter = {
    field: "ActivityDate",
    operator: "gte",
    value: new Date(),
    FilterName: "UpcomingOnly"
};
if ($("#UpcomingOnlyCheckbox")[0].checked) {
    if (gridFilter == undefined) {
        dataSource.filter(upcomingFilter);
    }
    else {
        gridFilter.filters.push(upcomingFilter);
        dataSource.filter(gridFilter);
    }

}
user_26826230

I had the same problem. If no filters exist, dataSource.filter() returns undefined which is a problem if you want to add filters. But using something like

dataSource.filter({ field: "abc", value: "1" });

results in a datasource read operation which was undesired in my case. Therefore I manipulated the datasource properties.

var grid = $("#grid").data("kendoGrid");
var dataSource = grid.dataSource;
var filterConfig = dataSource.filter();
if (typeof filterConfig == 'undefined') {     //no filters exist
    filterConfig = { filters: [], logic: "and" };
    grid.dataSource._filter = filterConfig;
}
user_1825420
Related