Declined
Last Updated: 16 Jan 2020 12:09 by ADMIN
Created by: Julian
Comments: 1
Category: DropDownList
Type: Feature Request
1

Hello,

we want to show filtered data in the options list of the dropdown component and request a feature, to provide a filter callback function or the possiblity to pass different data sources to the component.

The use case is, that the dropdown should show existing values but when opening the dropdown list, the user should only be able to select a subset of the data source. Yes there is the possibility to disable items, but we want to complete hide them as a choice.

Currently we apply the workaround to filter the data on the open event and reset the data on the close event but we think, that this can be a common feature for the dropdown list.

 

Thank you!

Declined
Last Updated: 16 Apr 2019 12:12 by ADMIN

In the example below "X-Small" is initially the selected item in the dropdown.  Once you click the "Sort" button and sort the array, "2X-Large" becomes the highlighted item in the dropdown but "X-Small" is displayed.  I would expect that "X-Small" would be highlighted.  After opening and closing the dropdown "2x-Large" becomes the selected item even if you don't select it.  The same behavior does not happen with a simple select dropdown.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <form>
    <div>
      <p>T-shirt size:</p>
      <kendo-dropdownlist [data]="listItems" [(ngModel)]="selectedShirt" name="shirtsize">
      </kendo-dropdownlist>
    </div>
    <br/>
    <div>
    <select [(ngModel)]="selectedShirt" name="shirtsize2">
      <option *ngFor="let d of listItems">{{d}}</option>
    </select>
    </div>
    <br/>
    <button (click)="sortArray()">Sort</button>
  </form>
  `
})
export class AppComponent implements OnInit {
    public listItems: Array<string> = ["X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large"];
    public selectedShirt: string;
    ngOnInit(){
      this.selectedShirt = this.listItems[0];
    }

    sortArray(){
      this.listItems.sort((a, b) => a.localeCompare(b));
    }
}