jquery kendo grid filter property is undefined

Question

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?

Answer 1

@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);
    }

}