I want to display the applied filter criteria on the Kendo UI Grid

前端 未结 2 1724
感动是毒
感动是毒 2021-02-10 18:58

How can I display any applied filter criteria on the Kendo UI Grid. I would like to have a readonly display, of the applied criteria. Current functionality does allow user to ap

2条回答
  •  星月不相逢
    2021-02-10 19:18

    The Kendo UI data source doesn't have a filter event, so you'd need to implement that yourself. Then when the event is triggered, you can get the current filter and format it in whatever way you want it displayed.

    For example:

    var grid = $("#grid").kendoGrid(...);
    
    // override the original filter method in the grid's 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 + "
    " + "Operator: " + filter.operator + "
    " + "Value: " + filter.value + "

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

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

    See demo here.

    Note that filters can be nested, so once that happens, this example code won't be enough - you'll have to make the code that converts the filters to HTML recursive.

    In order to augment all data sources with the "afterfilter" event, you have to change the DataSource protototype instead of changing it on your instance:

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

    If you want to integrate the whole thing into all grid widgets, you could create a new method filtersToHtml which gets you the HTML represenatation and add it to kendo.data.DataSource.fn like demonstrated above (or you could create your own widget derived from Kendo's grid); in the same way you could add a method displayFilters to kendo.ui.Grid.fn (the grid prototype) which displays this HTML representation in a DOM element whose selector you could pass in with the options to your widget (you could ultimately also create this element within the grid widget). Then instead of triggering "afterfilter" in the filter method, you could call displayFilters instead.

    Considering the complexity of the complete implementation which always displays filters, I'd suggest extending the Kendo grid instead of simply modifying the original code. This will help keep this more maintainable and gives it a bit of structure.

提交回复
热议问题