在 kendoFilter 小部件中实现搜索

Question

我正在使用 Kendofilter 小部件。 https://demos.telerik.com/kendo-ui/filter

我想在字段下拉列表中添加搜索，因为我有大量记录。

有没有办法实现这个。我没有在 documentation.Although 中找到任何相关信息，它有关于值的 editorTemplate 的详细信息，但没有关于选择字段的详细信息。

Answer 1

你有两个选择。

第一个是向 Kendo 请求此功能，例如 https://feedback.telerik.com/kendo-jquery-ui

第二个正在四处寻找字段 select。由于它使用内部的、未记录的功能，它可能会在未来的 Kendo 版本中中断，因此请谨慎操作。

在适当的情况下，找到字段 selects 并为他们提供 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/@GaloisGirl/oMiLiyIt

Answer 2

因为我正在使用 Kendo jQuery 小部件和 Angular。所以发布我的更改，如果有人可能需要它在 Angular 中使用。我在打字稿中使用了 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" });
    });
  }

}

在 kendoFilter 小部件中实现搜索

Implement Search in kendoFilter Widget

jquery

kendo-ui