virtual DOM integration (React, Vue.js, Angular)

Gantt
#1

Most modern front-end frameworks are taking the virtual DOM approach (Angular, React, Vue), are there any examples of the recommended approach to integrate dhtmlxGantt into existing applications that use these frameworks?

#2

Hi,
It can be done by wrapping dhtmlxGantt (or other library that you need) inside a custom component of the framework. Please check our latest tutorial/demo on Angular framework dhtmlx.com/blog/dhtmlx-gantt-ch … framework/ - title and intro specifies Angular v2, but it’s the same for a newly released v4.0 and most probably to upcoming versions as well, we’ll update tutorial shortly.

Here is a description of general approach for react github.com/ryanflorence/react-t … om-libs.md

#3

In react you can import the library and use the gantt as global variable.

import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.js';
import 'dhtmlx-gantt/codebase/locale/locale_pt.js';

After that you can declare the Gantt as a global variable.

const gantt = window.gantt;

class GanttDetail extends Component {
  constructor(props){
    super(props)
  }

  componentDidMount() {
    this.initGantt();
  }

  initGantt() {
    // Gantt configuration
    setup(gantt);
    // Avoid insert two link for one task
    avoidTwoLinks(gantt);
    // Auto scheduling - Refresh progress
    autoSchedule(gantt);
    // Move task if predecessor change
    pushTask(gantt);
    gantt.init('gantt_here');
    gantt.load(`/data/1`, `json`);
    // Constructor a data Processor
    const dp = new gantt.dataProcessor(`/data/1`);
    dp.init(gantt);
    dp.setTransactionMode(`REST`);
    // Update link after server response
    updateAfterResponse(dp, gantt)
    dp.enableDebug(true);

  }

  render(){
    return (
      <div id='gantt_here' style={{ width: '100vw', height: '100vh'}} >
      </div>
    );
  }

}


export default GanttDetail;

I am initialized the Gantt on the component did mount()