I want to display the filter criteria in the Kendo UI grid

Question

How can I display any applicable filter criteria in the Kendo UI grid. I would like the display to show only the displayed value. The current functionality allows the user to apply the filter, but the user must go to the filter menu to view the filter details.

Answer 1

The Kendo UI data source does not have a filter event, so you will need to implement this yourself. Then, when the event fires, you can get the current filter and format it in whatever way you want to display.

For example:

var grid = $("#grid").kendoGrid(...);

// override the original filter method in the grid data source
grid.dataSource.originalFilter = grid.dataSource.filter;
grid.dataSource.filter = function () {
    var result = grid.dataSource.originalFilter.apply(this, arguments);
    if (arguments.length > 0) {
        this.trigger("afterfilter", arguments);
    }

    return result;
}

// bind to your filter event
grid.dataSource.bind("afterfilter", function () {
    var currentFilter = this.filter(); // get current filter

    // create HTML representation of the filter (this implementation works only for simple cases)
    var filterHtml = "";
    currentFilter.filters.forEach(function (filter, index) {
        filterHtml += "Field: " + filter.field + "<br/>" +
            "Operator: " + filter.operator + "<br/>" +
            "Value: " + filter.value + "<br/><br/>";

        if (currentFilter.filters.length > 1 && index !== currentFilter.filters.length - 1) {
            filterHtml += "Logic: " + currentFilter.logic + "<br/><br/>";
        }
    });

    // display it somewhere
    $("#filter").html(filterHtml);
});

.

, , , , - , HTML .

"afterfilter", DataSource :

kendo.data.DataSource.fn.originalFilter = kendo.data.DataSource.fn.filter;
kendo.data.DataSource.fn.filter = function () {
    var result = this.originalFilter.apply(this, arguments);
    if (arguments.length > 0) {
        this.trigger("afterfilter", arguments);
    }

    return result;
}

, filtersToHtml, HTML kendo.data.DataSource.fn, ( , Kendo); displayFilters kendo.ui.Grid.fn ( ), HTML DOM, ( ). "afterfilter" displayFilters .

, , Kendo . .

Answer 2

. , , "x" " ".

, ,

filterable: {
        mode: "menu, row"
    }