Updating dhtmlx-sheduler uisng React

Question

I am using scheduler as follows:

From a dropdown(react-select), I choose a name (whose events I have to show on the scheduler) and it shows correctly,

nextState.showData is an array of data.

window.scheduler.parse(nextState.showData, 'json')

but when I deselect the same name, the scheduler should update and show me no events, but the scheduler does not update(and still shows the event for the name which is now deselected)

Although, on deselect of the name, nextState.showData=[].

Please help. I am using dhtmlx-scheduler with React........

score 0 · Answer 1 · edited Oct 06 '22 at 07:06

This is how, I solved the problem

componentDidUpdate(prevProps) {
    if(this.props.showData.length===0) {
        window.scheduler.clearAll();
        window.scheduler.parse([], 'json')
    }
    else {
        window.scheduler.clearAll();
        window.scheduler.parse(this.props.showData, 'json')
    }
}

Rather than parsing the data in shouldComponentUpdate(), I did in componentDidUpdate() and it solved my problem

Courtesy https://forum.dhtmlx.com/t/gantt-not-re-rendering-after-update/37702/2

score 0 · Answer 2 · answered Mar 30 '20 at 11:30

Yes, the main idea is that you should call scheduler.clearAll() each time before you parse() new data set.

You can remove window.scheduler.parse([], 'json') in the if condition because this line does nothing in the code.

It makes sense to change your code in the next way:

componentDidUpdate(prevProps) {
    window.scheduler.clearAll();
    if(this.props.showData.length) {
        window.scheduler.parse(this.props.showData, 'json')
    }
}

Updating dhtmlx-sheduler uisng React

2 Answers2