CODEWITHSUNDEEP
jquerykendo-ui
Amit
Amit

Reputation: 1491

Implement Search in kendoFilter Widget

I am using Kendofilter widget. https://demos.telerik.com/kendo-ui/filter

I would like to add search in the Fields Dropdown since I have large number of records.

Is there anyway we can achieve this. I didnt find any relevant info in the documentation.Although it has details about editorTemplate for values but not for selecting fields.

Upvotes: 0

Views: 395

Answers (2)

Amit
Amit

Reputation: 1491

Since I am using Kendo jQuery widget with Angular. So posting my change, if anyone might need this to use in Angular. I have used solution provided by GaloisGirl in typescript:

.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" });
    });
  }

}

Upvotes: 1

GaloisGirl
GaloisGirl

Reputation: 1516

You have two options.

The first one is to request this feature from Kendo, for instance at https://feedback.telerik.com/kendo-jquery-ui

The second one is hacking around to find the field select. Since it's using internal, undocumented features, it may break in a future Kendo version, so proceed with care.

In an appropriate event, find the field selects and give them the filter: "contains" option:

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

Demo: https://dojo.telerik.com/@GaloisGirl/oMiLiyIt

Upvotes: 3

Related Questions