CSS related changes are breaking in kendo-angular-grid after upgrading from 7.2.4 to 18.5.0

[Parth]

i have upgraded my app from angular 13 to 19 , in doing so i have also updated the kendo-ui components from 7 to 18 , but many CSS related changes are not intact and same espesically in @progress/kendo-angular-grid, how to fix these breaking changes?

[Martin Bechev]

Hi Parth,

Staying up to date with the recent Angular and Kendo versions is recommended as its allows you to benefit from the most recent bug fixes and features. But when upgrading Kendo UI components across multiple major versions, it's common to encounter CSS and styling issues due to breaking changes. Here are some steps to address these:

1. Review Changelogs:

   • Check the Kendo Angular UI Changelog for any CSS or component structure changes. This will help you understand what has changed and how it might affect your application.
   • • https://www.telerik.com/kendo-angular-ui-develop/components/changelogs/kendo-angular-ui/
       

2. Inspect DOM Changes:

   • Use browser developer tools to inspect the DOM of the Kendo Grid. Compare it with the previous version to identify changes in class names or structure that may affect your styles.
     

3. Update CSS Selectors:

   • Major updates often include changes to CSS class names and DOM structure. Update your custom CSS to match the new class names and structure. For example, .k-state-selected might have changed to .k-selected.
     

4. Refer to ThemeBuilder:

   • Consider using the ThemeBuilder to create custom themes that align with your application's design. 
     https://www.telerik.com/themebuilder
     

5. Manual Adjustments:

   • Some manual adjustments may be necessary. Review your custom styles and update them to match the new Kendo UI component styles.

If specific issues persist, please provide more details about the CSS problems you're facing with the Kendo Grid, and I can guide you further.

Regards,
Martin Bechev
Progress Telerik