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!
I use the ASP.NET MVC widget code to add a ButtonGroup to a view. The ButtonGroup configuration has 2 buttons, has selection = many, and one of the buttons is selected.
@(Html.Kendo().ButtonGroup()
.Name("select-data-source-filters")
.HtmlAttributes(new { @class = "", @style = "text-align: center; flex-flow: row;"})
.Selection("multiple")
.Items(t =>
{
t.Add().Text("Include Default Product Scenarios").Selected(false).HtmlAttributes(new { @id = "databaseItems", @class= "mb-2 k-ml-2.5" });
t.Add().Text("Include User Defined Product Scenarios").Selected(true).HtmlAttributes(new { @id = "userDefinedItems", @class = "mb-2 ml-2" });
})
)
In an event handler for a different widget (e.g., Grid), I programmatically select the button that is not yet selected. This should cause both buttons to now be selected. However, the act of getting a reference to the button group widget object causes the selection property to be reset to "single". The workaround is to manually reset the selection option to "multiple".
let buttonGroupWidget = $("#select-data-source-filters").kendoButtonGroup().data("kendoButtonGroup");
if (debugLevel > 0) {
console.log(".... buttonGroupWidget = " + buttonGroupWidget + " : ", buttonGroupWidget);
console.log(".... (initial) buttonGroupWidget.selectedIndices = " + buttonGroupWidget.selectedIndices + " : ", buttonGroupWidget.selectedIndices);
}
if (buttonGroupWidget !== null && buttonGroupWidget !== undefined) {
buttonGroupWidget.options.selection = "multiple";//workaround for a bug in 2024Q3 that resets selection to single when get reference to the kendo widget
buttonGroupWidget.select(0);
buttonGroupWidget.trigger("select");
console.log(".... (updated) buttonGroupWidget.selectedIndices = " + buttonGroupWidget.selectedIndices + " : ", buttonGroupWidget.selectedIndices);
}
Currently, the tool name is not added into the HTML structure of the created Editor's tool:
Here is a Dojo example:
https://dojo.telerik.com/AvoNOKOr
Is it possible to include the specified "name" in the button's class, so the custom tools can be selected by class name for further customization?
Bug report
Reproduction of the problem
- Reference kendo.all.min.js and kendo.all.min.js.map in a project
- Add a basic Grid:
<div id="grid"></div>
<script>
// The dataSource is initialized as a stand-alone widget that can be bound to the Grid.
var dataSource = new kendo.data.DataSource({
transport: {
read: {
// The remote endpoint from which the data is retrieved.
url: "https://demos.telerik.com/kendo-ui/service/products",
dataType: "jsonp"
}
},
pageSize: 10
});
$("#grid").kendoGrid({
// The dataSource configuration is set to an existing DataSource instance.
dataSource: dataSource,
pageable: true
});
</script>
- Open the browser's dev tools Source tab and place a breakpoint (e.g., on line 3715).
Current behavior
The breakpoint is added at the last line (326079) of the file.
Expected/desired behavior
The breakpoint is added at the desired line (e.g., 3715).
Environment
- Kendo UI version: 2023.3.1010
- jQuery version: x.y
- Browser: [ Chrome XX]