CODEWITHSUNDEEP
jqueryangularkendo-ui
TDC
TDC

Reputation: 1929

Telerik Kendo UI for JQuery Gantt Configuration for Angular 7 Web Application

I am developing an Angular 7 web application which implements Angular Material controls throughout. I now need to include a Kendo UI for JQuery Gantt Chart. There appears to be two approaches to configuring this:

  1. Copy the js and the styles folders from the Kendo UI for JQuery installation directory into my wwwroot folder and reference them in my index.html file.
  2. npm install --save @progress/kendo-ui and npm install --save @progress/kendo-theme-material.

With approach 1, manually copying the folders into wwwroot the js folder is approximately 77Mb and thestyles` folder approximately 20Mb. I don't want to be deploying these for every release.

With approach 2, npm install... my webpack bundled main.js file is approximately 5.5Mb which is better, but on inspection still contains the entire Kendo UI suite of components when I only need the Gantt and it's dependant components. I also found that when I npm install... the Material theme and include a reference in my angular.json file, the styling on the components appears incorrect. The bars are coloured but almost everything else has no colour and the Gantt chart doesn't resize properly.

My compromise has been to use the npm install... for the Kendo UI components and manually copy the required .css files into my wwwroot folder and reference them in my index.html file.

Can anyone suggest a better approach for a lean, robust way of implementing these Gantt controls please?

Upvotes: 0

Views: 547

Answers (1)

BufferOverflow
BufferOverflow

Reputation: 26

I also had to use the jQuery Gantt chart in a Angular 7 project. I also took the second approach:

npm install --save @progress/kendo-ui

Then I inserted the following statement in my app.module.ts:

import '@Progress/kendo-ui/js/kendo.gantt'

My bundled main.js is 79kb big.

If you need any more information, feel free to respond. Hope this helps :)

Upvotes: 1

Related Questions