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.

### 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

1. Create a model hierarchy where a derived class shadows a base class property with new keyword
2. Bind the Editor component with the shadowed property
3. 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

1. Create an Razor Page application.
2. Add a Form with FormData
3. 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]

I am working on a grid that has 3 requirements that seem to cause the bug:

• A FK column must have its lookup values loaded remotely
• The grid has sticky columns
• The grid is loaded inside a tab strip control

The combination of these 3 factors causes the grid not to load and results in a devtools console error. It's worth noting that removing any of the 3 bullet points above (e.g. NOT using sticky columns, NOT loading grid in tab control, or NOT have a remote FK column) allows the grid to load properly.

The error thrown in the DevTools console indicates that the grid's "tbody" property is not created at the time it is trying to call _setStickyStyles.

Before error is thrown (mouse is hovering over "tbody" property):

After error is thrown (look at console output):

I have upload a zip file containing a sample project that demonstrates the issue. When you launch the sample application, there are 2 links at the top of the page, "No Tabs" and "Tabs". The issue is reproducible on the "Tabs" page. Both pages use the same grid partial, but the "Tabs" page loads the partial through the tabstrip with a controller action. The "Tabs" page includes the 3 bullet points I indicated above that cause the problem.

The workaround I am using for now in my application is to NOT set the columns as sticky in my partial view. Instead, I set the sticky columns using the grid's API method "stickColumn" (https://www.telerik.com/kendo-jquery-ui/documentation/api/javascript/ui/grid/methods/stickcolumn) during the grid's dataBinding event (to ensure sticky columns are set AFTER grid initialization). This allows the grid to load and sets the sticky columns appropriately.

Thank you!

### 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

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.

### 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 the virtualization is enabled, in some cases, the selected options in the dropdown do not match the selected options in the input. 

### Reproduction of the problem

1) Create a MultiSelect with Virtualization (for example, the same configuration as in the online demo).

2) Select multiple options from the dropdown.

3) Enter a search entry in the input to filter the displayed options and select a specified option.

4) Scroll down and select another option.

5) Remove some of the already selected options through the input.

6) Open again the dropdown. The selected options in the input do not match the selected options in the dropdown.

A screencast for reproduction: https://app.screencast.com/v6GtyST0dQAnh

### Expected/desired behavior

Bug report

When ParseFormats is set in the DatePicker editor used in the Grid popup, the picker does not show the field value to which it is bound.

Reproduction of the problem

1. Add a DateOnly? field to the model:

public DateOnly? OrderDate { get; set; }

2. Bind a Grid column to the field.
3. Set the default value in the DataSource:

.Model(model =>
{
    model.Id(p => p.OrderID);
    model.Field(p => p.OrderDate).DefaultValue(new DateOnly());
})

4. Configure Popup editing in the Grid.
5. Add a DateOnly.cshtml editor in EditorTemplates:

@model DateOnly?

@(Html.Kendo().DatePickerFor(m => m).ParseFormats(new string[] { "MM/dd/yyyy" }).HtmlAttributes(new { title = Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName("") }))

Current behavior

When editing a record. The value of the OrderDate field is not displayed in the DatePicker.
If you remove the ParseFormats option from the DatePicker, it shows the value as expected.

Expected/desired behavior

The field value should be displayed in the picker, even when ParseFormats is set.

Environment

• Kendo UI version: 2024.4.1112
• Browser: All

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.

### 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

When the Grid is set up for OData-v4 binding, the columns that bind to DateOnly fields fail to filter. The date value in the filter expression contains the time portion and the following error is thrown:

"The binary operator GreaterThan is not defined for the types 'System.Nullable`1[System.DateOnly]' and 'System.Nullable`1[System.DateTimeOffset]'."

### Reproduction of the problem

1) Create a Grid that uses OData-v4 binding.

2) Bind a specified column to a DateOnly field.

3) Filter the column through the default column filter menu and open the browser DevTools to review the response of the request.

//Model
public DateOnly LastProdUpdate { get; set; }

//View
@(Html.Kendo().Grid<ProductViewModel>()
    .Name("grid")
     .Columns(columns =>
        {
            columns.Bound(p => p.LastProdUpdate).Format("{0:dd/MM/yyyy}");
        })
        ...
        .Filterable()
        .DataSource(dataSource => dataSource
        .Custom()
        .Type("odata-v4")
        .Transport(t =>
        {
            t.Read(read => read.Url("/odata/Products").Data("function() {return {'$expand': 'Employee'} }"));
        })
        .PageSize(10)
        .ServerPaging(true)
        .ServerFiltering(true)
        .ServerSorting(true)
     )
)

### Expected/desired behavior

The DateOnly fields must be filtered successfully as the DateTime fields.

### Environment

* **Kendo UI version: 2024.4.1112
* **Browser: [all]

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]