When binding a dropdown to a list (with .BindTo()) instead of a DataSource, none of the object's properties besides "Text" and "Value" are available in the Template, and will throw a ReferenceError that the property is not defined.
But this only occurs if the list of items it is bound to is of the type SelectListItem, or inherits from that type.
If the list is of items that do not inherit from SelectListItem, then all properties can be used in the Template with no error.
Screenshot of example project output:
Explanation:
Each dropdown on the page has a .Template() which simply displays the "Text" property and one other property (listed in each section's heading). Example:
"#= Text # - #= Disabled #"
If the property is not working correctly, a unhandled ReferenceError will occur and the dropdown will fail to initialize. These failed rows are highlighted red.
This only occurs when the dropdowns use .BindTo() and a list of either SelectListItems or of a class that inherits from SelectListItem. The dropdowns bound to lists of CustomSelectListItem, which does not inherit, have no issue with the additional properties.
This bug has been occurring since at least 2021.3.1109, but I confirmed is still present in the latest version.
Bug report
Reproduction of the problem
Dojo example: https://dojo.telerik.com/uGitesaF
Current behavior
When the DropDownList has an initial value, the floating label overlaps with the text.
Expected/desired behavior
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()
Environment
- Kendo UI version: 2023.1.314
- jQuery version: x.y
- Browser: [all]
Bug report
DropDownList editor in a Form component with ServerFiltering enabled causes a js exception.
Reproduction of the problem
- Enable ServerFiltering in the DropDownList editor:
@(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:"));
});
})
)
Current behavior
On page load a js exception is thrown:
Uncaught Error: Syntax error, unrecognized expression: #
Expected/desired behavior
No exceptions.
Environment
- Kendo UI version: 2023.3.1114
- jQuery version: 3.4.1, 3.7.1
- Browser: [all]
Bug report
Related: telerik/kendo#18503
Reproduction of the problem
Dojo example: https://dojo.telerik.com/AWiYAlIm/5
- Reduce the width of the right pane (or run in fullscreen and resize the browser window making it as narrow as possible)
Current behavior
A js exception is thrown:
e.popup.fullscreen is not a function
Expected/desired behavior
No exceptions are thrown.
Environment
- Kendo UI version: 2023.3.1114
- jQuery version: x.y
- Browser: [all]
Bug report
The DropDownList is incorrectly marked as invalid, when another field of the model is invalid.
Reproduction of the problem
Sample project attached.
MVCFormValidation.zip
- Run the project
- Click the submit button. It submits the form and in the submit action a model error is added to a specific field of the model: ModelState.AddModelError("NumberOfShares", "Number not in the expected range");
Current behavior
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.
Expected/desired behavior
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.
Environment
- Kendo UI version: 2023.3.1114
- jQuery version: x.y
- Browser: [all]
My code is below. How do I get the field to validate after losing the focus?
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);
Bug report
Regression introduced in R1 2022. Reproducible only with the LESS themes.
Reproduction of the problem
Dojo example: https://dojo.telerik.com/UQOniRab
- Click the DropDownList to open its dropdown
Current behavior
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.
Expected/desired behavior
The option label item's appearance should match that of the other items.
Environment
- Kendo UI version: 2022.1.301
- jQuery version: x.y
- Browser: [all]
Kendo Version - Kendo MVC 2019.2.619
My values appear in the previous option item.
Drop Down List name and values:
- Name = "Select From"
- ID = ""
- Name = "ABCHERG"
- ID = "ABCHERG"
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"
Bug report
Class k-state-focused is not removed from DropDownlist on blur, if its filter input was clicked.
Reproduction of the problem
- Use Events demo
- Click on DropDownList to expand its dropdown.
- Click on DropDownList's filter input.
- Click on demo's title to blur the DropDownList
Current behavior
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">
Expected/desired behavior
DropDownList does not appear focused.
Environment
- Kendo UI version: 2019.2.619
- Browser: all