CODEWITHSUNDEEP
javascriptkendo-uikendo-grid
RK911
RK911

Reputation: 152

How to filter kendo grid with a column that contains multiselect - multiple values?

I have a multiselect grid column same as onabai (awesome guy on so!) I need to put filter menu on that column.

http://onabai.wordpress.com/2013/07/17/kendoui-multiselect-in-a-grid-yes-we-can/

I have added custom filter on the multivalue column

  filterable: {
    ui: function(element) {
      element.kendoDropDownList({
        dataSource: [ "London", "Surat", "New York"]  //etc
      });
    }

The filter shows up on the grid column but the filter does not filter. I guess, I need to somehow capture the filter change event and filter data source based on value selected.

Any pointers?

Thanks.

Upvotes: 1

Views: 6421

Answers (1)

yccteam
yccteam

Reputation: 2311

This took me a while to grasp but you can use kendoGrid custom filters for this.

I've created a function to setup the multiselect as the UI and its filter function:

function userFilter(element) {
console.log(element);
element.removeAttr("data-bind");
  //$scope.kGrid.dataSource.query({ filter: filter });

  $scope.userFilterElement = element.kendoMultiSelect({
      dataSource: $scope.users,
      optionLabel: "--Select Value--",
      change: function(e){
        var filter = { name: "user", logic: "or", filters: [] };
        var values = this.value();
        $.each(values, function(i, v) {
          filter.filters.push({field: "user", operator: "eq", value: v });
        });
        //$scope.kGrid.dataSource.filter(filter);
        if ($scope.gridFilter.filters[0] && $scope.gridFilter.filters[0].name == 'user'){
          if (filter.filters.length > 0)
            $scope.gridFilter.filters.splice(0,1,filter);
          else
           $scope.gridFilter.filters.splice(0,1);

        }
        else
          $scope.gridFilter.filters.push(filter);
        $scope.kGrid.dataSource.filter($scope.gridFilter);
      }
  });

}

That's a relatively crude and basic example which I simplified for the sake of easier code reading. Here's a working code: http://plnkr.co/edit/8N1oNpsd10CJwBrWKpK3?p=preview After the grid loads, click on "add data" a few times, and then filter the users and use multiple variables. Hope this helps.

Upvotes: 3

Related Questions