This is a migrated thread and some comments may be shown as answers.

Filterable Cascading DropDownList?

6 Answers 269 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Divyesh
Top achievements
Rank 1
Divyesh asked on 01 Aug 2017, 02:10 PM
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!

6 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 03 Aug 2017, 08:41 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Divyesh
Top achievements
Rank 1
answered on 03 Aug 2017, 01:53 PM
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
0
Divyesh
Top achievements
Rank 1
answered on 03 Aug 2017, 02:05 PM
Edit: Apologies, here's the plunker: http://plnkr.co/edit/rbSgFcorU1RGqoqoJlyq?p=preview
0
Divyesh
Top achievements
Rank 1
answered on 03 Aug 2017, 02:05 PM
Edit: Apologies, here's the link: http://plnkr.co/edit/rbSgFcorU1RGqoqoJlyq?p=preview
0
Dimiter Topalov
Telerik team
answered on 07 Aug 2017, 12:53 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Divyesh
Top achievements
Rank 1
answered on 08 Aug 2017, 02:49 PM
Perfect, thank you very much Dimiter!
Tags
DropDownList
Asked by
Divyesh
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Divyesh
Top achievements
Rank 1
Dimiter Topalov
Telerik team
Share this question
or