Upgrading from 2022 to 2024 q2

[Lee]

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. 

Another issue I just discovered is on the multiselect. It seems that the class that used to be applied when the list was expanded is not there anymore ".k-state-border-down". I used this to target the down arrow and change it to a checkmark but now it seems there is no class to target in CSS. How would I change the arrow icon when the multiselect is expanded?

 

Old Version:

New Version: 

 

How do I fix this, and is there documentation somewhere on all of the breaking changes between the two versions and how to fix them? 

[Mani]

Hi Lee

I am also upgrading to latest version So I have downloaded the latest version from Telerik account, after that I noticed that the file names are changed. So How can I remove my old paths and include the new paths of css & Js files in my layout page. I didn't find any solution from the documentation itself too.

Note:- I am upgrading Kendo UI for Jquery 2022.1.119 to 2024.2.514

[Lee]

Hi @Mani. I just updated from that version too. I'm not sure I understand your question correctly but I'll try to answer.

You should have a link to the css in the header of your layout.html (or layout.cshtml) file. Your project might have multiple layout files that are used depending on the page. For example, one of my projects has both layout.cshtml and noNavLayout.cshtml because some pages on the site don't have a navigation. The javascript link goes at the end of the body of that file. If you just need to change the path, you can do it there. Some of the css, like bootstrap-v4, I don't think exist anymore. Here are my new paths: 

    <link rel="stylesheet" href="/kendo/styles/font-icons/index.css" />
    <link rel="stylesheet" href="/kendo/styles/bootstrap-main.css" />

    <script src="/kendo/js/kendo.all.min.js"></script>

    <script src=`kendo/js/cultures/kendo.culture.${locale}.min.js`></script>

If you need more help let me know.

[Yordan]

Hello Lee,

Thank you for the provided details.

Here is a KB article that shows how to remove trailing spaces with locked columns:

• Remove Empty Space on Resizing - Kendo UI for jQuery Data Grid - Kendo UI for jQuery (telerik.com)

Here is a modified Dojo example that accommodates locked columns (without having an empty column at the end)

• Untitled | Kendo UI Dojo (telerik.com)

For the Multiselect issue, `k-state-` classes are not supported any more.

I suggest you try to target the icon using the `open` and `close` events of the Multiselect.

• open - API Reference - Kendo UI MultiSelect - Kendo UI for jQuery (telerik.com)
• close - API Reference - Kendo UI MultiSelect - Kendo UI for jQuery (telerik.com)

Here is a Dojo Example of how to change the icon dynamically:

• Kendo UI Snippet | Kendo UI Dojo (telerik.com)

Components that have major rendering changes should also have `Appearance` section in the documentation.

Here is an article where you can see all breaking changes version to version: 

• 2023 Releases - Kendo UI Backwards Compatibility - Kendo UI for jQuery (telerik.com)

Regards,
Yordan
Progress Telerik

[Lee]

Thank you. I created a bug ticket for the issue with the extra space in the grid as that used to work correctly in Version 2022 but now it does not. I appreciate the workaround but that is too cumbersome to have to do every time. 

[Yordan]

Hello, Lee,

I have replied to you in the report:

https://feedback.telerik.com/kendo-jquery-ui/1658887-large-gap-between-last-column-and-scrollbar 

Regards,

Yordan

[Lee]

I think I found the issue. In the new version, role="grid" was changed to role="none" in the table header and completely removed in the body of the table. One of my CSS files was targeting that to add a "min-width: 100%" to the tables. 

2021:

2024:

[Yordan]

Hello Lee,

I have investigated your "min-width" approach, and indeed it seems to remove the trailing spaces. 

Regarding the role attribute, that is also by design. Further details can be found in this thread. Using a grid attribute to add custom CSS is not optimal since there is always a possibility of changes in the rendering.

If you still want to use the same approach, you can select all tables through the "k-table" class and achieve the same thing when adding the "min-width: 100%". Here is a simple Dojo example: Untitled | Kendo UI Dojo (telerik.com)

However, I suggest you use the approach with setting the non-locked columns' width to "auto", as it is more stable than relying on a piece of the Grid's rendering. Here is the same Dojo, but using this approach: Untitled | Kendo UI Dojo (telerik.com)