Hi,
I use the kend dropdownlist with a attached kendo-label. However the "for" reference of the label is marked as invalid (at least by "AInspector" and "WAVE" Accessibility testing tools). 

Please see attached screen shots, where I tested against the first example from the kendo docs
( https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/dropdownlist/basic_usage?theme=default-ocean-blue-a11y )

DOM inspection of the example shows, that the label properly references the dropdownlist, also the aria-labelledby reference is correct:

<kendo-label text="Find restaurants in your area" dir="ltr"><!---->
  <label for="k-9997b5c1-2233-4273-ba25-6e344c093c3d" id="k-2a8d206c-3623-44ce-a03d-c8c097acc5a6">
  Find restaurants in your area<!----></label>
      <kendo-dropdownlist ... 
                      aria-describedby="k-80ee2bb7-41d8-4c8b-9afc-08898b371395"
                      id="k-9997b5c1-2233-4273-ba25-6e344c093c3d" ... aria-labelledby="k-2a8d206c-3623-44ce-a03d-c8c097acc5a6">
          <button ...>...</button>
            ...       

The problem could be, that the label references the <kendo-dropdownlist> tag itself, not the included button or other included elements.

According to HTML documentation , only "labelable elements" can be referenced by the "for" reference of a label (e.g. button, input, see labelable elements ).

My question is, how to deal with it, and how to explain the warnings to our customers...

Thank you in advance!

Hi Team,

I have default text filter (manual/server side) and want to have another filter as dropdownlist but both filters together  working

Sample : https://stackblitz.com/edit/dvv6dr8o

Before Filter

After apply both filters and remove filter for "Product Name" is not working. Also the filter array lost the selection for  "Category" field.
Also I need help to clear the dropdownlist/filter for category.

Hello,

I have a dropdownlist that I just cannot select anything out of.  Here's my code:

If you look at the changeParentalControl there's a debugger inside that doesn't get hit.

HTML:

<kendo-dropdownlist
      [data]="getParentalControlLevels()"
      [textField]="'description'"
      [valueField]="'name'"
      [value]="getParentalControlLevelDisplay(itemPropertyEdit[1])"
      (valueChange)="changeParentalControl($event)"
/>

TS:

interface ParentalControlLevelDisplay {
  id: number;
  description: string;
  name: string;
}

getParentalControlLevels(): ParentalControlLevelDisplay[] {
    if (this.assignments.length <= 1) return [];
    return [
        {id: 0, name: '', description: 'Adults, Teens, Kids'},
        {id: 1, name: 'teens', description: 'Adults, Teens'},
        {id: 2, name: 'adults', description: 'Adults'},
      ];
 }

getParentalControlLevelDisplay(name: any): ParentalControlLevelDisplay | undefined {
    let itemParentalControlTypes: ParentalControlLevelDisplay[] = [
        {id: 0, name: '', description: 'Adults, Teens, Kids'},
        {id: 1, name: 'teens', description: 'Adults, Teens'},
        {id: 2, name: 'adults', description: 'Adults'},
    ];
    let found = itemParentalControlTypes.find((t) => t.name == name);
    return (found === undefined) ? undefined : found;
}

itemPropertyEdit: [string, string] = ['itemParentalControlLevel', 'adults'];

public changeParentalControl(event: any) {
    debugger;  // <--- this doesn't get hit!
    this.itemPropertyEdit = event;
}

I'm implementing a search form using an ngbDropdown and the form contains a kendo-dropdownlist (to select what object type they want to search)

Unfortunately, when I select an option from the dropdown list, the menu closes. "autoClose" set to "false" works, but gives unwanted behaviour (in that the form itself almost never goes away). Worse, "autoClose" set to "outside" makes no difference.

Is there something I'm doing wrong?

Just to give an idea of what I'm doing, this is the beginning of the code (using Kendo 17.3.12):

<div ngbDropdown [autoClose]="'outside'" #searchMenu="ngbDropdown">
  <div id="searchMenuInner" ngbDropdownToggle>
    <span class="fa-solid fa-magnifying-glass"></span>
  </div>
  <div ngbDropdownMenu aria-labelledby="searchMenuInner">
    <div ngbDropdownItem>
      <div class="menu-header">Search</div>
      <div class="menu-item">
        <kendo-dropdownlist #searchType [data]="searchableItems"

Hello,

We encountered a problem inside our app while using the kendo-treelist component.

As shown in the video attached, we use a template to edit the values in the tree, which is either kendo-dropdownlist or kendo-numerictextbox. At the press of the kendo-icon-wrapper, which contains that arrow SVG icon (for increasing/decreasing the value or selecting from the dropdown), the whole row will either collapse or expand depending on the current state that it has.

From debugging, we believe that because the same SVG icon has been used, it might trigger the collapsing/expanding.

After adding a kendo-icon-wrapper component inside that cell, we could observe the same behaviour when pressing next to the 'test' text.

We are looking for a solution to this problem.

Thank you in advance.

I used this page https://www.telerik.com/kendo-angular-ui/components/filter/expression-value-template as a reference to get a filter working on my application.  We have a list of objects that have a name and id, used as the the text and value of the drop down.  Selecting an option sets the filter option correctly and filters the list, but the drop down list does not show that any options have been selected.  Is this just an issue with object dropdownlists on filters?

I couldn't get stackblitz to work, but here's an example that produces the issue.

I have a flat list of objects that I am grouping for a dropdown list.  The issue is that no matter what, the order of the groups is always in descending order, even if I provide the "dir" sort descriptor.  Please see the following code

//Group departments by user departments and other for easier access on UI
this.departments.forEach(department => {
  department["subCategory"] = this.isMyDept(department.id) ? "My Departments": "Others";
});
this.departmentGrouping = groupBy(this.departments, [
  { field: "subCategory", dir: "asc" },
]) as GroupResult[];

<kendo-dropdownlist
            [(ngModel)]="deptID"
            [data]="departmentGrouping"
            [filterable]="true"
            [showStickyHeader]="false"
            textField="name"
            valueField="id"
            [valuePrimitive]="true"
          >
</kendo-dropdownlist>

When my dropdown is displayed, the "Others" group is always on top.  It doesn't matter if I change the "dir" descriptor to "asc" or "desc" in the groupBy function, nothing changes.  How do I sort the group order so I can have "My Departments" as the top group?

Is it possible to customize the black triangular "caret-down" icon used in the DropdownList and similar components (like ComboBox)?

I’d also like to know how to replace the "caret-up" and "caret-down" icons in the NumericTextBox.

Our apps use Font Awesome icons consistently, and I’m trying to replace these default icons with Font Awesome equivalents, but I haven’t been able to figure out how to do this. Could you provide guidance or examples?