Hi
We are currently trying to integrate SpreadJS into a Vaadin Flow trying to setup a web component which uses the javascript library of SpreadJS. Basically SpreadJS is instantiated as described in https://www.grapecity.com/spreadjs/demos/quickstart. So far, the spreadsheet shows up and seems to work. Unfortuantely, parts of the context menu do not work (you cannot select anything and the layout is not correct), and, which is much stranger, any entered input is shown in reverse order. Using the involved components with plain html/javascript works normally.
Our setup looks as follows:
@Tag("my-spread-js")
@JsModule("./my-spread-js-element.js")
@NpmPackage(value="@grapecity/spread-sheets", version = "14.0.7")
@CssImport("./gc.spread.sheets.excel2013white.cs"")
public class SpreadJsComponent extends Component {
...
}
my-spread-js-element.js contains the PolymerElement instantiating SpreadJS in the ready() method. The JsModule is located in /frontend. my-spread-js-element.js is importing the SpreadJS library using import gc from "@grapecity/spread-sheets";
The css file gc.spread.sheets.excel2013white.css was copied from the source and also located under /frontend. I also tried to copy SpreadJS JavaScript-files to the frontend folder, which did not change anything.
- What may be the problem? Looks somehow like a missing stylesheet for the context menu. But there are no error messages regarding missing style sheets in the browser. There is also a message indicating a missing style sheet in the development tools of he browser.
- What may cause the reverse ordering when entering values in the spreadsheet?
- Are there alternative ways of integrating SpreadJS into a Vaadin flow application apart from web components, so that the frontend can interact with the backend (events and properties exchange)?
Regards
Silvio