How to use gantt in react app

Webix JS
1

how to use gantt in react app @Dzmitry

2

Hello webix_B_123,

The common requirements for complex widgets to work is:

the webix variable should be available in the global context (it should be available before the complex widget’s sources are included or imported).

The Webix libriary/complex widgets can be included either:

  1. via the script tag on some page (e.g., index.html ):
<script src="../node_modules/@xbs/webix-pro/webix.js" type="text/javascript"></script>

or

  1. via importing the required dependencies. The second approach requires for the webix variable to be defined in the global scope.
    For example:
import * as webix from "@xbs/webix-pro";
window.webix = webix;

Here you can find instuctions about React with Webix: GitHub - webix-hub/react-demo-complex: This demo shows how to init Webix complex widgets in React components. .

3

THanks for your reply, no issue with webix global variable, issue with gantt component, I’m not able to use gantt even after importing gantt js file from nodemodules

4

THis is the error I have got, >> cannot read properties of undefined (reading ‘$protoWait’).

Not able to use any of your webix complex widgets in our react app, I did find any docs to interate these complez widgets like gantt, please help @intregal

5

Hello webix_B_123

I tries to reproduce your issue using Gantt component in react app but everuthing works fine.
Here is the code of my gantt component:

import React, { Component } from "react";

import "@xbs/webix-pro/webix.css";
import "@xbs/gantt/codebase/gantt.css";

class GanttView extends Component {
  constructor(props) {
    super(props);
    this.uiContainer = React.createRef();
  }

  render() {
    return <div ref={this.uiContainer} style={{ height: "100%" }}></div>;
  }

  componentDidMount() {
    const container = this.uiContainer.current;

    webix.ready(() => {
      require("@xbs/gantt");

      this.ui = webix.ui({
        view: "gantt",
        url: "https://docs.webix.com/gantt-backend",
        container,
      });
    });

    this.resObserver = new ResizeObserver(() => {
      if (this.ui) this.ui.adjust();
    });
    this.resObserver.observe(container);
  }

  componentWillUnmount() {
    if (this.ui) {
      this.ui.destructor();
      this.ui = null;
    }
    this.resObserver.disconnect();
  }

  shouldComponentUpdate() {
    // as component is not linked to the in-app data model, there is no need in updates
    return false;
  }
}

export default GanttView;

If you still have the issue, could you clarify and give this information:

  1. webix and gantt versions
    Also for a more readable error log, it is better to use the debug version during development.
  2. the version of react
  3. how do you import gantt and webix?
    To use gantt component you should import it the same way: react-demo-complex/src/FilesView.js at main · webix-hub/react-demo-complex · GitHub
    Also additional information about importing complex widgets you can read here.
  4. did you apply any customizations to Gantt?
6

Thank you very much for your response. I’ve been eagerly waiting to integrate Webix Gantt into my React application.

I’m using the latest versions of Webix and Gantt — specifically version 11.0.3.

I haven’t applied any customizations. I’m importing Gantt directly using:

import "@xbs/gantt/codebase/gantt.js";

My project is based on Create React App with TypeScript, and I’m using React 19 with functional components only — no class components. Could you please provide an example that uses functional components?

Additionally, I’ve encountered the same error not just with Gantt, but also when trying to integrate other complex widgets like the Query Builder.

Also, I had a quick question regarding Gantt — is it possible to implement zoom in / zoom out functionality in Webix Gantt?

Lastly, please let me know if any changes are required in configuration files such as webconfig.js, webpack.config.js, or tsconfig.json.

I’d really appreciate your help in resolving this issue.

8

Hello webix_B_123

Here is the code with React functional component:

import React, { useEffect, useRef } from "react";

import "@xbs/webix-pro/webix.css";
import "@xbs/gantt/codebase/gantt.css";

function GanttView(props) {
  const uiGantt = useRef(null);
  const uiContainer = useRef(null);

  useEffect(() => {
    const resObserver = new ResizeObserver(() => {
      if (uiGantt.current) uiGantt.current.adjust();
    });

    const container = uiContainer.current;

    webix.ready(() => {
      require("@xbs/gantt");

      uiGantt.current = webix.ui({
        view: "gantt",
        url: "https://docs.webix.com/gantt-backend",
        container,
      });
    });

    resObserver.observe(container);

    return () => {
      if (uiGantt.current) {
        uiGantt.current.destructor();
        uiGantt.current = null;
      }
      resObserver.disconnect();
    };
  }, []);

  return <div ref={uiContainer} style={{ height: "100%" }}></div>;
}

export default GanttView;

Try to apply the code provided.

As for zoom in / zoom out Webix Gantt has zoom functionality for scales.
Please check the example: Code Snippet

9

Thanks a lot @Natalia_Shilova for your quick reply, I really appriciate, let me try and come back.

10

Gone through this sinppet, is there ZOOM IN and ZOOM OUT options using mouse wheel?

11

Webix Gantt does not support zooming in and out using the mouse wheel. The available zoom functionality is limited to predefined scale options, which allow you to adjust the time scale through specific settings.

12

Thanks we will use that then.