NPM Module CSS file failed to load for DHTMLX Gantt

Flow
1

Hi, I’m starting to try Vaadin 14, I’m trying to create an addon that uses the Gantt from DHTMLX (https://docs.dhtmlx.com/gantt/). I have created a polymer project that successfully displays the Gantt, then I’m trying to call that web component from a Vaadin Addon project by adding the js file. The Addon project structure looks like the attached file. The code using the web component is this:

package com.neotropic.vaadin14.component.addon.gantt;

import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.dependency.NpmPackage;

@Tag("gantt-web-component")
@JsModule("./gantt-web-component.js")
@NpmPackage(value = "dhtmlx-gantt", version = "^6.2.6")
/*
 If you wish to include your own JS modules in the add-on jar, add the module
 files to './src/main/resources/META-INF/resources/frontend' and insert an
 annotation @JsModule("./my-module.js") here.
*/
public class PaperSlider extends Component {

    public PaperSlider() {
    }

}

Then I created a demo project with Vaadin 14 - Spring Boot that on the MainView creates a PaperSlider object and add it to its layout.

package com.neotropic.gantt.demo.spring;

import com.neotropic.vaadin14.component.addon.gantt.PaperSlider;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.dependency.NpmPackage;
import com.vaadin.flow.component.notification.Notification;
import org.springframework.beans.factory.annotation.Autowired;

import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.PWA;

@Route
@PWA(name = "Project Base for Vaadin Flow with Spring", shortName = "Project Base")
@NpmPackage(value = "dhtmlx-gantt", version = "^6.2.6")
public class MainView extends VerticalLayout {

    public MainView(@Autowired MessageBean bean) {
//        Button button = new Button("Click me",
//                e -> Notification.show(bean.getMessage()));
//        add(button);
        add(new PaperSlider());
        setSizeFull();
    }

}

If I run the demo it succesfully loads the gantt structure but it can’t load the CSS file that has to come from the DHTMLX-Gantt NPM Module so everything looks like a mess, like dozens of words one over the other. Is my process wrong? or there is something I’m missing in order to succesfully load the CSS file?
17875025.png

2

Hi I know it’s probably late, but i only recently started working with Vaadin. I have a work around for this. I don’t remember where i found it but i did find it after scouring the internet.

If your gantt-web-component.js is a polymer component file like this. You have to add a method _attachDom that attaches the polymer template to the DOM and not the shadow DOM. This way global styles get applied to the polymer element.

gantt-web-component.js

class GanttChart extends PolymerElement {

    static get template() {
        return html`
			.....
		`
	}
	_attachDom(dom) {
    	  this.appendChild(dom);
	}
    static get is() {
          return 'gantt-chart';
    }
    constructor() {
	  super();	  
	}

ah and yes you can add a css file to global css by simply putting the location of the css file. the location should be different in your case.

@Tag("gantt-chart")
@JsModule("./gantt-web-component.js")
@CssImport("./libs/dhtmlxGantt/dhtmlxgantt.css")
public class GanttChart extends PolymerTemplate<GanttViewerModel> {
}