Hi, This is driving me crazy.  My karat icons are not centered:

I've made sure everything is set up properly and have tried targeting that exact class and padding the top via css.  Nothing seems to work.

What could be the issue?

kendo 19.3.0, angular 19.2.17. 

applying kendoGridToolbarFocusable to kendo-dropdownlist gives it the correct behavior to stay focused on click but this same behavior did not work for kendo-multiselect. it stays open so long as the click is held in but once released it closes. if the mouse is hovered over the dropdown that opens AND THEN released, the multiselect stays open and has intended behavior after selecting items.

kendoGridFocusable was also tried in this scenario and did not produce results.

<ng-template kendoGridToolbarTemplate>
<kendo-dropdownlist style="min-width:220px; margin-right:5px; margin-left:5px"
                    kendoGridToolbarFocusable
                    [data]="names"
                    (valueChange)="handleApplyAllValueChange()"
                    [defaultItem]="defaultApplyAllItem"
                    [textField]="'nm'"
                    [valueField]="'id'"
                    [(ngModel)]="applyAllItem"
                    [hidden]="isRevisedRadioButton()">
</kendo-dropdownlist>
<kendo-multiselect style="min-width:220px; max-width:220px; max-height: 140px; overflow-y: auto"
                   kendoGridToolbarFocusable
                   [data]="applyAllSecondaryList"
                   [textField]="'nm'"
                   [valueField]="'id'"
                   [disabled]="isApplyAllSecondaryDisabled()"
                   [autoClose]="false"
                   [(ngModel)]="applyAllSecondaryItem"
                   [placeholder]="'Select Secondary'"
                   [hidden]="isRevisedRadioButton()">
  <ng-template kendoMultiSelectTagTemplate let-dataItem kendoGridToolbarFocusable>
    {{ dataItem.deviationNm }}
</ng-template>
</kendo-multiselect>
</ng-template>

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?