在kendoFilter Widget中实现搜索

Question

我使用的是Kendofilter小工具。https:/demos.telerik.comkendo-uifilter。

我想在字段下拉菜单中添加搜索功能，因为我有大量的记录。

有没有什么办法可以实现这一点。我没有在文档中找到任何相关的信息，虽然它有关于编辑器模板的值的细节，但没有选择字段。

Answer 1

你有两个选择。

第一个是向Kendo申请这个功能，例如在 https:/feedback.telerik.comkendo-jquery-ui。

第二种是黑客入侵找到字段选择。由于使用的是内部未记录的功能，在未来的剑道版本中可能会出现破绽，所以要谨慎进行。

在一个适当的事件中，找到字段选择，并给它们加上 filter: "contains" 选项。

$("#filter").find(".k-filter-field select.k-filter-dropdown").each(function(i, x) {
  $(x).data("kendoDropDownList").setOptions({ filter: "contains" });
});

演示： https:/dojo.telerik.com@GaloisGirloMiLiyIt。

Answer 2

由于我使用Kendo jQuery widget与Angular。所以把我的改动贴出来，如果有人可能需要这个在Angular中使用。我在typescript中使用了GaloisGirl提供的解决方案。

.html****

<div #positionFilter></div>

.ts****

import { Component, OnInit, ElementRef, ViewChild, Output, Input, EventEmitter } from '@angular/core';

declare var kendo: any;

@Component({
  selector: 'filter',
  templateUrl: './filter.component.html',
  styleUrls: ['./filter.component.css']
})

export class FilterComponent implements OnInit {

  @ViewChild('positionFilter') positionFilter: ElementRef;

  constructor() { }

  ngOnInit() {
    this.loadFilter(this.positionFilter.nativeElement);
  }


  private loadFilter(filterContainer){
    kendo.jQuery(filterContainer).kendoFilter({
      dataSource: [],
      applyButton: false,
      expressionPreview: true,
      change:this.addSearchInDropdown.bind(this),
      fields: 

      [
          { name: "ProductName", label: "Product Name" },
          { name: "CategoryID", type: "number", label: "Category"},
          { name: "UnitPrice", type: "number", label: "Unit Price"},
          { name: "UnitsInStock", type: "date", label: "Units In Stock" },
          { name: "QuantityPerUnit", label: "Quantity Per Unit" },
      ]
    });
  }

  addSearchInDropdown(){
    let container = this.positionFilter.nativeElement;
    kendo.jQuery(container).find(".k-filter-field select.k-filter-dropdown").each(function(i, x) {
      kendo.jQuery(x).data("kendoDropDownList").setOptions({ filter: "contains" });
    });
  }

}