Hey,
It would be very useful if the TimePicker component would have a feature called something like "AutoFocusTime()". By default, when there is no value inside the TimePicker, the default focused time is "12:00 am", therefore the user has to scroll up all the way to the required time. With the feature above, it would be possible to enter a time which should be focused by default. For example "8:00 am" which is when most businesses start operating.
Now the question is, why not just putting in a default value. Well, in a form with lots of inputs, the user may not know anymore which values he entered and which inputs have a default value set and therefore submitting wrong data. If a input doesn't have a default value this mistake can be caught by setting a [Required] attribute. Threfore, the user has to enter a value and it will be guaranteed that all values where entered by him and it wasn't a default value which has been set.
See ticket id 1412837.
### Bug report
Starting with version 2024.4.1112, the built-in PDF export of the Spreadsheet throws a client-side error when the sheet contains an image.
### Reproduction of the problem
1) Open the Images demo: https://demos.telerik.com/aspnet-core/spreadsheet/images
2) Export the sheet to PDF.
3) An error is logged in the browser console: "Uncaught TypeError: n.Image is not a constructor".
The last working version is 2024.3.1015.
### Expected/desired behavior
PDF export must work as expected.
### Environment
* **Kendo UI version: 2024.4.1112
* **jQuery version: 3.7.1
* **Browser: [all]
Bug report
Editor components throw AmbiguousMatchException when bound with models that have property shadowing in inheritance hierarchies.
Reproduction of the problem
- Create a model hierarchy where a derived class shadows a base class property with
newkeyword - Bind the Editor component with the shadowed property
- Exception is thrown during reflection
Current behavior
(optional)
The components should handle property shadowing gracefully and generate the appropriate HTML input element.
Expected/desired behavior
AmbiguousMatchException is thrown when trying to bind the component to the shadowed property.
TicketID:
1699473
Environment
- Kendo UI version: 2025.3.825
- Browser: [all]
Bug report
The Form component throws an InvalidOperationException when utilizing FormData within Razor Pages. This issue does not occur in ASP.NET MVC or standard ASP.NET Core applications. The issue appears to be linked to the following commit: 8cf517cf94dd5a13a8e8bd9f8f92db0193ea00e3.
Reproduction of the problem
- Create an Razor Page application.
- Add a Form with FormData
- Run the project
Current behavior
The application throws an InvalidOperationException.
Expected/desired behavior
The application runs without any thrown exceptions.
TicketID:
1701697
Environment
- Kendo UI version: 2025.3.1002
- jQuery version: x.y
- Browser: [all]
I'm trying to use it for navigation in a section using Razor Pages. Having to expand using javascript is very distracting when the user goes from page to page. Below is the code to create a self-running page that demonstrates the issue:
@page
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>TestDrawer</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.bootstrap-v4.min.css" />
@* FontAwesome Pro css*@
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-xVVam1KS4+Qt2OrFa+VdRUoXygyKIuNWUUUBZYv+n27STsJ7oDOHJgfF0bNKLMJF" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
</script>
@* Place Kendo UI scripts after jQuery *@
<script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.all.min.js"
asp-fallback-src="~/lib/kendo-ui/js/kendo.all.min.js"
asp-fallback-test="window.kendo">
</script>
<script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.aspnetmvc.min.js"
asp-fallback-src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"
asp-fallback-test="kendo.data.transports['aspnetmvc-ajax']">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<style>
/* Root navigation */
#root-nav li,
#example-nav li {
list-style: none;
}
.root-nav-categories h3,
#example-nav h3 {
color: #000;
font-size: 14px;
line-height: 14px;
padding: 0.5em 0 0.5em 3.571em;
text-transform: uppercase;
}
#example-nav h3 {
padding: 1.7em 0 0.5em 3.4em;
}
#example-nav-bar {
border-top: 1px solid #e2e4e7;
}
#back-forward {
display: block;
position: relative;
color: #000;
font-size: 14px;
line-height: 15px;
font-weight: normal;
padding: 1em 3.5em;
/*vertical-align: middle;*/
}
#root-nav h4 a {
text-align: right;
}
.back-nav {
text-align: left;
}
.back-nav:before {
position: absolute;
top: 1em;
left: 1.2em;
}
.forward-nav {
text-align: left;
}
.forward-nav:before {
position: absolute;
display: block;
top: 1em;
right: 1.2em;
width: 14px;
height: 14px;
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
.root-nav-categories {
margin-top: 1.417em;
}
#root-nav,
#example-nav {
padding-bottom: 30px;
}
#root-nav li a,
#example-nav li a {
/*controls customer navigation icon and text size*/
/*font-size: 13px;*/
/*line-height: 13px;*/
color: #2d3e50;
display: block;
padding: 0.5em 0 0.5em .5em;
transition: all .2s ease;
}
#example-nav li .group {
font-size: 13px;
font-weight: bold;
line-height: 13px;
color: #2d3e50;
display: block;
padding: 1.5em 0 0.25em 3.7em;
transition: all .2s ease;
}
.flip {
transform: rotate( -180deg );
transition: transform 500ms ease;
}
.no-boarder {
border: none;
}
.k-drawer-container {
border: none;
}
/*Adjusts width of icon blocks in customer navigation*/
.k-drawer-wrapper.k-drawer-mini-mode .k-drawer-items {
width: 3.5rem;
}
#root-nav li a:hover,
#example-nav li a:hover,
#back-forward:hover {
color: #000;
text-decoration: none;
background-color: #e2e4e7;
}
.k-hover-enabled #root-nav li a:hover,
.k-hover-enabled #example-nav li a:hover {
background-color: transparent;
}
#example-nav .active {
background-color: #e2e4e7;
cursor: default;
}
</style>
@*<link rel="stylesheet" href="~/css/site.css" />*@
</head>
<body>
<div id="example-sidebar" class="border border-secondary">
@*<div id="nav-wrapper">*@
<div id="nav">
<div id="example-nav">
<kendo-drawer name="drawer" mode="push" on-hide="onHide" min position="left" swipe-to-open="true" template-id="template" class="no-boarder">
<mini enabled="true" />
</kendo-drawer>
</div>
</div>
@*NAVIGATION STACK*@
@*<a href="#">
<span class="fa-stack" style="vertical-align: top;">
<i class="far fa-circle fa-stack-2x"></i>
<i class="far fa-exchange fa-stack-1x"></i>
</span>
</a>*@
<a href="javascript:void(0);" onclick="toggleDrawer();" id="expand" title="Toggle Navigation">
<span class="fa-stack mb-2 ml-2">
<i class="far fa-circle fa-stack-2x"></i>
<i class="far fa-exchange fa-stack-1x"></i>
</span>
</a>
<script>
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
$(document).ready(function () {
var drawerInstance = $("#drawer").data().kendoDrawer;
var hideMenu = getCookie("HideCustomerMenu");
if (hideMenu == 'true') {
var arrowButton = $("#expand");
arrowButton.toggleClass('flip');
}
else {
drawerInstance.show();
}
});
function toggleDrawer() {
var drawerInstance = $("#drawer").data().kendoDrawer;
var drawerContainer = drawerInstance.drawerContainer;
var arrowButton = $("#expand");
if (drawerContainer.hasClass("k-drawer-expanded")) {
document.cookie = "HideCustomerMenu=true";
arrowButton.toggleClass('flip');
drawerInstance.hide();
} else {
document.cookie = "HideCustomerMenu=false";
arrowButton.toggleClass('flip');
drawerInstance.show();
}
}
</script>
<script id="template" type="text/x-kendo-template">
<ul class="menuBar list-unstyled">
<li id="test1"><a href="testdrawer"><i class="fa fa-user-circle fa-2x fa-fw mr-2" aria-hidden="true" title="Page 1"></i>Page 1</a></li>
<li id="test2"><a href="testdrawer" class="customer"><i class="fa fa-check fa-2x fa-fw mr-2" aria-hidden="true" title="Page 2"></i>Page 2</a></li>
<li id="test3"><a href="testdrawer" class="customer"><i class="fa fa-random fa-2x fa-fw mr-2" aria-hidden="true" title="Page 3"></i>Page 3</a></li>
<li id="test4"><a href="testdrawer" class="customer"><i class="fa fa-dollar-sign fa-2x fa-fw mr-2" aria-hidden="true" title="Page 4"></i>Page 4</a></li>
<li id="test5"><a href="testdrawer" class="customer"><i class="fa fa-paperclip fa-2x fa-fw fa-rotate-90 fa-flip-horizontal mr-2" aria-hidden="true" title="Page 5"></i>Page 5</a></li>
</ul>
</script>
</div>
<script>
function onHide(e) {
e.preventDefault();
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha256-E/V4cWE4qvAeO5MOhjtGtqDzPndRO1LBk8lJ/PR7CA4=">
</script>
</body>
</html>
### Bug report
When selecting the "Print" option in the PDFViewer, a large right and bottom margin is applied regardless of whether the “Margins” option is set to "None" or "Minimum".
### Reproduction of the problem
1) Open the PDFViewer Overview demo: https://demos.telerik.com/kendo-ui/pdfviewer/index
2) Select "Print" to open the print dialog
3) Notice the unexpected right and bottom margin.
The issue occurs since version 2025.2.520.
### Expected/desired behavior
The extra margins must not be applied when opening the file for printing.
### Environment
* **Kendo UI version: 2025.2.520
* **jQuery version: 3.7.1
* **Browser: [all]
### Bug report
When the TreeList is set up for Popup editing, the "required" validation triggers immediately when the Popup form is opened.
### Reproduction of the problem
1) Create a Popup editable TreeList.
2) Add the DataAnnotation [Required] attribute to any of the Model properties.
3) Click the built-in "Add new record" command.
4) The editor of the required field is automatically focused and the validation triggers immediately.
The behavior can be observed in the TreeList Popup Editing demo: https://demos.telerik.com/aspnet-core/treelist/editing-popup
### Expected/desired behavior
The validation must trigger on blur, as in the jQuery demo.
### Environment
* **Telerik UI for ASP.NET Core version: 2025.2.520
* **Browser: [all]
Bug report
The Form ignores the [Display(Name = "Value")] Data Annotation attribute:
telerik/kendo-ui-core#6503
Reproduction of the problem
The Email Label should read "Message":
https://netcorerepl.telerik.com/wzuDulvO14AtS2vC17
### Bug report
When using the default column checkbox filter menu and the data requested from the server takes time to load, the filter menu popup does not resize correctly when opening the menu for the first time.
The issue started to occur in version 2025.1.211.
### Reproduction of the problem
1) Enable the checkbox filter menu of a specified column. The Grid binds to remote data and the data operations are perfomed on the server.
2) Open the filter menu when the Grid is loaded.
3) The Read request triggers and a loader is displayed to indicate that the data is loading:
4) The options are loaded, but the popup container does not expand as expected:
5) Close the filter menu and opend it again:
### Expected/desired behavior
The filter menu popup must display all options when the data is loaded.
### Workaround
<style>
.k-animation-container-shown {
overflow: visible !important;
}
</style>
### Environment
* **Kendo UI version: 2025.2.520
* **jQuery version: 3.7.1
* **Browser: [all]
### Bug report
When building the scripts with NPM, there is syntax error "Unexpected number":
### Reproduction of the problem
Build the scripts (version 2025.3.812).
### Expected/desired behavior
The scripts must be built successfully.
### Workaround:
Remove the extra single quotes that wrap the version in the "rollup.mjs.config.mjs" and "rollup.modules.config.js" files:
- rollup.mjs.config.mjs
import glob from 'glob';
import path from 'path';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import polyfill from 'rollup-plugin-polyfill';
import alias from '@rollup/plugin-alias';
...
const version = '2025.3.812';- rollup.modules.config.mjs
import glob from "glob";
import path from "path";
import { nodeResolve } from "@rollup/plugin-node-resolve";
import polyfill from "rollup-plugin-polyfill";
import alias from "@rollup/plugin-alias";
...
const version = '2025.3.812';### Environment
* **Kendo UI version: 2025.3.812
Bug report
Filterable configuration in ForeignKey is not serialized in TagHelper Grid.
Reproduction of the problem
Open this REPL example
Current behavior
Filterable configuration in ForeignKey is not serialized in TagHelper Grid.
Expected/desired behavior
Filterable configuration in ForeignKey should be serialized in TagHelper Grid.
TicketID:
1692361
Environment
- Kendo UI version: 2025.2.702
- Browser: [all]
Currently, the Content function for Steps in a Wizard only accepts a string value (see API here).
This means that in order to add a partial view (bound to the current model and its properties), the most straightforward way I could find was to put the partial view (and any wrappers) in its own file and add an extension method "ToHtmlString()". For example:
@model MyModel
@(Html.Kendo().Wizard().Steps(step => {
step.Add().Content(Html.Partial("~/Path/To/View/Wrapper.cshtml", Model).ToHtmlString());
})
using Microsoft.AspNetCore.Html;
using System.IO;
public static class HtmlContentExtensions
{
public static string ToHtmlString(this IHtmlContent htmlContent)
{
if (htmlContent is HtmlString htmlString)
{
return htmlString.Value;
}
using StringWriter writer = new();
htmlContent.WriteTo(writer, System.Text.Encodings.Web.HtmlEncoder.Default);
return writer.ToString();
}
}In the Telerik TabStrip, a better approach is possible, as the Content for Items can take in a function which accepts Razor syntax (see API here). For instance:
@model MyModel
@(Html.Kendo().TabStrip().Items(tabstrip => {
tabstrip.Add()
.Content(@<div id="@Model.TabContainer" class="myTabWrapperClass">
@await Html.PartialAsync("~/Path/To/View.cshtml", Model)
</div>);
})
If we had the option to use the same approach with Wizard Steps, that would be ideal!
### Bug report
When dragging and dropping a file into a specified FileManager folder, the Upload request triggers twice.
### Reproduction of the problem
1. Open the FileManager Demo: https://demos.telerik.com/kendo-ui/filemanager/index
2. Open the browser's Network tab.
3. Drag and drop a file into the FileManager.
4. Two Upload requests are triggered one after another.
### Expected/desired behavior
When uploading a single file with drag & drop, a single Upload request must trigger. When using the default upload button to upload a file, a single request triggers as expected.
### Environment
* **Kendo UI version: 2024.4.1112
* **jQuery version: 3.7.1
* **Browser: [all]
### Bug report
When defining custom editors in the OrgChart form by using EditorTemplateView() or EditorTemplateId() options, the editors are not initialized as expected.
### Reproduction of the problem
1) Define a DropDownList editor in a partial View and load it through the EditorTemplateView() option:
@(Html.Kendo().OrgChart<OrgChartEmployeeViewModel>()
.Name("departmentsChart")
.Editable(edit =>
{
edit.Form(form => form
.Items(i =>
{
i.Add().Field(x => x.ParentDepartment).EditorTemplateView(Html.Partial("~/Views/Shared/EditorTemplates/ParentDepartmentDropDown.cshtml"));
}));
})
...
)
// ~/Views/Shared/EditorTemplates/ParentDepartmentDropDown.cshtml
@model OrgChartEmployeeViewModel
@(Html.Kendo().DropDownListFor(m => m.ParentDepartment)
.OptionLabel("-None-")
.DataTextField("Text")
.DataValueField("Value")
.DataSource(source =>
{
source.Read(read => read.Action("ReadDepartments", "Home"));
})
)2) The DropDownList is not initialized when opening the OrgChart form.
### Expected/desired behavior
The editors defined through the EditorTemplateView() or EditorTemplateId() options must be initialized correctly.
### Environment
* **Kendo UI version: 2025.2.520
* **jQuery version: 3.7.1
* **Browser: [all]
Bug report
TimeDurationPickerFor does not work in EditorTemplates scenarios.
Reproduction of the problem
- Create a TimeDurationPickerFor Helper within a standalone view within the
~/Views/EditorTemplate/folder.
@model double
@(Html.Kendo().NumericTextBoxFor<double>(m => m))- Use the Editor template within a more compound component. E.g the Grid
.Columns(columns =>
{
columns.Bound(m => m.Duration).EditorTemplateName("TimeDurationPicker");
columns.Command(command => command.Edit());
})- Notice that the application produces a server error.
Current behavior
The TimeDurationPickerFor Helper does not work in EditorTemplates scenarios.
Expected/desired behavior
The TimeDurationPickerFor Helper should work in EditorTemplates scenarios.
Environment
- **Kendo UI version: 2025.2.702
- **Browser: [all]
Hi,
I'm following this document to load data into the grid view control using local data binding.
https://demos.telerik.com/aspnet-core/grid/local-data-binding
I'm not sure this is an issue or expected grid view behavior when using local data binding. If loader-type and no-records are added. What happens is when there are no records, the Skeleton is still displayed and the no-records template is not displayed (see the attached image)
<kendo-grid mobile="Disabled" name="Grid" loader-type="GridLoaderType.Skeleton">
<columns>
<column field="ProductName" title="Product Name">
</column>
<column field="UnitPrice" format="{0:C}" title="Unit Price" width="130">
</column>
<column field="UnitsInStock" title="Units In Stock" width="130">
</column>
<column field="Discontinued" title="Discontinued" width="130">
</column>
</columns>
<datasource type="DataSourceTagHelperType.Ajax" page-size="20" server-operation="false" data="@Model">
</datasource>
<filterable enabled="true">
</filterable>
<scrollable enabled="true" />
<pageable enabled="true">
</pageable>
<sortable enabled="true" />
<no-records template="string HTML template, automatically centered" />
</kendo-grid>
Thanks
Bob
As stated in the title, the Save() action of a grid (with pagination, not endless scroll) does set the scroll position to the top instead of persisting it.
I tried to follow instructions from https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/data-management/grid/scrolling/overview#restoring-the-scroll-position but without success. The scroll position is moved to the top after the DataBound event handler.
The Kendo UI for jQuery TreeList provides options for configuring the settings of the Window when using Popup editing mode:
Currently, the Window options are not available for the HtmlHelper and TagHelper TreeList. Is it possible to implement the Window() configuration of the Editable() option, as per the example below?
.Editable(e =>
{
e.Mode("popup");
e.Window(w => w.AppendTo("..").Animation(false).Draggable(false).Title("..."));
})
### Bug report
When adding a <select> element as a custom tool in the Editor, the dropdown does not open.
### Reproduction of the problem
1) Run the Dojo sample and try to open the dropdown in the toolbar:
https://dojo.telerik.com/VVPUopDw
The same example work as expected with version 2023.1.117.
2) When using version 2024.4.1112, if you remove the "ref-toolbar-tool" attribute from the <div class='k-toolbar-item'> element, the dropdown opens as expected.
### Expected/desired behavior
The <select> element must function correctly when added as a custom tool in the toolbar.
### Workaround
Handle the "click" event of the select and prevent the event bubbling:
<script>
$(function () {
const selectElements = $('select[id^="symbolSelect_"]');
$(selectElements).each(function (index) {
this.addEventListener("click", clickHandlerSymbolSelect);
});
});
function clickHandlerSymbolSelect(e) {
e.stopPropagation(); //Prevent event bubbling, so Kendo cannot swallow or cancel the event.
const sendingElement = e.target;
sendingElement.showPicker();
return true;
}
</script>### Environment
* **Kendo UI version: 2025.1.227
* **jQuery version: 3.7.1
* **Browser: [all]