Filterable Cascading DropDownList?

[Divyesh]

Is it possible to have cascading dropdowns with filter property enabled? I tried it here: http://plnkr.co/edit/SacIK6ZROuhAYCoOZ0vg?p=preview

I can see the little search bar in the dropdown, but it's not getting filtered.

Thanks!

[Alexander Valchev]

Hello Divyesh,

In order to implement filtering, in filtering event handler, you should modify the data property of the component.

public filterChange(filter: string): void {
      this.dataResultCategory = this.dataCategory.filter((s) => s.categoryName.toLowerCase().indexOf(filter.toLowerCase()) !== -1);
}

<kendo-dropdownlist
    [data]="dataResultCategory"
    [value]="selectedCategory"
            [filterable]="true"
            (filterChange)="filterChange($event)"
    [defaultItem]="defaultItemCategories"
    [textField]="'categoryName'"
    [valueField]="'categoryId'"
    (valueChange)="handleCategoryChange($event)"
>
</kendo-dropdownlist>

Here is a link to the updated Plunker: http://plnkr.co/edit/se7GqCzbhQ8rrxnljRwt?p=preview

I hope this will help.

Regards,
Alexander Valchev
Progress Telerik

[Divyesh]

Hi,

Thank you! That works great. I'm trying to get it working for the other two dropdowns, but it's not working. Is it because of them being disabled initially?

Updated plunker for reference : http://plnkr.co/edit/se7GqCzbhQ8rrxnljRwt?p=preview

[Divyesh]

Edit: Apologies, here's the plunker: http://plnkr.co/edit/rbSgFcorU1RGqoqoJlyq?p=preview

[Divyesh]

Edit: Apologies, here's the link: http://plnkr.co/edit/rbSgFcorU1RGqoqoJlyq?p=preview

[Dimiter Topalov]

Hello Divyesh,

The filterChange event handler needs to be operating with the data set the respective DropDownList is bound to, and use its data item properties, for example the Categories data items have a categoryName field, while the Products have productName, and the Orders have orderName:

public categoryfilterChange(filter: string): void {
      this.dataResultCategory = this.dataCategory.filter((s) => s.categoryName.toLowerCase().indexOf(filter.toLowerCase()) !== -1);
  }

    public productfilterChange(filter: string): void {
      this.dataResultProducts = this.dataProducts.filter((s) => s.productName.toLowerCase().indexOf(filter.toLowerCase()) !== -1);
  }

  public orderfilterChange(filter: string): void {
      this.dataResultOrders = this.dataOrders.filter((s) => s.orderName.toLowerCase().indexOf(filter.toLowerCase()) !== -1);
  }

Using categoryName.toLowerCase() in the context of items that do not have a categoryName field, leads to a JavaScript reference error. Adjusting the example, as described above, resolves this issue and it is working as expected:

http://plnkr.co/edit/01so5Z0SxNLNq8E38bez?p=preview

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Divyesh]

Perfect, thank you very much Dimiter!