How do I isolate the Kendo UI jQuery within a div?

1 Answer 134 Views

Styling

Esref asked on 31 May 2021, 05:08 PM | edited on 01 Jun 2021, 08:35 AM

I have a product named "a6763". It is a cloud based product. Customers use it by placing CDN-served assets into their HTML code. My product should work in an div only. It is just like Google Map actually. Google Map never affects rest of document. I plan to use Kendo UI jQuery for windows, dropdowns, tabs etc. But Kendo UI affects rest of document.

Here is how my customers add my assets:

1) Embed the a6763's code.

<head>
<script src="https:/a6763.com/embed/kendo.js"></script><link href="https:/a6763.com/embed/kendo.bootstrap.min.css" rel="stylesheet" />
</head>

2) Place my embed code:

<body>
   <!-- there is no kendo here -->
   <div id="a6763">
        <!-- my kendo UI components are here -->
        <div id="kendogrid"></div>
   </div>
   <!-- there is no kendo here -->
</body>

The problem is that; the Kendo's Javascript codes and CSS styles affect all the document. For example, if I choose Material theme in CDN assets, then all the page turns into Material. But I want to keep this theme in the above div. Same for Javascript codes: Kendo should not process outside of the above div.

UPDATE 1: To make it more clear: I need something like this for Kendo UI jQuery: https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes

UPDATE 2: In other words, I need give Kendo a new name just like this: https://api.jquery.com/jquery.noconflict/ So that, even the document already added a different version of Kendo into document, everything is ok because my Kendo is different. No conflict.

Esref Atak

Esref

commented on 03 Jun 2021, 08:27 AM

Hi Telerik & Progress Team,

Help please...
This problem is critical for my ideals.

1 Answer, 1 is accepted

answered on 03 Jun 2021, 10:31 AM

Hi Esref,

Could you please send us more information about the issues that appear on your side? It is not expected the Kendo styles and scripts to affect the rest of the page. For example here you will find a Dojo where the SASS Material theme is used. As you will see, the rendering of the standard HTML table is not affected by the loaded Kendo scripts and styles.

If it is suitable for your scenario you could also customize the Kendo themes as described below:

- https://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling#customizing-themes

- https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes#customizing-the-themes

Regards,
Neli
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Esref

commented on 03 Jun 2021, 11:11 AM | edited

Hi Neil,

Thanks for your help. After your reply, i researched the core problem. There are two core problems:

1) Apperance problems were actually related with Bootstrap. https://demos.telerik.com/kendo-ui/bootstrap If I add the Bootstrap to <head>, rest of page is affected. I think it's not related with Kendo, right?

2) What if I add Kendo scripts into a document with already has a Kendo JS? Will I face a Kendo-version conflict?

Thanks,
Esref Atak

Neli

commented on 08 Jun 2021, 08:44 AM

Hi Esref,

1) Please note that the bootstrap stylesheet is already added to the demo. Of curse, you could replace the used version of the Bootstrap in the demo and this will affect the page. However, as you noted this is not Kendo-related.

2) I would not recommend loading multiple Kendo scripts on the same page. You can have only one reference of the Kendo UI scripts loaded on your page.

Note, that there are known issues when the jQuery script is included more than once on the page.

Esref

commented on 10 Jun 2021, 04:46 PM | edited

Hi Neli,

Unfortunatelly, i have to remove the Kendo from our stack forever!

Because i have to change the name of jQuery from "$" to "$pb" and I need Kendo to use "$pb" as jQuery. That's why i have to remove.

Second reason is i need Kendo to give same possibility like jQuery: https://api.jquery.com/jquery.noconflict/ AFAIK, there is no similar options in Kendo.

Still thanks,

Esref Atak
ProcessBell
http://www.processbell.com

Neli

commented on 15 Jun 2021, 01:13 PM

Hi Esref,

Note that since Kendo extends jQuery, it needs the global variable named "jQuery" to really refer to jQuery. You could take a look at the Dojo example linked here. In the example, the $ variable is assigned to a different value than jQuery. Then, 'jQuery' is used instead of '$'. Keep in mind, that in some edge cases the Kendo framework also depends on globally available $ variable.

Regarding using of noConflict() method I would suggest you to take a look at the Forum thread linked below where there is such an example:

-https://www.telerik.com/forums/force-jquery-noconflict-on-generated-code#4399856

Regards,
Neli