• Regression report
  Introduced in 2019.2.514.

Current behavior

margin-left causes selected items on second + rows in the MultiSelect to appear unaligned to the items in the first row.

Expected behavior

Reproduction

Dojo example.

What is the motivation or use case for changing the behavior?

Regression

Environment

• Kendo Ui for jQuery

Browser:

• Chrome (desktop) version XX
• Firefox version XX
• Edge version XX

Bug report

When the Validator component configuration is defined using the HtmlAttributes method, the validation message for the component is rendered inside the component's DOM structure. This results in appearing of the validation message between the component's input and popup list.

• If the validation message is defined using HtmlHelper as follows:
  @Html.ValidationMessageFor(model => model.SelectedOnsiteServiceType)
  The reported issue is not reproduced.

• For demo project, please refer to ticket 1455511

Reproduction of the problem

1. Define a MultiSelect inside a form as follows:
   @(Html.Kendo().MultiSelect() .Name("Months") .Placeholder("Start Typing...") .HtmlAttributes(new { style = "width:350px;", required = "required", data_required_msg = "Months is a Required Field", }) .DataSource(source => { source.Read(read => { read.Action("PopulateMonths", "Home"); }); }) )
2. Define the Validator component as follows:
   $(function () { $("form").kendoValidator(); });

Current behavior

The validation message appears between the input and popup of the component. The popup field doesn't cover the validation message.

Expected/desired behavior

The validation message should be inserted after the MultiSelect component in the DOM tree. Once the popup of the component appears on the screen, it should be stuck to the input field and cover the validation message.

Environment

• Kendo UI version: 2020.1.219
• jQuery version: x.y
• Browser: [all]

I'd like to request to have a built-in scroll bar for the Multiple tag mode which would show only one line, and adjust for that line of tags accurately.  

Thanks!

Bug report

Currently the MultiSelect allows a custom tag (one that does not correspond to items in its dataSource) to be displayed as selected. For this to work the MultiSelect must have autoBind disabled and the dataValueField option must be set. Once the widget is bound to data it behaves inconsistently, depending on whether there are other pre-selected items and what their index in the dataSource is.

Reproduction of the problem

Dojo example.

1. Focus the MultiSelect

Current behavior

The widget is loaded with data, but the custom tag remains. This leads to the following unexpected behavior: after step 1. deselect "Product1". The item is deselected, the "custom" tag is removed from the input area but the "Product1" tag remains. The behavior is different, if initially "custom" and "Product2" are pre-selected.

Expected/desired behavior

Once the widget is bound any custom tags should be removed. The MultiSelect should display only tags for items that are in its dataSource. For a new item to be displayed as selected, it must be added to the dataSource.

Environment

• Kendo UI version: 2020.2.513
• jQuery version: x.y
• Browser: [all]

Hi

Currently, if I want to get the selected values with a separate AJAX request, I have to make a standard AJAX call in the MultiSelect's DataBound event handler. It would be great, if this functionality was built into the control itself like this:

.DataSource(source =>
{
   source.Read(read =>  {read.Action("GetItemSets", "List"); });

   source.Values(values => { values.Action("GetSelectedValues", "List" ) }
 })

Thank you

Earl

One of my forms has a multiselect control and it binds to items some of which contain a comma (",") .

The problem is that when form is submitted kendo multiselect returns multiple selected items separated by comma and it's difficult to separate items on backend.

Why can't multiselect control have a property named SeparationCharacter like:

.SeparationCharacter("*")

This way developers can choose how items will be separated on the backend and this will make our life little easier and save some development time.

Bug report

Reproduction of the problem

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

1. Inspect the selected tag of the MultiSelect. It has the k-disabled class.
2. Click the anchor above the component to enable it.

Current behavior

After the component is enabled, the k-disabled class remains in the tag.

Expected/desired behavior

The k-disabled class is removed.

Environment

• Kendo UI version: 2023.1.425
• jQuery version: x.y
• Browser: [all]

Issue
If a single tag MultiSelect is blurred on filtering and then refocused, then the clear button is pressed with the dropdown open, the single tag remains even though there are no selected items.

Reproduction
1.  Run this dojo.
2.  Click on MultiSelect input and type L
3.  Click outside the MultiSelect to blur it - filter is removed.
4.  Click on MultiSelect input (dropdown opens) and press the clear button.

Current behavior
MultiSelect value is cleared. But the single tag remains visible and states that there are selected items even though there are none.

Expected/desired behavior
The single tag should be removed as shown in this Kendo UI Dojo using R3 2018.

Workaround
Handle MultiSelect's change event as follows:

            function onChange(e) {
              if(!e.sender.value().length){
                e.sender.element.closest(".k-multiselect").find(".k-button").remove();
              }
            }

When data for the MultiSelect widget is virtualized and mapValueTo: "dataItem" option is set, the widget returns incorrect dataItem on subsequent selection.

1. Select Order 3 and submit selection. Alert displays the selected Id 3
2. Clear selection and submit. Alert displays no data.
3. Select Order 131313 and submit selection. Alert displays the selected Id 131313 
4. Clear selection and submit. Alert displays no data.
5. Select Order 24242 and submit selection. Alert displays the selected Id 131313

Bug report

Regression introduced in R1 2022.

Reproduction of the problem

https://dojo.telerik.com/UjUQaQOg/18

1. Open the dropdown
2. After 2 seconds the tag mode changes to single
3. Click on the checkbox in the dropdown header

Current behavior

The dropdown closes

Expected/desired behavior

The checkbox is checked and the dropdown remains open

Environment

• Kendo UI version: 2022.1.119
• jQuery version: x.y
• Browser: [all ]

Bug report

Reproduction of the problem

1. Run this dojo example: https://dojo.telerik.com/VBprsrAf
2. Inspect the clear button (the element with class "k-clear-value").

Current behavior

The button does not have an aria-label attribute.

Expected/desired behavior

The button has an aria-label attribute.

Workaround:

<script>
    $(document).ready(function() {
        $(".k-clear-value").attr("aria-label", "Clear");
    })
</script>

Environment

• Kendo UI version: 2024.3.1015
• jQuery version: x.y
• Browser: [all]