Gantt - Jet App Data Override or Webix View that can be child of HTML element

Webix JS
#1

Hi Webix,

We are trying to implement a Gantt chart in 365 SharePoint. We have no control of the server side provision of data and will be using SharePoint _api to provide JSON that we will then alter the data and feed it to Webix via object/array. It’s notable that we also don’t control the “chrome” on the page, so we want to be able to inject the widget into a predefined div.

When we use the following code, we are able to get the Gantt chart working perfectly, but are not able to specify the destination on the page (eg: #placemat):

webix.ui({
view: “gantt”,
id: “gantt1”,
url: “https://docs.webix.com/gantt-backend/”,
override: new Map([[gantt.services.Backend, MyBackend]]),
});

Alternately, when we use the following code, we are able to specify the destination for the widget, but only the Gantt headers appear. The data doesn’t seem to bind:

let app = new gantt.App({
id: “gantt1”,
url: “https://docs.webix.com/gantt-backend/”,
override: new Map([[gantt.services.Backend, MyBackend]])
});
app.render(document.querySelector("#placemat"));

What is the best way forward? Is override available to Jet apps? Or are Views able to be contained within a specified element? Or is there some other magic available?

Thank you. Looking forward to getting past this and using the product in our environment.

#2

Hello @Rangi,

When we use the following code, we are able to get the Gantt chart working perfectly, but are not able to specify the destination on the page (eg: #placemat): …

In order to specify the target DIV with that kind of config, you need to provide the container property pointing to the ID of target DIV (this also works for all the other Webix widgets).

For example: Code Snippet.

Alternately, when we use the following code, we are able to specify the destination for the widget, but only the Gantt headers appear. The data doesn’t seem to bind: …

It sounds like the override is not properly applying in that case, but that seems a bit weird. Generally speaking, the override should work regardless of the initialization method, something similar to this: Code Snippet.

There is also a chance that the target DIV itself does not have a height set to it, in which case you could see something like this: Code Snippet.

Could you please make sure that the target DIV has correct styles set to it and report back on the results (whether you can see the actual data or not)? Please also note that you can specify the target DIV for the render() method by simply providing the ID string (see the example above).