Bug report
Problem with ToTreeDataSourceResult method when filtering on root and child level.
Also applying filtering causes a significant slowdown in the query created by the ToTreeDataSourceResult method even when applied to small datasets.
Reproduction of the problem
Please refer to the code below and simply filter the first column with the value of 5.
//View
@(Html.Kendo().TreeList<WebApplication1.Models.SerialModel>()
.Name("treelist")
.Toolbar(toolbar => toolbar.Create().Text("New Level"))
.Columns(columns =>
{
columns.Add().Field(e => e.RecordID).Width(280);
columns.Add().Field(e => e.SerialNumber).Width(160);
columns.Add().Field(e => e.Name);
columns.Add().Field(e => e.Location).Width(200);
columns.Add().Field(e => e.ParentID).Width(140);
columns.Add().Command(c =>
{
c.CreateChild().Text("New Child");
c.Edit();
c.Destroy();
}).Width(250);
})
.Editable(editable => editable.Mode("inline")).Filterable(true).Filterable(f => f.Extra(false))
.DataSource(dataSource => dataSource
.Read(read => read.Action("TreeListData", "Home"))
//.ServerOperation(false)
.Model(m =>
{
m.Id(f => f.RecordID);
m.ParentId(f => f.ParentID).DefaultValue("0");
})
)
.Height(540)
)
//Controller code:
public ActionResult TreeListData([DataSourceRequest]DataSourceRequest request, int? id)
{
var source = Enumerable.Range(1, 5).Select(x => new SerialModel()
{
RecordID = x,
SerialNumber = x,
Name = "Name " + x,
Location = "Location " + x,
hasChildren = true,
ParentID = x < 5 ? 0 : (x / 5)
});
return Json(source.ToTreeDataSourceResult(request, e => e.RecordID,
e => e.ParentID, e => id.HasValue ? e.ParentID == id : e.ParentID == 0, m => m));
}
Expected/desired behavior
Instead of 1 record it returns 2 same items.
Filtering of the TreeList should be as fast as sorting.
Environment
- Kendo UI version: 2023.1.117
The FileManager triggers two Read requests when double clicking a folder in the ListView/GridView. The behavior can be observed in the Basic Usage Demo.
When navigationg to a folder in the TreeView using a single click, the component triggers a single Read request.
Could you consider optimizing the request handling when navigating to nested folders, particularly in ListView/GridView, to reduce redundant Read calls and improve performance?
Bug report
When a PDF file that contains PNG images is loaded in the PDFViewer that uses DPL, the PNG files are not displayed in the viewer.
Reproduction of the problem
- Open this project(PDFViewerDPL.zip) and run it
Current behavior
An empty file loads in the PDFViewer while the loaded PDF file contains the logo of the Firefox browser.
Expected/desired behavior
The PDFViewer should display the Firefox logo loaded in the PDF file.
Environment
- Kendo UI version: 2020.3.1021
- jQuery version: x.y
- Browser: [all]
Hello,
On Chrome for Android, the dropdown menu appears offscreen. With Firefox for Android or Chrome desktop, it works well.
This sample reproduces the problem : https://runner.telerik.io/fullscreen/@kakone/azuPAHuy. If you click on the right item (user icon), the dropdown appears offscreen.
### Bug report
When an Editor component in inline mode is set as an editor in an InCell editable Grid, the Grid cell does not enter edit mode on "click". The issue occurs since version 2023.1.314.
### Reproduction of the problem
1) Create an InCell editable Grid.
2) Set an Editor component in inline mode as an editor to a specified Grid column.
3) Try to edit the cell.
4) The cell flashes and does not enter edit mode.
A Dojo sample for reporduction: https://dojo.telerik.com/zQUvDQEq (check out the "ProductName" column)
### Expected/desired behavior
The Grid column that uses Editor component in inline mode must be editable.
### Environment
* **Kendo UI version: since 2023.1.314
* **jQuery version: 3.4.1
* **Browser: [all]
It will be great if we can have a very simple "out-of-the-box" way to add a Column Chooser in the toolbar, similar to the Search Feature.
Something like Syncfusion's column chooser here:
https://ej2.syncfusion.com/aspnetcore/Grid/ColumnChooser
This will help me significantly in my development effort and provide a much better experience for my paying customers.
I have hundreds of grid tables with different schemas, columns with MinScreenWidth, and hidden columns (depending on the availability of data).
On a page, it can have multiple grid tables that are dynamically generated.
I also use View Component to generate each grid table.
The current column menu isn't perfect because I want it to only act as a filter checkbox, not a menu where a user needs to click twice to access the filtering feature. (And my users need to use the filtering mechanism A LOT)
Thanks,
Luke
### 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]