Hello,

My use case:

On grid dataBound, I am iterating over the table rows to perform some piece of custom logic on the row based off of the backing dataItem. Our production site is using version 2024.1.130, and everything is working great. Our next release we've updated to version 2024.2.514, and when we try adding a record, we get an error; when we try to access the dataItem of the last table-row - the dataItem is undefined. The grid.items() in my case is an array of size 21, and the internal _data array is size 20.

Repro conditions (as far as I can tell):

• A Grid backed by a DataSource with server operations set to false
• The DataSource should (?) have a filter configured
• The size of the DataSource's data should (?) be larger than the pageSize

My workaround:

Simply perform a null check on the dataItem before doing the logic. We are calling DataSource.read in the DataSource.sync success callback anyway, so the grid will reload and the dataBound event will be handled afresh.

I've created the below dojo snippet to demonstrate a simplified version of my use case. I tested with 2024.1.130 and seems to work fine. I noticed the issue starting at version 2024.1.319.

https://dojo.telerik.com/INbSBrSg

A note: No, I don't actually use the internal _data property in my code, just for debugging purposes :)

Thanks!

-Alexa

I'm seeing an error in the Chrome console when the filter menu is clicked on in a kendo grid: https://demos.telerik.com/kendo-ui/grid/filter-menu-customization

You can see the example in the link above by opening your console in Chrome and clicking on the filter button. 

Here is the error:

Blocked aria-hidden on a <a> element because the element that just received focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.

When the browser is zoomed, the TabStrip scroll right arrow does not change to disabled when there are no more tabs to scroll into view. 

It looks like the problem is in kendo.tabstrip.js _toggleScrollButtons function, the following line:

that._scrollNextButton.toggleClass('k-disabled', scrollLeft === ul[0].scrollWidth - ul[0].offsetWidth);

When the browser is zoomed, kendo.scrollLeft(ul) returns a decimal value.  https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft has the warning: "On systems using display scaling, scrollLeft may give you a decimal value."

scrollWidth and offsetWidth are rounded to integer.

My workaround is to override the _toggleScrollButtons function and do the following:

that._scrollNextButton.toggleClass('k-disabled', Math.abs(scrollLeft - (ul[0].scrollWidth - ul[0].offsetWidth)) <= 1);

Bug Title: Filter controls are not accessible via keyboard under 'Security Groups and Service Accounts' screen.

Severity: Sev1 (Critical)

Test Environment: OS: Windows 11 22H2
OS Build: 23620.1000

Repro steps:
1.Open https://codepen.io/oneID/pen/LYaGREP
2.Activate populate grid.
3.Try navigating to Column filter controls using keyboard.
4.Observe whether filter controls are accessible via keyboard under 'Security Groups and Service Accounts' screen or not.

Actual Result:
Keyboard focus does not remain on same control after pressing 'ESC' key to close the opened ‘Filter’ popup present under 'Security Group' screen.

Expected Result:
Keyboard focus should remain on same control after pressing 'ESC' key to close the opened ‘Filter’ popup present under 'Security Group' screen.

Bug report

Inserting sheets in the Spreadsheet component is not working as expected.

Reproduction of the problem

1. Open this Dojo example https://dojo.telerik.com/EyEzOcER/8
2. Click on the Load New Sheet Button
3. Click again
4. Open the Browser console to see the error:

Current behavior

Error is thrown.

Expected/desired behavior

Error to not be persistent.

Environment

• Kendo UI version: 2024.1.319
• Browser: [all]

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.

Bug report

When typing in the search input a value that does not match any item of the Filemanager's content view, while a subfolder is selected, the expand arrow disappears.

Reproduction of the problem

1. Open this Dojo: https://dojo.telerik.com/AmOGOdut
2. Select documents and create a subfolder
3. Select the newly created folder and create another subfolder
4. Type "a" or other value that does not match
5. See the arrow disappearing

Current behavior

The expand arrow disappears.

Expected/desired behavior

The arrow should not disappear and the search to work correctly.

Environment

• Kendo UI version: 2024.2.514
• Browser: [all]

I have custom messages for my filter, these values replace the and/or values instead of just the visual after switching the and/or once.

Reproducer: https://dojo.telerik.com/AdOGEQey

When initially running you will see "en/of" (and/or), if you than press any of them the text below will insert the message value of the button rather than the underlaying value of "and/or".

treelist

- has filterable mode 'row',

- some columns are not filterable,

- columns reordering is allowed

drag-n-drop of columns raises error in console

demo: https://dojo.telerik.com/aFIkOPUp

try to move column "position" left or right

Hi,

We have recently upgraded our Kendo MVC version to 2024.2.514.462. The normal upgrade works fine but I was trying to implement the `CSP template` after removing the `unsafe-eval` from the tag as it was announced in 2023 version.

I was following the example given in CSP template and tried changing the template defined in treeview (also as shown in the documentation):-

  sideNavList.kendoTreeView({
      /*template: "<span id='#= item.id #' class='navText'> #= item.text# </span>",*/
      template: ({ items }) => `<span id='kendo.htmlEncode(items.id)' class='navText'> kendo.htmlEncode(items.text) </span>`,
      dataSource: hierarchicalLeftNavData,

It is not throwing error but it's not able to recognize the `item` and rendering the template as:-

<span id="kendo.htmlEncode(items.id)" class="navText"> kendo.htmlEncode(items.text) </span>

Am I missing anything?

Build Dates & Run Dates range picker don't highlight days

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. 

Issue 1:
When I initialize a kendo editor from a div with content, all of the table tools are shown in the editor toolbar (insert row, insert column, etc) on initialization. Once the user clicks in the box they disappear. I prepared a Dojo showing this. 

In the Dojo, you will see there are 2 different editors. The first editor uses a function I wrote that worked in version 2022 but doesn't in version 2024 of Kendo. The second editor is just a default initialization using none of my custom code. The purpose of the first one is to show the toolbar on initialization. In both instances of the editor, you will notice that the insert row, insert column, etc are showing at first and then quickly disappear. This only happens the first time the user clicks into the editor. These should not be visible until the user clicks into the editor and selects a table.

I did notice that if I initialize the div empty, then add the content later programmatically (like this: kendoEditor.value("Hello World");), the issue doesn't happen.

Issue 2: 

Once you add a table, you can't remove it using backspace or delete. Try this example: 

1. In either editor, click the insert table button.
2. Insert a table.
3. Click into the editor and press backspace and/or delete. The table doesn't go away.

https://dojo.telerik.com/@dojolee/OgOpalaL

When I incell edit multiple rows I only receive a sync callback through `change` on the datasource for the last row with only that last row in the "changedItems". This results in the grid not removing the dirty indicator for any of the other rows, only the last one is removed. The rows are updated properly and I if I were to manually call grid.refresh() it removes the indicators. If I update the rows individually it has no problems.

Here I've updated only the first row:

Here I've updated only the second row:

Here I've updated the first 2 rows at the same time and only the last one is detected as updated:

Here I've updated the PRS column for all 4 rows to "5" and it saved correctly, but only the last row is detected as updated in the grid:

As there's a lot of code involved I can't just paste it here, I can provide snippets or information about particular settings though.

Bug report
ComboBox is not raising blur Events when clear button in another ComboBox is hit

Regression since 2021.1.119

Reproduction of the problem
Dojo: https://dojo.telerik.com/uGUbiJiN

1) Select an item in ComboBox1

2) Select an item in ComboBox2

3) Hit the `x` button in ComboBox1

Expected/desired behavior
Blur event shall be triggered for ComboBox2

Environment
Kendo UI version: 2021.1.119 or newer
jQuery version: x.y
Browser: [all]

When a column is set to sticky in a grid and the user clicks edit and then cancel, that column become unsticky for that row only. This happened when I upgraded from 2022 to 2024 so the bug was created somewhere in there. To reproduce, see this dojo: 
https://dojo.telerik.com/@dojolee/evOPeBey

1. Shrink the right side of the screen until it is pretty small (about 700px)
2. Click Run and make sure there is a horizontal scroll. If not, shrink the right and click run again.
3. Scroll and notice that the first column sticks
4. Click edit on the first row
5. Click cancel
6. Scroll and notice that the first row no longer has a sticky column.