Question

我正在使用带有行过滤器的Kendo UI Grid。我正面临过滤器选项问题。我使用Filterbale.cell.template过滤器来显示kendo autoComplete。问题显示在图像中，自动完成选项在选择其中一个过滤器时未更新。

以下是我的HTML

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

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

以下是我的控制器

 $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%",
        }],

    };

如果用户在第一列过滤器中选择了Make，那么下面是问题，那么模型过滤器应该只显示选定的make模型，如Honda（make） - ＆gt;雅阁，思域..但它显示所有独特的价值，无论模型过滤器..

Answer 1

Kendo过滤器行使用来自网格组件的相同dataSource，只提供唯一值。由于在网格dataSource为空时初始化自动完成组件，因此它们始终显示所有值。您可以根据当前过滤器行值手动过滤。

首先，为相应的自动完成组件添加id，即在模板函数内部：

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

然后将数据绑定事件添加到网格中（因为自动完成组件在清除过滤器时不会触发更改事件）。

$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({});
            }
        });
    }
}

或者如果您还希望过滤＆＃34;年＆＃34;专栏，它可以这样：

$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网格具有行过滤器行为

1 个答案: