React Gantt, how to re-render the gantt after getting new data

Gantt
#1

I’m using react to render the gantt. I’m also using redux to pass new data to the gantt.

If I set my initial data to be

this.props.data = [];

it renders fine. But then the user uses a filter to get data from the server. After I get this data, how can I update the gantt with the new data?

Here is my component

class Home extends Component {

    constructor() {
        super();

        this.state = {
            data: [],
            links: []
        };
    }

    render() {
        console.log("props: ");
        console.log(this.props);

          return (
              <div className="fill">
                  <Gantt data={this.props.data} links={this.state.links} />
          </div>
        );
    }
}

Home.PropTypes = {
    data: PropTypes.IsRequired
};

function mapStateToProps(state) {
    return {
        data: state.gantt.ganttData
    };
}

export default connect(mapStateToProps)(Home);

Here is my gantt component

export default class GanttComponent extends Component {

    constructor() {
        super();

        //"Gantt" in getting an instance goes with the capital letter
        this.gcService = null;
        this.gChart = Gantt.getGanttInstance();
        this.plService = new PortfolioService(this.gChart);
    }

    componentDidMount() {
        this.gcService = new GanttChart(this.gChart);
        this.gcService.initGantt(this.ganttContainer, this.props.data, this.props.links);
    }

    componentDidUpdate() {

        //let d = this.gcService.toGanttData(this.props.data);
        //this.gcService.initGantt(this.ganttContainer, d, this.props.links);

        this.gChart.render();
    }

    render() {
        return (
            <div className="fill">
                <GanttToolBar
                    createPortfolio={this.plService.create.bind(this)} />

                <div className="fill" ref={(input) => { this.ganttContainer = input; }} />

                <PortfolioLineUpdateModal />

                <GanttFilter />

            </div>);
    }


}

here is the gantt service doing all the work

class GanttChart {

    constructor(ganttChart) {
        this.gantt = ganttChart;
        this.lightBox = new LightBox(ganttChart);
    }

    initGantt(ganttContainer, _data, _links) {
        this.initCustomTaskTypes();
        this.initColumns();


        this.gantt.init(ganttContainer);

        this.gantt.parse({
            data: _data,
            links: _links
        });
    }

    initCustomTaskTypes() {
        this.gantt.config.types.portfolio = "portfolio";
        this.gantt.config.types.program = "program";
    }

    initColumns() {

        var nameEditor = { type: "text", map_to: "text" };

        var sdateEditor = {
            type: "date", map_to: "start_date", min: new Date(2000, 0, 1),
            max: new Date(2050, 0, 1)
        };

        var edateEditor = {
            type: "date", map_to: "end_date", min: new Date(2000, 0, 1),
            max: new Date(2050, 0, 1)
        };

        var durationEditor = { type: "number", map_to: "duration", min: 0, max: 100 };


        this.gantt.config.columns = [
            { resize: true, name: "text", id: "text", label: "Name", tree: true, width: "350", editor: nameEditor },
            { resize: true, name: "start_date", id: "start_date", label: "Start", align: "center", width: "100", editor: sdateEditor },
            { resize: true, name: "end_date", id: "end_date", label: "End", align: "center", width: "100", editor: edateEditor},
            { resize: true, name: "duration", id: "duration", label: "Duration", align: "center", width: "100", editor: durationEditor }
        ];

        this.gantt.config.grid_resize = true;
    }

    toGanttData(portfolios) {

        for (let i = 0; i < portfolios.length; i++) {
            portfolios[i].id = i;
            portfolios[i].type = this.gantt.config.types.portfolio;
            portfolios[i].unscheduled = true;
            portfolios[i].text = portfolios[i].name;
        }

        return portfolios;
    }
}
/*
 {
            id: ganttId,
            type: gantt.config.types.productline,
            productLineId: data.productLineId,
            sortOrder: data.sortOrder,
            text: data.name,
            unscheduled: true
        };
 */

module.exports = GanttChart;
#2

Hello @iabukhdair !

As I understand it, when a user uses a filter, new data comes from the server that needs to be displayed.
In this case, you must delete the previous data using gantt.clearAll() method. And add new ones using gantt.parse().
https://docs.dhtmlx.com/gantt/api__gantt_clearall.html
https://docs.dhtmlx.com/gantt/api__gantt_parse.html

If I understand you incorrectly, please let me know in more detail what you mean

#3

Sorry I should have rephrased the question.

Where can I update the data in the component lifecycle? Should I make a check in ComponentDidUpdate to see if the old data does not equall the new data and call render accordingly? It seems as though it would be easier to just call clearAll, parse, then render from the filtering component itself rather on the gantt’s root component.

#4

Hi @iabukhdair
Yes, It seems to be easier to just call clearAll() and then parse().
After using parse() you don’t need to call gantt.render().

The ComponentDidUpdate() life cycle method is suitable for this.

#5

Thank you very much!