i've tried to apply autoFitColumn method for treelist accordingly to the documentation, https://docs.telerik.com/kendo-ui/api/javascript/ui/treelist/methods/autofitcolumn#autofitcolumn , and seems it assumes only "simple" columns structure, i.e. no nested headers.

I am trying to upgrade my Kendo UI JQuery installation from 2022 to 2024 and it is not going smoothly. One issue I'm having is that now my grids with locked columns do not span the whole width of their container. In the old version, the k-grid-table would expand to fill the width of the k-grid-content but now it seems that the columns retain their width, rather than growing like they used to. So now there is a large white space between the last column and the vertical scrollbar. I did notice that if I remove the inline style in the developer tools that is applied to the k-grid-table in the unlocked section, it fixes it. It should continue to expand all columns evenly to fill the available width like it did in versions past or this should be an option that the user can set. To leave that space without any user choice is a bug.

Old Version:

New Version: 

Note, I reported this in a forum post. I know I can write code as a workaround but that is cumbersome, especially when I have many grids and multiple developers working on the project. 

Context: There is an item that illustrates the issue here: https://www.telerik.com/forums/kendo-datepicker-value-not-populated-after-refresh-firefox-only

In Firefox, when using the asp-for tag helper to bind a c# DateTime field to an input element, then calling kendoDatePicker() on that element, the control fails to populate on a soft-refresh (F5). Upon reloading using F5 in Firefox, the input's type is set to datetime-local, and the input 's control variation is changed to the default date picker.  Then, the Kendo UI DatePicker is initialized with a blank input which normally has a type of text. 

Example project and video of issue are attached.

This is the pertinent code (also happens in latest version of Kendo as well):

    public class IndexViewModel
    {
        public DateTime DateAsDateTime { get; set; }
    }

        public IActionResult Index()
        {
            return View(new IndexViewModel { DateAsDateTime = DateTime.Today });
        }

@model IndexViewModel

<input id="dtDate" asp-for="@Model.DateAsDateTime">

<script type="text/javascript">
    $(document).ready(function () {
        $("#dtDate").kendoDatePicker();
    });
</script>

Hi,

When I double click a cell and enter into editing mode, scrolling up or down will make the editor div out-of-place. 

It should follow the target cell instead.

This can be easily reproduced here: https://demos.telerik.com/kendo-ui/spreadsheet/index

It seems Kendo UI for Angular/React also have the same issue.

Reproduction of the problem

1. Follow the steps described in the link here - https://github.com/telerik/kendo-ui-core?tab=readme-ov-file#building-kendo-ui-core
2. Create a custom script for validator npx gulp custom -c validator
3. Try to load the script and create the components

Current behavior

The validator is not working, error is shown

jQuery.Deferred exception: $(...).kendoNumericTextBox is not a function

Expected/desired behavior

The components should work as expected when custom script is created

Hello everyone, I'm Darshan Hiranandani, currently grappling with CORS (Cross-Origin Resource Sharing) issues in my web application and could use some assistance. Has anyone encountered similar challenges and successfully resolved them? If so, could you please share any tips, tricks, or troubleshooting steps you used to overcome CORS issues in your projects? Any advice would be greatly appreciated. Thank you for your help!"

Currently, the kendo.culture() method accepts only a string argument which is used for mapping an included culture file.

However, it would be beneficial if additional arguments could be passed to the method as well which may override some of the culture file's existing options. For example:

kendo.culture("bg-BG", {
   numberFormat: {...},
   calendars: {...}
})

Hello Team,

We are currently facing challenges with the Kendo grid, which is a widely used widget or component at o9Solutions. Although we have been using Kendo for a long time, the widget is failing to meet accessibility standards for some components, which are crucial in today's world.

Regarding the Kendo grid, there is an issue where SR is reading the table twice, once for the header and once for the cells. This can cause confusion for assistive technologies like SR.

Consider the cases of horizontal scroll or fixed column cases also.

Having a single <table> is the standard. We can't create multiple tables, which will violate the good coding practices + accessibility standards.

---

I saw some posts regarding this... where it was mentioned we can remove this Scrollable() . But what are the cons of this if we remove this?
--

We want this functionality like a horizontal or vertical scroll or fixed column cases.But it needs to recognize as a single table.

1. Are there any specific versions of Kendo UI jQuery that you would recommend for compatibility with strict CSP?
   
2. What potential risks or extensive modifications might be involved in upgrading from our current version to a CSP-compatible version?

Repro steps:

• Open URL: Kendo UI Snippet | Kendo UI Dojo (telerik.com)
• Navigate to the Choose Library combo box and select 'Kendo UI 2022 R2' option.
• Navigate to the Run button and activate it.
• Open Narrator using 'Ctrl + Win + Enter' key.
• Press 'T' key to navigate table in quick navigation mode.
• Navigate the table header controls using up arrow.
• Observe that narrator announce role as link on Filter controls.

Actual Results:

Incorrect role is defined as "link" for the "filter" button, Screen reader announce like "Metric type filter column setting link".

Expected Results:

Correct role should be defined as "button" for the "filter" button. Screen reader should announce like "Metric type filter column setting button".

Hi Guys,

I have just upgraded to v2023.3.1114 only to find out the AngularJS directives have been completely removed from this release, causing a lot of wasted time & effort triaging the errors and then rolling things back to a previous working revision.

Back in a February 2018 blog post, you stated you were dropping support for AngularJS in all new components which was understandable but what I didn't expect was it's complete removal, especially in a SP, without any further communication.

The v2023.3.1114 release notes do not even list this as a breaking change, so are you expecting your customers to be clairvoyant now or is this just another example of how poor Telerik's customer service has become in the past few years?

Regards
Alan

I have a tab control, and a number of the related views contain grids.

If a grid is created in a tab view that is not visible, then the grid pager renders as if it was on a tiny mobile screen. The only way you can make it render the pager correcly is to manually resize the browser window after the grid has become visible.

I have a simple demonstration here: https://dojo.telerik.com/eCuQAqEm

The behavior is the same in both Chrome and Firefox.

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/tabstrip/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link href="https://kendo.cdn.telerik.com/themes/6.7.0/default/default-main.css" rel="stylesheet" />
    <script src="https://kendo.cdn.telerik.com/2023.2.829/js/jquery.min.js"></script>
    
    
    <script src="https://kendo.cdn.telerik.com/2023.2.829/js/kendo.all.min.js"></script>
</head>
<body>
        <div id="example">
                <div class="demo-section">
                        <div id="tabstrip">
                            <ul>
                                <li class="k-active">
                                    Visible Grid
                                </li>
                                <li>
                                   Hidden Grid
                                </li>
                            </ul>
                           
                            <div>
                              <div id="visibleGrid"></div>
                            </div>
                            <div>
                              <div id="hiddenGrid"></div>
                            </div>
                        </div>
                </div>
            <script>
              	const data = [];
              	for (let i = 0; i < 100; ++i) {
                  data.push({
                    columnOne : `Item ${i} Column One`,
                    columnTwo : `Item ${i} Column Two`
                  });
                }
              	const gridOptions = {
                	dataSource: data,
                  pageable: {
                    refresh: true,
                    pageSize: 10,
                    pageSizes: [10, 20, 30]
                  },
                };
                $(document).ready(function() {
                    $("#tabstrip").kendoTabStrip();
                    $("#visibleGrid").kendoGrid(gridOptions);
                  	$("#hiddenGrid").kendoGrid(gridOptions);
                });
              
            </script>
        </div>
</body>
</html>

The children of a node (if the children are all leaf nodes) vertically stack when parent is expanded. Can you add a setting that forces horizontal sibling orientation for leaf nodes.

Current:

Desired:

Hi Team, we're using kendo heavily on our platform. But still there're many gaps in kendo accessibility. I'm working as a Accessibility advocate and i believe every individual can access the widgets irrespective of their barriers. One of the issue is:

Keyboard Support is missing in the input fields buttons like:

1. Clear Button

2. Dropdown "arrow" Button

3. Date and Time Button

Current Behavior:

Focus is going to input field and you can write inside the combobox or textbox or multiselect but you can't interact with other icon buttons like dropdown , date & time, clear "x" button using tab key.

Expected Behavior: As per accessibility , every interactive elements needs to be keyboard focusable using tab key irrespective of shortcut.

I've created a feature request long ago and suggested solution for this: please check in the feature, it's declined by the team:

Date time picker Keyboard Support is missing for date and time button because of (tabindex=-1)

we are extensively using the Kendo Jquery Grid for our datasets. The pager can be positioned at either the top of the grid or the bottom of the Grid using the configuratioon within the Grid Pager definition. I find having two pagers better when the display grid take up more than a  view port, then you can sometimes be closerto the top of the grid, sometimes closer to the bottom. If the Page is just at the top or the bottom then some cases you have to scroll throrough the  entire grid to get to the pager. So when it present at both, you can have eaiser access to the Pager.

So I am requesting that the position configuration in the grid is Top, bottom, Both.

Mark D

Hi team, please find the accessibility issue:

Component: https://demos.telerik.com/kendo-ui/datetimepicker/keyboard-navigation

Issue Name: 

Missing keyboard support for image buttons

Actual Result

Keyboard support is missing for "Open the time view" and "Open the date view" image buttons. This made it difficult for keyboard-only and screen reader users to access the functionality associated with the image buttons.

Steps to Reproduce

1. Navigate to the mentioned image buttons in the modal dialog.

2. Observe that the image buttons do not receive the keyboard focus.

Expected Results

The image buttons must be keyboard accessible.

Recommendation

Ensure that all the page functionality is available for all users irrespective of the device being used. 
Apply the following changes:
• Remove the tabindex="-1" attribute from the source code of the image buttons.
• Initially set the aria-expanded attribute to "false" for the image button. Ensure that the value of the aria-expanded attribute changes on user interaction via scripting.

Existing:

<button unselectable="on" tabindex="-1" class="k-select k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button" aria-label="Open the time view" type="button">
<span class="k-icon k-i-clock k-button-icon"></span>
</button>

Recommended

<button unselectable="on" class="k-select k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button" aria-label="Open the time view" type="button" aria-expanded="false">
<span class="k-icon k-i-clock k-button-icon"></span>
</button>

Also, the shortcut is there to open a date and time picker but relying on the shortcuts only to open it would not be feasible,

Hi,

you have an open DatePicker on a mobile device and want to scroll up or down.
If you press and hold the screen inside the popup you can scroll but when you release the screen the date is selected and the DatePicker closes.
Shouldn't the DatePicker stay open because the user just wanted to scroll the page?

If you do the same with a DateRangePicker it's working. The date is selected but stay's open.

Thank you!

Hi,

When "filter" option is set for dropdown tree widget, "checkChildren"  option doesn't take effect even if it is set to true.

Please, check example:

https://dojo.telerik.com/iMaVehuS/6

Thank you.