Filterable Cascading DropDownList?

7 posts, 0 answers
  1. Divyesh
    Divyesh avatar
    17 posts
    Member since:
    Jun 2017

    Posted 01 Aug Link to this post

    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!
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2887 posts

    Posted 03 Aug Link to this post

    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.
  3. Divyesh
    Divyesh avatar
    17 posts
    Member since:
    Jun 2017

    Posted 03 Aug in reply to Alexander Valchev Link to this post

    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
  4. Divyesh
    Divyesh avatar
    17 posts
    Member since:
    Jun 2017

    Posted 03 Aug in reply to Divyesh Link to this post

    Edit: Apologies, here's the plunker: http://plnkr.co/edit/rbSgFcorU1RGqoqoJlyq?p=preview
  5. Divyesh
    Divyesh avatar
    17 posts
    Member since:
    Jun 2017

    Posted 03 Aug in reply to Divyesh Link to this post

    Edit: Apologies, here's the link: http://plnkr.co/edit/rbSgFcorU1RGqoqoJlyq?p=preview
  6. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    628 posts

    Posted 07 Aug Link to this post

    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.
  7. Divyesh
    Divyesh avatar
    17 posts
    Member since:
    Jun 2017

    Posted 08 Aug in reply to Dimiter Topalov Link to this post

    Perfect, thank you very much Dimiter!
Back to Top