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.
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);