I have a Kendo ComboBox() on CountryCode property that has [MaxLength(2)] data annotation on the property in the ViewModel. This is limiting the filtering on the ComboBox and I can't type more than 2 characters in the component. Please see the sample project for the reproduceable issue.
Upon inspecting the markup generated by the Kendo ComboBox(), I'm seeing that there are 2 inputs being generated and maxlength HTML attribute is applied to both.
- The first input tag is displayed to the user and used for filtering. This should NOT have maxlength HTML attribute since it incorrectly limits the number of characters the user can filter by.
- The second input tag is a hidden input that passes the selected data value for form submission. This correctly has the maxlength HTML attribute to still enforce validation.
When I manually removed the maxlength HTML attribute from the first input tag, this fixed the filtering of the ComboBox while still retaining the validation on the second input tag.
Please review the markup generated by the Kendo ComboBox() and see if it can be fixed to remove maxlength from the first input tag.
Expected behavior:
If [MaxLength] is applied to a property, it should generate a markup that allows the user to filter without character limitation while still validating against the selected data value.
### Bug report
When filtering a specified Grid column, the filter expressions are inverted when the value of the first expression is empty/null.
### Reproduction of the problem
1) Filter a Grid column by leaving the first filter value empty:
2) Filter the Grid and open again the filter menu. The filter expressions are inverted:
A Dojo sample for reproduction: https://dojo.telerik.com/CXChcTJT
### Expected/desired behavior
The filter menu expressions must remain the same.
### Environment
* **Kendo UI version: 2025.2.702
* **jQuery version: 3.7.0
* **Browser: [all]
Describe the bug
Setting the Sortable "cursor" option results in inline styles being applied through the _setCursor function in kendo.all.min.js. This causes a CSP related js exception.
To reproduce
- On a page with strict Content-Security-Policy enabled, drag and drop an item using the example below:
<ul id="sortable">
<li>ItemA1</li>
<li>ItemA2</li>
<li>ItemA3</li>
</ul>
<script>
$("#sortable").kendoSortable({
cursor: "move"
});
</script>
Expected behavior
No inline styles should be added, to ensure CSP compatibility.
Actual behavior
A js error related to inline styles is thrown.
Affected browsers (please remove the unneeded items)
- All
Product Version
2024.4.1112
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
When the scrollable option is disabled, on resizing the browser window by making it more narrow, at certain point the columns stop resizing and the whole table goes out of the right border of the Grid. Reproducible with the SASS and LESS themes.
Reproduction of the problem
Dojo example: https://dojo.telerik.com/ItIrEzEY/3
- Either resize the right pane or use Fullscreen and resize the browser window and make it narrower.
Current behavior
The table goes out of wrapping element (.k-grid).
Expected/desired behavior
The columns resize and the table remains within the borders of the Grid.
Environment
- Kendo UI version: 2023.1.117
- jQuery version: x.y
- Browser: [all]
When I am trying to use your components, I have to look things up on your web site. Considering you develop web site components, I would think that your site would behave very well. What I find is that I am often frustrated by web site. Here is an example:
https://docs.telerik.com/aspnet-mvc/api/kendo.mvc.ui.fluent/taskboardbuilder?_gl=1*3hzp1t*_ga*MTEwODg5NTUzNy4xNjc5MDc0ODQy*_ga_9JSNBCSF54*MTcxNzE3MjQ2NS4zNDMuMS4xNzE3MTczMzA1LjE2LjAuMA..*_gcl_aw*R0NMLjE3MTY0NzU0MDYuQ2owS0NRancwcnV5QmhEdUFSSXNBTlNaM3dwOXNTVTZDZC1rU0ViRVdYNDNjYVV2U0pnOWZOcFpHSk10YzVmOWhOX3hZY3owQlppb045RWFBbVpnRUFMd193Y0I.*_gcl_dc*R0NMLjE3MTY0NzU0MDYuQ2owS0NRancwcnV5QmhEdUFSSXNBTlNaM3dwOXNTVTZDZC1rU0ViRVdYNDNjYVV2U0pnOWZOcFpHSk10YzVmOWhOX3hZY3owQlppb045RWFBbVpnRUFMd193Y0I.*_gcl_au*MTAyOTkxNjgzOC4xNzEyOTMxMDQ3&_ga=2.233747739.449664680.1716902667-1108895537.1679074842&_gac=1.124170360.1714792673.Cj0KCQjwltKxBhDMARIsAG8KnqWeETNM6gbjk2Jt1wTc9LrEO5gPp1cwyMu5bYB9fTjPB6DpZ_mC0MsaAixAEALw_wcB
On this page you basically have three main sections:
The "Api reference" list on the left with a vertical scroll bar.
The "IN THIS ARTICLE" list on the right. No scrollbar
The actual api methods in the middle which scrolls with the main scroll bar.
But the "IN THIS ARTICLE" list section on the right never scrolls. I would like to be able to scroll through the list to see possible methods, but I can't. I know they are there to help navigate to a method but since a bunch of methods are basically cut off .....
Remember that first impressions aren't the only impression. You can make the sale with your demos, but can you keep the customer with your documentation?
Bug report
Regression introduced in 2024.4.1112.
Reproduction of the problem
- Run this Dojo example - https://dojo.telerik.com/lhLEDEve
Current behavior
The gutter values are ignored:
$("#exampleform").kendoForm({
formData: {
FirstName: "John",
LastName: "Doe",
Email: "john.doe@email.com",
Country: "1",
City: "Strasbourg",
AddressLine: ""
},
layout: "grid",
grid: {
cols: 2,
**gutter: 50**
},
items: [
{
type: "group",
label: "Personal Information",
layout: "grid",
grid: { cols: 1, **gutter: 50** },
//...
Expected Behavior
The gutter values are applied to the Form.
Workaround:
Set the values through CSS:
<style>
/*columns gap */
.k-form .k-form-layout {
column-gap: 50px;
}
/*rows margin*/
.k-form-md .k-form-field, .k-form-md .k-form-buttons {
margin-top: 50px;
}
</style>
Environment
- Kendo UI version: 2025.1.227
- Browser: [all]
@Html.Kendo().RadioGroupFor(m => m.UserType).LabelPosition(RadioGroupLabelPosition.After).Layout(RadioGroupLayout.Vertical).Items(item =>
{
item.Add().Label("Test1").Value("Test1");
item.Add().Label("Test2").Value("Test2");
item.Add().Label("Test3").Value("Test3");
})
@Html.ValidationMessageFor(m => m.UserType, "", new { @class = "text-danger" })
The above code shows required validation for UserType from server side properly. ( UserType variable decorted with Required )
However from client side it does NOT. Unfortunately I cannot use (form).KendoValidator()
In many applications we use passwords. Would love to have a field that allows for the setting of a type to "password" without templates.
.PasswordTextField() or something similar.
**Added by Admin**
If I pass in the model, the fields should get affected by the `DataType(Datatype.Password)` data annotation attribute.
Bug report
Clearing the value with the Signature "clear" button does not trigger the widget's change event.
Reproduction of the problem
Run the following Dojo example: https://dojo.telerik.com/KhlVWvam
- Draw something in the Signature
- Click on the "clear" button
Expected
The change event fires.
Actual
The change event does not fire.
Environment
**Kendo UI version: 2025.1.211
**Browser: [all]
Hi Team,
I would like to request to add Building Blocks and Page Templates for UI for ASP.NET MVC/Core.
Thank you!
Bug report
When the kendo js references are rendered as module, the licensing banner and watermark appear, even when a valid license license key has been installed.
Reproduction of the problem
<link href="https://kendo.cdn.telerik.com/themes/10.2.0/default/default-ocean-blue.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.7.1.min.js" type="module"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.8.69/pdf.mjs" type="module"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.8.69/pdf.worker.mjs" type="module"></script>
<script src="https://cdn.kendostatic.com/2025.1.211/js/kendo.all.min.js" type="module"></script>
<script src="https://cdn.kendostatic.com/2025.1.211/js/kendo.aspnetmvc.min.js" type="module"></script>
Expected
No banner and watermark appears.
Actual
A banner and a watermark appears.
Workaround: reference a js file containing your script key after the kendo js files:
<script src="~/Scripts/telerik-license.js" type="module"></script>
Environment
**Kendo UI version: 2025.1.211
**Browser: [all]
Bug report
When the Kendo UI Grid is configured to have endless scrolling and an item is updated on the first page, the scrollbar is reset. If an update is done on a page after the first one, the scroll is correctly persisted.
Reproduction of the problem
1. Set a grid with an endless scroll.
2. Scroll down (without entering the second page).
3. Update an item on the first page.
4. The scroll is reset.
Dojo sample for reference:
https://dojo.telerik.com/EcUKIrAK
Environment
* **Kendo UI version:** 2021.1.330
* **jQuery version:** 1.12.4
* **Browser:** [all]
Hello,
It seams that Milliseconds are missing from ChartAxisLabelsDateFormats and so there is no Milliseconds(string format) in ChartAxisLabelsDateFormatsBuilder.
https://docs.telerik.com/aspnet-mvc/api/kendo.mvc.ui.fluent/chartaxislabelsdateformatsbuilder
This means that to configure it, we have to config it from client js on load
Note: My current version is 2022.2.621 but according to doc it's the same in 2024.3.1015
Bug report
In a state persistence scenario, the Grid state is not properly restored when the "all" pageSizes option is selected.
Reproduction of the problem
- Run this dojo example: https://dojo.telerik.com/yGLYKKQz
- Select "all" in the Grid's pager dropdown and click the Save button above the component.
- Select a different page size option in the pager dropdown, e.g., 20.
- Click the Load button.
Current behavior
The Grid shows page 1 of the data and the currently selected page sizes option is shown (e.g., 20).
Expected/desired behavior
The Grid shows all the data and the pager dropdown shows "all" as the selected value.
Environment
- Kendo UI version: 2024.4.1112
- Browser: All
// retrieve the Editor widget object
var editor = $("#editor").data("kendoEditor");
// attach a click handler on the tool button, which opens the ImageBrowser dialog
editor.toolbar.element.find(".k-i-image").parent().click(function () {
// a setTimeout is required, otherwise the ImageBrowser widget will still not be initialized
setTimeout(function () {
// retrieve the ImageBrowser widget object
var imageBrowser = $(".k-imagebrowser").data("kendoImageBrowser");
console.log(imageBrowser);
// retrieve the ListView widget object
var listView = imageBrowser.listView;
console.log(listView);
// order the image list by directory first and then by file name
listView.dataSource.sort({
field: "type", dir: "asc", compare: function (a, b) {
if (a.type!=b.type) {
return (a.type > b.type) ? 1 : -1;
}
else {
return a.name === b.name ? 0 : (a.name > b.name) ? 1 : -1;
}
}
});
});
Hi Team,
I would like to request the UI for ASP.NET MVC Editor's ImageBrowser include a schema similar to the Kendo UI for jQuery version to describe the raw data format. This would additionally help the transition from the JavaScript version to the MVC version.
Thank you!
TextBox is always with autocomplete="off".
I know I can handle it by $(el).attr("autocomplete", "whatever"), but I think there should be an option how to handle autocomplete attribute on TextBox widget (and other widgets if any renders in the same way), because adding that part of code to all of desired elements is not nice solution for me...
Thanks!