Bug report

`DropDownListSelectEvent.dataItem` is undefined when using keyboard to select the optionLabel, but is defined when using the mouse

Reproduction of the problem

Steps

Dojo: https://dojo.telerik.com/IvEXOvUH

Make a selection (e.g. "Apples").
Select the optionLabel item.

Expected

The value of DropDownListSelectEvent.dataItem is the same whether the selection is made via keyboard or mouse (assumedly).
The value of DropDownListSelectEvent.dataItem is clearly specified in the API docs when selecting the optionLabel.

Actual
The value of DropDownListSelectEvent.dataItem is "Select an option…" when selecting with the mouse.
The value of DropDownListSelectEvent.dataItem is undefined when selecting with the keyboard.

Environment
Kendo UI version: 2024.1.130
Browser: [all]

Hi Team, 

I would like to request to add a class which associates with the Kendo DropDownList.  This way, the developer could use CSS instead of jQuery to change the style of the specific popup.  

Thank you!

Hi Team,

I'd like to request the functionality to add a Clear Button  for the Kendo UI DropDownList similar to the ComboBox.  

Thank you!

Add a filterOptions option that will enable users to configure attributes, placeholder, etc for the search box of the DropDownList. 

Add support for autoScroll to DropDownList options, such that the list scrolls when the mouse pointer reached the top of bottom of the container. Currently, autoScroll: true has no effect on that component. 

Mouse wheel scrolling of the options is not obvious to users, causing some to miss options that overflow the container.

I'm using your demo to reproduce the issue.  

When the user enters a value into the categories and tabs, the focus is not placed in the products field, instead it goes to the View Order button.  This makes using the cascade "feature" very difficult for users.  The focus should go products so they can further refine the search.  And then finally to orders.  But each time they tab they have to move the cursor back to the next field.

Also, since the product and order fields are disabled it prevents user from entering data (even if they know the correct value).  Is there a way to leave the cascade functionality whilst leaving the "child" fields enabled?  We were using it in a Region, Country, City filter, but because of these issues we have had to remove the cascade.

Expected behavior would be to leave all the fields enabled, if the user selects a category, then the subsequent fields (products and orders would be filtered to the selection) so that when the user starts typing in those the parent filter is added to their filter.

Whilst we are discussing filters, why if the filter is narrowed to a single item is it not automatically selected?  Currently the user has to filter, then select the item and then tab.  We have had numerous "bug" reports raised because the user didn't select before tabbing even though the item is the only one in the drop-down and appears to be selected.

Similarly the Mutliselect filter allows typing values, and even when the user selects the value in the dropdown and is added to the selected list, the typed text remains, making the mutliselect field value invalid on submission. 

Repro:

Open page: CascadeComboBox
Move focus to Categories combo (i used my mouse)
Type 'p' which opens the combo and shows 3 items starting with p
Select 'Products' using the down arrow (field now displays Products)
Click Tab
Focus moved to View Order button and NOT Products field.
Using the mouse to select a value works fine, but our users don't want to have to use the mouse as this slows down data entry.

I want dropdownlist to have group by with 2 fields

Currently the data-* attributes on the <option> tags are removed by the kendoDropDownList widget.
Please pass them through so they can be used.

After searching the kendo.all.js I found that there is currently no way the custom data-* can be added into the generated html code.

I'm using MVVM for a rather large SPA. Some parts of the SPA is generated on the server (webservice) which is just a partial html. Which looks like (simplest one):
<select data-role="dropdownlist" name="ProductTypeID" class="k-textbox">
	<option value="9" data-cond="DependsValue(ProductTypeCategoryID,1)">Compliments cards</option>
	<option value="1" data-cond="DependsValue(ProductTypeCategoryID,1)">Flyers</option>
	<option value="3" data-cond="DependsValue(ProductTypeCategoryID,3)">Brochures</option>
	<option value="25" data-cond="DependsValue(ProductTypeCategoryID,6)">Roll-up banners</option>
</select>

In this case the data-cond is an attribute in which there is a (javascript) function that should be run to determine if this option is valid or not (it is made hidden if not).

I was trying to convert this into a datasource which can be bound to the dropdownlist, but this has several drawbacks. The most important are:

- There are almost 60 different of these kind of dropdowns that can be generated from the server; This means a lot of extra code and webservices.

- Calling the webservice for each of them is way to slow since each field changes conditional values of other fields, and so the server would be called way to often. But on the client side this runs way faster. Even in javascript.

- The data-* attributes should be supported accordingly the html5 standard to my humble opinion :)

I found two questions regarding this, but both where unanswered.

I add them here for you comfort :)

http://www.telerik.com/forums/converting-standard-select-element-to-kendodropdownlist-removes-additional-properties-from-option-such-as-data-

http://www.telerik.com/forums/how-to-access-data--attributes-in-a-option-after-converting-select-to-a-dropdownlist

The combobox currently doesn't react on the disabled-attribute for options. It should be possible to make single options visible but not selectable with this attribute as in original html-select:
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_option_disabled
I found no way to do this yet.

The problem with relying on maxlength that is built into HTML elements is that they do not work in instances where you are rendering multiple inputs as with the kendo-combo-box. If I set the max length, it sets the max length of the select, which is does nothing. It needs to transfer that maxlength to the input text which is rendered along with the select.

Yes, there are workarounds, but when you are using the controls in an angular mvvm environment where you write little to no jquery, the simplest fix should be to have the control code render the input fully given the information provided.

TLDR:
If given <select kendo-combo-box maxlength="3"
please generate <input class="k-input" type="text" maxlength="3"

Would be nice to allow selecting items from multiselect several times

I would like to assign multiple values to "dataTextField" property as a part of kendoAutoComplete widget initialization process. This will enable to search and filter values across multiple data fields.

I'd like to add separators between groups of items in a select / kendoDropDownList. Also known as a horizontal line or delimiter.
The same question was asked here by someone else: http://www.telerik.com/forums/separator-in-dropdownlist
The answer was that this is not supported.

Currently multiselect increases its height to accommodate all selected values. Can you please provide a way where it reverts back to its height after selecting all values and shows 1 value and count for rest of the values selected?

Here is a screenshot:
http://s11.postimg.org/ur5qqy5lv/Multi_Select.png

You can see it's implementation selecting values in "Type Location or Project" multiselect on Residential Tab
http://www.99acres.com/

Currently when a combo box is used on an edit form, when the combo box first loads, the value property it is bound to (e.g. an int id) is displayed as the text until the databound event fires, and the text value associated with that value can be loaded.  It gives the combo boxes an unprofessional look, as they briefly display a number until they are done loading.  It also creates some other problems when you have a custom filter function, as described here:

http://www.telerik.com/account/support-tickets/view-ticket.aspx?threadid=781390

I recognize that you would not want to change the default behavior since it would be a breaking change, but could you add a flag to toggle this behavior off.  You could add a property called "DefaultTextToValue" which is set to True by default, and if you set to false, the display would remain blank until the text value was set by the databound event.

It would allow selected items(Tags) to be displayed as well as add new ones or select ones from an autocomplete dropdown.

When bound to oData, the autocomplete contains filter should treat each WORD as a new "substringof"....or make a new odata advanced contains type\property.

This is more what users expect when searching...and the odata spec has it covered.

http://www.kendoui.com/forums/ui/autocomplete/odata-google-like-filter.aspx

I'd like to be able to style the matching text from autocomplete, so I'd like the option for kendo to perhaps wrap the text in a span or something I can get a handle on...

So if I typed "Back" it'll give me results like this
<li><span class='t-match'>Back</span> to the future</li>