Rank 1
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
1 Answer, 1 is accepted
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/.
Rank 1
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
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.
Rank 1
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
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
Help please...
This problem is critical for my ideals.