The DropDownList is incorrectly marked as invalid, when another field of the model is invalid.
Sample project attached.
MVCFormValidation.zip
Two validation errors appear after the form submission: one for the NumberOfShares field and a second one for the Country.Id field, for which a DropDownList editor is used.
A validation error appears only for the NumberOfShares field.
Note that if no editor is specified for the Country.Id field (instead of using a DropDownList editor), e.g.,
i.Add()
.Field(f => f.Country.Id)
.Label(l => l.Text("Country"));
no validation error message is shown for Country.Id.
DropDownList editor in a Form component with ServerFiltering enabled causes a js exception.
@(Html.Kendo().Form<MVCFormValidation.Models.UserViewModel>()
.Name("formExample")
.HtmlAttributes(new { action = "/Home/Index", method = "POST" })
.Validatable(v =>
{
v.ValidateOnBlur(true);
v.ValidationSummary(vs => vs.Enable(false));
})
.Items(items =>
{
items.AddGroup()
.Label("Registration Form")
.Items(i =>
{
i.Add()
.Field(f => f.FirstName)
.Label(l => l.Text("First Name:"));
i.Add()
.Field(f => f.LastName)
.Label(l => l.Text("Last Name:"));
i.Add()
.Field(f => f.NumberOfShares)
.Label(l => l.Text("Number Of Shares:"));
i.Add().Field(m => m.Country.Id)
.Editor(e => e.DropDownList().DataSource(source =>
{
source.Read(read =>
{
read.Action("GetCountries", "Home");
})
.ServerFiltering(true);
}).Filter(FilterType.Contains).DataTextField("Name").DataValueField("Id"))
.Label("Country");
i.Add()
.Field(f => f.Email)
.Label(l => l.Text("Email:"));
i.Add()
.Field(f => f.DateOfBirth)
.Label(l => l.Text("Date of Birth:").Optional(true));
i.Add()
.Field(f => f.Agree)
.Label(l => l.Text("Agree to Terms:"));
});
})
)
On page load a js exception is thrown:
Uncaught Error: Syntax error, unrecognized expression: #
No exceptions.
Related: telerik/kendo#18503
Dojo example: https://dojo.telerik.com/AWiYAlIm/5
A js exception is thrown:
e.popup.fullscreen is not a function
No exceptions are thrown.
Dojo example: https://dojo.telerik.com/uGitesaF
When the DropDownList has an initial value, the floating label overlaps with the text.
The label should be displayed above the DropDownList.
Workaround: refresh the floating label in the dataBound event handler of the component:
e.sender.label.floatingLabel.refresh()
Regression introduced in R1 2022. Reproducible only with the LESS themes.
Dojo example: https://dojo.telerik.com/UQOniRab
The option label item's height is very small and no hover/select styles are applied to it. When the option label has some text, its height is ok, but again no hover/select styles are applied.
The option label item's appearance should match that of the other items.
var DropDownList = (function (init) {
return kendo.ui.DropDownList.extend({
init: function (element, options) {
var that = this;
init.call(that, element, options);
that.wrapper.keydown(function (e) {
if (e.ctrlKey && e.shiftKey) {
that.open();
return;
}
var keyCode = e.keyCode || e.which;
if (keyCode !== 9 && keyCode !== 13) {
that.open();
}
});
$(that.filterInput).bind("keydown", function (e) {
var keyCode = e.keyCode || e.which;
if (keyCode === 9 || keyCode === 13) {
var press = jQuery.Event("keydown");
press.ctrlKey = false;
press.keyCode = 13;
press.which = 13;
$(that.wrapper).trigger(press);
}
});
},
options: {
name: "DropDownList",
dataValueField: "Value",
dataTextField: "Text",
filter: "contains",
minLength: 1,
ignoreCase: true,
animation: false,
valuePrimitive: true
}
});
})(kendo.ui.DropDownList.fn.init);
kendo.ui.plugin(DropDownList);
Kendo Version - Kendo MVC 2019.2.619
My values appear in the previous option item.
Drop Down List name and values:
I have one item and a "Select from" option (see data above) in my list
I select "ABCHERG" from my drop down list and the value that's returned is blank.
If I select the "Select From" option the value returned is "ABCHERG"
Class k-state-focused
is not removed from DropDownlist on blur, if its filter input was clicked.
DropDownList appears focused as k-state-focus
class is not removed from its span
<span unselectable="on" class="k-dropdown-wrap k-state-default k-state-focused">
DropDownList does not appear focused.