Custom filter function for Kendo Grid with multiselect column

Question

I need to write a custom filter function. I have a kendo grid with multiple columns, i.e. name, age, city. The name column should be multiselect. Now, when filtering, the logic on the entire grid should be "and" but that specific column (name) should have an "or" logic.

I have seen this post and several other similar posts. In this example, telerik suggest removing the data-bind attribute

element.removeAttr("data-bind");

This works really well, until I want to clear all of the tags from the multiselect field. FYI, the grid is configured as filterMode: "row". In this scenario, the tags do not clear at all.

So now, here I am attempting to write a custom filter function. Here is what I have so far:

filterable: {
    multi: true,
    cell: {
        template: function getteamplate(args) {
            args.element.kendoMultiSelect({
                dataSource: args.dataSource,
                dataTextField: "name",
                dataValueField: "name",
                change: function change(e) {
                    var dataSource = $scope.grid.dataSource;

                    // if filters are not yet set, do so now
                    if (!dataSource.filter()) {
                         $scope.grid.dataSource.filter({
                             logic: "and",
                             filters: []
                         });
                    }

                    var dataFilters = dataSource.filter().filters;

                    var values = this.value();
                    if (values.length > 0) {
                        $log.log("filtering");
                        var newFilter = {
                            field: "name",
                            operator: function operator(item, value) {
                                $log.log("Item: " + item);
                                $log.log(value());
                                var found = false;

                                value().forEach(function forEach(element) {
                                    $log.log("Value: " + element);
                                    if (item.indexOf(element) !== -1) {
                                       found = true;
                                    }
                                });
                                return found;
                            },
                            value: values,
                            fieldName: "dataSource"
                        };

                        dataFilters.push(newFilter);
                        $log.log(dataFilters);
                    }

                    dataSource.filter({
                        logic: "and",
                        filters: dataFilters
                    });
                }
            });

            //args.element.removeAttr("data-bind");
        },

        showOperators: false
    }
}

A couple of things worth noting

My custom filter function never seems to execute, as I do not see anything in the console.
Following this forum post, this code seems very straight forward:

operator: function(item, value){ //implement your logic }

Except it's not documented well and I'm not sure what the parameters 'item' and 'value' are or where they come from.

E. Bekas E. Bekas · Accepted Answer · 2016-09-12T09:01:26

A little bit late but nevermind. In order the tags to be cleared properly i added the following things

Added an id property to the dom element of the multiselect object as follows

 function getteamplate(args) {
    args.element[0].id = "<<filterElementID>>";
    args.element.kendoMultiSelect({
                dataSource: args.dataSource,
                .............

Added a check in the grid's dataSource dataBound event such that whenever the dataSource filters does not contain the "MultiSelect" filter (filter.field = name) clear the dom element's value

if(!_.find(this.dataSource.filter() ? this.dataSource.filter().filters : [] , 
                function(filter){
                    return filter.field == "name"
                }))
            $("#<<filterElementID>>").data().kendoMultiSelect.value([]);

Custom filter function for Kendo Grid with multiselect column

1 Answers