Declined
Last Updated: 22 Dec 2021 11:50 by ADMIN
Michael D
Created on: 07 Dec 2021 12:56
Category: DropDownList
Type: Bug Report
0
DropDownList does not mark selected item when filtering

The Kendo UI DropDownList allows the user to entera filter which is applied on the available items (documented here: https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/configuration/filter). As soon as a filter term entered by the user is applied to the dataSource, the selected item is no longer marked. Usually, the .k-state-selected CSS class is set on the corresponding DOM element.

This behavior can also be reproduced in the official Kendo UI Dojo about filtering: https://dojo.telerik.com/eVuSopuj

3 comments
ADMIN
Neli
Posted on: 22 Dec 2021 11:50

Hi Michal,

The item will not be marked as selected only while filtering. If the user enters some text in the filter input, but then clears it, the selection will not be changed. Here is a screencast where this could be observed. The described behavior is by design.

I remain at your disposal for any further questions on the matter. 

Regards,
Neli
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Michael D
Posted on: 15 Dec 2021 14:06

Hi Neli!

The point I thought of as a bug was that a user's existing selection is (visually) removed when filtering. While the selected item stays the selected item in the dataSource, it is no longer rendered as selected.

Is it by design that filtering removes the user's selection?

Kind regards, Michael

ADMIN
Neli
Posted on: 14 Dec 2021 09:54

Hello Michael,

The observed behavior is expected. The 'k-state-selected' class will be applied to an item in the DropDownList after the user made a selection or an item is selected using the select method. In case you need to programmatically select an item after filtering I would suggest you use the select method. For example, in the dataBound event handler, you could check the count of the filtered items and select the first one. Below is an example:

dataBound: function(e){          
          if (e.sender.dataSource._view.length > 0 && e.sender.filterInput.val() !== "") {            
               $("#dropdownlist").data('kendoDropDownList').select(0);             
          }
}

Here is the modified Dojo example. 

Let me know in case you have additional questions on the matter.

Regards,
Neli
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.