AngularJS Kendo UI grid with row filters behaviour

Question

I am using Kendo UI Grid with row filters. i am facing filters options issue. I am using Filterbale.cell.template for filters to display kendo autoComplete. Issue is as displayed in image autocomplete options are not updating on selecting of one of the filters.

Below is my html

 <div ng-controller="VehiclesController" class="my-grid" >

  <kendo-grid options="vehiclesGridOption">
  </kendo-grid>
</div>

Below is my Controller

 $scope.vehiclesGridOption = {
      dataSource: {
        schema: {
          id: "_id",
          model: {
            fields: {
              make: {type: "string"},
              model: {type: "string"},
              year: {type: "number"}
            }
          }
        },
        transport: {
          read: function (e) {

            vehicleService.vehicles().then(function (response) {
              e.success(response);
              console.log(response.length);
            }).then(function () {

              console.log("error happened");

            })

          }
        },
        pageSize: 12,
        pageSizes: false,
      },
      sortable: {
        mode: "multiple",
        allowUnsort: true
      },
      filterable: {
        mode: "row"
      },
      pageable: {
        buttonCount: 5
      },
      columns: [
        {
          title: "",
          template: '',
          width: "3%" // ACTS AS SPACER
        },
        {
          field: "make",
          title: "Make",
          filterable: {
            cell: {
              operator: "contains",
              template: function (args) {
                args.element.kendoAutoComplete({
                  dataSource: args.dataSource,
                  dataTextField: "make",
                  dataValueField: "make",
                  valuePrimitive: true,
                  placeholder: "Make",
                });
              }
            }
          },

          width: "29%",
        }, {
          field: "model",
          filterable: {
            cell: {
              operator: "contains",
              template: function (args) {
                console.log(args);
                args.element.kendoAutoComplete({

                  dataSource: args.dataSource,
                  dataTextField: "model",
                  dataValueField: "model",
                  valuePrimitive: true,
                  placeholder: "Model",
                });
              }
            }
          },
          title: "Model",
          width: "29%",
        }, {
          field: "year",
          title: "Year",
          filterable: {
            cell: {
              template: function (args) {
                args.element.kendoAutoComplete({
                  dataSource: args.dataSource,
                  dataTextField: "year",
                  dataValueField: "year",
                  placeholder: "Year",
                  suggest: true,
                  ignoreCase: true,
                  filter: "gte"
                });
              }
            }
          },
          width: "29%",
        },
        {
          field: "",
          title: "Edit",
          template: '<a class=\"k-link text-center grid-edit-btn vehicle-grid-edit-btn\" ui-sref="vehicleDetails({\'id\': \'#=_id #\' })"><span class=\"icon-editpencil icon-grid\"></span></a>',
          width: "10%",
        }],

    };

Below is the Issue if user selects the Make in the first column filter then Model filter should display only selected make models like Honda (make)-> Accord , Civic ..etc but its displaying all unique values irrespective of model filter..

M. Noreikis M. Noreikis · Accepted Answer · 2015-11-17T12:40:22

Kendo filter row uses the same dataSource from the grid component, just providing unique values. Since the autocomplete components are initialized when the grid dataSource is empty, they always show all the values. You can manually filter based on current filter row values.

Firstly, add ids for your coresponding autocomplete components i.e. inside template functions:

args.element.attr('id', 'make'); 
//<...> 
args.element.attr('id', 'model'); 
//<...> 
args.element.attr('id', 'year');

Then add a data bound event to the grid (since autocomplete components do not fire change events when filters are cleared).

$scope.vehiclesGridOption = {
    //...
    dataBound : function(e) {
        setTimeout(function() { //timeout is to make sure value() is already updated
            var make = $('#make').data('kendoAutoComplete').value();
            if (make) {
                $('#model').data('kendoAutoComplete').dataSource.filter({field: 'make', operator: 'eq', value: make });
            } else {
                $('#model').data('kendoAutoComplete').dataSource.filter({});
            }
        });
    }
}

Or if you also want to filter by "Year" column, it could go like this:

$scope.vehiclesGridOption = {
    //...
    dataBound: function(e) {
        setTimeout(function() { //timeout is to make sure value() is already updated
            var make = $('#make').data('kendoAutoComplete').value();
            var model = $('#model').data('kendoAutoComplete').value();
            if (make) {
                $('#model').data('kendoAutoComplete').dataSource.filter({field: 'make', operator: 'eq', value: make });
            } else {
                $('#model').data('kendoAutoComplete').dataSource.filter({});
            }

            var yearFilter = {filters: [], logic: 'and'};
            if (make) {
                yearFilter.filters.push({field: 'make', operator: 'eq', value: make });
            }
            if (model) {
                yearFilter.filters.push({field: 'model', operator: 'eq', value: model });
            }
            $('#year').data('kendoAutoComplete').dataSource.filter(yearFilter.filters.length ? yearFilter : null);

        });
    }
}

AngularJS Kendo UI grid with row filters behaviour

1 Answers