Currently, if a PDFViewer is opened on a mobile device and we use two fingers to zoom its content, the file is zoomed but the more we zoom it, the blurrier its content becomes. The reason for this is the fact that when we use "pinch-zoom" to zoom the PDF file(in a PDFViewer) it is zoomed using the browser's zoom functionality and not the functionality provided by the PDFViewer component.
It will be a very useful feature if the built-in PDFViewer zoom functionality is used when the user zooms content with two fingers, on a mobile device
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
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.
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>
Consider the use of TextWriter async methods for the HTML Helpers, for example the WriteInitializationScript methods. In certain scenarios the use of the synchronous methods causes an exception: System.InvalidOperationException: Synchronous operations are disallowed. Call WriteAsync or set AllowSynchronousIO to true instead.
This can be resolved by explicitly enabling synchronous operations
services.Configure<IISServerOptions>(options =>
{
options.AllowSynchronousIO = true;
});though synchronous operations have been disabled by default at framework level as of .NET 3.0.
column-command template does not access datasource as an ordinary column template.
<kendo-grid name="grid">
<columns>
<column field="ProductID" title="ID" />
<column title="Column" template="#=columnTemplate(data.ProductID)#" />
<column title="ColumnCommand">
<commands>
<column-command name="change" template="#=columnTemplate(data.ProductID)#"></column-command>
</commands>
</column>
</columns>
<datasource type="DataSourceTagHelperType.Custom" server-filtering="true">
<transport>
<read url="@Url.Action("ServerFiltering_GetProducts", "MultiSelect")" />
</transport>
</datasource>
</kendo-grid>
<script>
function columnTemplate(productID) {
if (productID % 2 == 0)
return 'even';
else
return 'odd';
}
</script>Reproduction of the problem:
https://netcorerepl.telerik.com/myurdlbI16kA1TM213
Current behavior:
There is no way to have a dynamic template for column commands that depends on datasource.
Expected/desired behavior:
Having column-command template as column template, making it possible to access data from datasource.
Environment:
Kendo UI version: 2024.2.514
Workaround:
As an alternative solution, I'm using data-bound event, performing a for loop to all rows, but it needs to go line by line, which is not the best solution for large data.
Maybe adding it to the Kendo UI .Net Core offering would at least entice us to sign up for that too!
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!
Is it possible to implement an option that enables the paging of the Grid View?
For example:
@(Html.Kendo().FileManager()
.Name("filemanager")
.Views(gridView => gridView.Grid(grid => grid.Pageable()))
...
)
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?
Currenty, when the Grid is in InCell edit mode, if a column binds to a boolean field, it is required a custom logic to display the field as a checkbox, which is always in edit mode and can be updated through a single click. Here is a REPL sample that shows the example:
https://netcorerepl.telerik.com/GJOhEIkj47P2xHf709
My opinion is that this functionality should work correctly out of the box without additional coding. If this is not available, then there should be an applicable sample code.
Is it possible to make an example where EF, Dirty works, no double click required and the checkbox always looks like a checkbox?
Starting with version 2025.2.520, the toolbar tools like "Save changes" and "Cancel changes" are hidden by default. When the ShowInactiveTools(true) option is set, the inactive tools are displayed as disabled until a change in the Grid's data is made (for example, the tools are active when the edited cell is closed).
Is it possible to create an option that enables the previous behavior of the inactive toolbar tools - to keep the tools always active and visible no matter if there is a change or not?
For example:
.ToolBar(toolbar =>toolbar
.Items(itm =>
{
itm.Create();
itm.Save();
})
.EnableInactiveTools(true)
)
Hello,
I have a treeview that is getting the first items which are locations, then it loads divisions as its children. I want to have the treeview load a top item called "Locations" that is static. It will need to be expanded and load all the locations under it. Then when I click on a location it loads the divisions. The locations and divisions will be populated by a call to the controller and action. I have yet figured out how to do this and is it even possible? Here is the code I have right now. You will see for now that I am loading a div with the location icon and "Locations" as the text, but I would like this to be the top root level of the treeview.
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("..."));
})
Description
File Manager refresh changes the selected item.
Refresh should not change the selected item if it is available after refresh.
If the selected item is not available after refresh, Preview pane should show No File Selected.
Reference
https://demos.telerik.com/aspnet-core/filemanager
Error
Select Documents folder in Tree View then Excel Document in List View. Excel Document is shown in the Preview pane.
Refresh the File Manager using jQuery in Console.
$("#filemanager").getKendoFileManager().refresh()Excel Document is not selected and Preview pane shows Documents.
Refresh changed the selected item.
Expected behavior
Selected file does not change after refresh.
Example Windows File Explorer. Select a file in the folder and press F5 to refresh the folder.
Currently, when dynamically appending menu items using the append() method, there is no built-in support to specify an icon via an icon, iconClass, or similar property — unlike other Kendo UI components such as kendo.ui.Button, which allow this directly.
To include an icon today, we must use inline HTML within the text property and set encoded: false, like so:
menu.append({
text: '<span class="k-icon k-i-plus"></span> Add Item',
encoded: false
});
While this workaround functions, it's not as clean or consistent as using a dedicated iconClass or icon option.
Please consider adding official support for an iconClass, icon, or similar property when using append() with kendo.ui.Menu, aligning it with how other Kendo components handle icons.
This would:
- Improve API consistency across Kendo components.
- Simplify code for dynamic menu updates.
- Eliminate reliance on raw HTML and manual encoding flags.