Mixing Kendo for Angular and JQuery

[Craig]

Our current application is an Angular 1.6.x using Kendo for JQuery.  While I would love to be able to migrate all our code in one fell swoop I just have too many directives to do this. 

 

Would it be possible to use both Kendo for JQuery and Kendo for Angular in the same mixed application.  In this way I can migrate my directives/components one at a time and then eventually remove the Kendo for JQuery .

[Bhavika]

Yes, it's possible to integrate both Kendo for jQuery and Kendo for Angular in the same application. You can gradually migrate your directives/components from jQuery to Angular, ensuring compatibility as you transition. This approach allows for a smoother migration process, enabling you to eventually phase out Kendo for jQuery entirely.

I hope this helps.

Regards,
Bhavika Chauhan

 

[Dimiter Topalov]

Hello Craig,

You can use both the Kendo UI for Angular components in the Angular application as described in the following section of our documentation:

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

You can also install and reference the jQuery library as described in this post:

https://medium.com/@swarnakishore/how-to-include-and-use-jquery-in-angular-cli-project-592e0fe63176

The most notable prerequisite for using both Kendo UI for jQuery and Kendo UI for Angular in the same application is using one of the SASS themes (Kendo Theme Default or Kendo Theme Bootstrap) to style all widgets and components uniformly, and NOT link any other Kendo UI for jQuery theme as using both may (and probably will) have undesired side effects as both the old and new themes target the same selectors and one overwriting the other can lead to an undesired layout.

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Craig]

Thanks that helps and I am using the Sass themes. 

Though my dilemma was trying to convert many dozens of 1.x directives.  So my hope was that I could use a nw Angular 2.x bootstrap core and then use ngMigrate to keep the majority of the code base & Html the same and converting over 1 by 1 to Angular 2.x and the new Kendo for Angular.

 

[Dimiter Topalov]

Hello Craig,

You can convert/upgrade the application by gradually replacing AngularJS (1.x) directives with Angular 5+ components (where there are Kendo UI for Angular components available for the Kendo UI for jQuery counterparts, e.g. Inputs, DropDowns, Grid, Charts, etc.).

To continue using jQuery widgets that do not have a Kendo UI for Angular counterpart (e.g. Editor, TreeList, Scheduler), you can use the approach, described in the integration article, linked in my previous post.

You can use the Kendo Theme Bootstrap to style both Kendo UI for jQuery widgets and Kendo UI for Angular components. Further details about using the SASS themes are available in the following documentation sections:

https://www.telerik.com/kendo-angular-ui-develop/components/styling/theme-bootstrap/ (Kendo UI for Angular)

https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes (Kendo UI for jQuery)

I am not sure whether I fully understand the following part:

"...So my hope was that I could use a nw Angular 2.x bootstrap core..."

If you are referring to the option to use the Kendo Theme Boostrap SASS theme to uniformly style both Kendo UI for jQuery widgets and Kendo UI for Angular components, I confirm that you can do so as discussed. If I am missing something, please elaborate a bit further on the approach/functionality you are after so I can try providing further information that is more relevant to the specific question. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[Bhavika]

Hello Team, 

If you’re considering using Kendo UI with both Angular and jQuery in your project, you might be wondering about the best approach to integrate these technologies effectively. Here’s a guide to help you navigate this integration:

1. Understand the Basics:

   • Kendo UI for Angular is a suite of UI components specifically designed to work seamlessly with Angular. It provides Angular-specific bindings and optimizations.
   • Kendo UI for jQuery is the original suite that works with jQuery and is designed to be used in traditional web development.

2. Why Mix Them?: Mixing Kendo UI for Angular and jQuery might be necessary if you are transitioning an existing jQuery-based application to Angular or need specific Kendo widgets that are only available in the jQuery version.

3. Integration Strategy:

   • Angular Application: Start by integrating Kendo UI for Angular into your application. This ensures that your Angular components and services can leverage the Kendo UI features optimized for Angular.
   • jQuery Widgets: For Kendo widgets that aren’t available in the Angular suite, you can integrate Kendo UI for jQuery. This will require you to handle jQuery lifecycle events and manage DOM manipulations manually.

4. Implementing jQuery Widgets:

   • Load jQuery: Make sure jQuery is included in your project. You can add it via a CDN or npm.
   • Initialize Widgets: Use Angular’s lifecycle hooks (like ngAfterViewInit) to initialize and manage jQuery widgets. This helps ensure that the widgets are properly instantiated after Angular has rendered the component.

5. Potential Issues:

   • Conflict Management: Be aware of potential conflicts between Angular and jQuery, as both can manipulate the DOM. Ensure that jQuery widgets are isolated to avoid interference with Angular components.
   • Performance: Mixing Angular and jQuery might impact performance. Test thoroughly to ensure that the integration doesn’t introduce performance bottlenecks.

By carefully managing the integration and following best practices, you can effectively use Kendo UI for both Angular and jQuery in your project. This approach allows you to leverage the strengths of both frameworks and provide a richer user experience.