Using Kendo UI and Jquery UI together

[vinayak]

Hello,

            I have angular 5 application with kendo UI 2018.1.117 used in it. I also want to use Jquery UI library in the same application. I realized that Kendo UI  ships the JQuery library with it and can be accessed in angular code as kendo.jQuery variable. But my jQuery UI library is not able to use this jQuery instance. If I add Jquery explicitly using as described here https://medium.com/@swarnakishore/how-to-include-and-use-jquery-in-angular-cli-project-592e0fe63176 then Jquery UI component works fine. But then I can see that there are two Jquery libraries in my application which breaks the rich text editor feature of kendo UI. Can someone help me how I can I make jQuery UI make use of kendo.jQuery object ? 

[Dimiter Topalov]

Hi Vinayak,

You can use both regular jQuery library instead of the instance shipped with Kendo UI for jQuery in the following manner:

1) Install and include jQuery as described in the mentioned Medium post

2) Install and include Kendo UI for jQuery as described in the following integration article from our documentation:

https://www.telerik.com/kendo-angular-ui/components/framework/kendo-jquery/

3) Make the following imports and assignments where jQuery will be used:

import * as $ from 'jquery';
window['$'] = window['jQuery'] = $;
import '@progress/kendo-ui';

4) Create the Editor using the now global "$" object:

ngAfterViewInit() {

    $(this.editorEl.nativeElement).kendoEditor();
...

I am attaching a runnable sample application that demonstrates the described approach and the Editor is working as expected.

I hope this helps, but if the issue persists, please send us a similar isolated runnable project where the problem can be observed, so we can inspect it further and try to suggest a solution that is best applicable to the specific use case. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[vinayak]

Thanks Svetlin,
                        Issue is resolved now. Real fix was changes in  app.component.ts. Earlier I had put similar changes in the component where I needed jQuery object. I moved that in app.component.ts file and then it worked. I also had to import jquery UI components differently by using jquery ui instead of jquery ui dist npm package.

import 'jquery-ui/ui/widgets/autocomplete';
import 'jquery-ui/ui/widgets/menu';

[vinayak]

Thanks Dimiter