usage of angular component (standalone) built with Kendo Angular within Kendo Ui Jquery main app - styling issue

[Vedad]

Hi,

I am not sure if question belongs here, but since it is related to Kendo UI Angular and JQuery, I guess it might. :)

I have "old" app built using AngularJS, and Kendo UI for Jquery. 

Recently we started replacing old modules with new ones built with latest Angular, and there we use Kendo UI Angular. To replace certain functionality I built standalone component in Angular where I use Kendo UI grid, cards, tabstrip and window. When I import my angular component files into old app, it seems that styling and themes from new component, mess up with styling of widgets of old app. 

My question is following: Are styling (css) sheets from Jquery and Angular widgets the same, meaning, can I simply opt for one or another styling and count that all widgets will then be consistent? Since many jquery widgets rely on css selectors to achieve different custom functions, it is important to know whether I can rely on this.

Meaning, can I use css theme (assuming that both use default now) from Angular and count that widgets or functionalities based on css in old app won't be destroyed? 

If this is not a case, could you propose the way how to combine these two in usable way?

Thank you very much.

Regards,

Vedad

[Martin Bechev]

Hi Vedad,

I can confirm that the Kendo themes repo (and all flavors like Default, Material, and Bootstrap) is common for all Kendo flavors like Kendo UI for Angular, React, Vue, and Telerik UI for Blazor. The repo can be checked out here:

https://github.com/telerik/kendo-themes

As the technologies are different, there might be elements and classes that are missing when comparing specific Kendo UI for jQuery widget and Kendo UI for Angular component. Thus based on the level of customization and which components are exactly modified, some of the currently used CSS selectors might not work for the Kendo UI for Angular components and the developer needs to inspect the necessary component and check which is the correct CSS selector. Alternatively, you can use the ThemeBuilder to create your own version of the theme:

https://www.telerik.com/themebuilder

Please keep in mind that style customization is considered a developer effort, but if you are stuck somewhere we are ready to help.

Regards,
Martin
Progress Telerik