margin-left causes selected items on second + rows in the MultiSelect to appear unaligned to the items in the first row.
Dojo example.
Regression
Browser:
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
@(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"); }); }) )
$(function () { $("form").kendoValidator(); });
The validation message appears between the input and popup of the component. The popup field doesn't cover the validation message.
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.
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.
Dojo example.
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.
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.
Dojo: https://dojo.telerik.com/oQeDIxUv
After the component is enabled, the k-disabled class remains in the tag.
The k-disabled class is removed.
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
Regression introduced in R1 2022.
https://dojo.telerik.com/UjUQaQOg/18
The dropdown closes
The checkbox is checked and the dropdown remains open