Change timelineSettings followed by ScrollToDate need to click two times

[Frédéric]

hello, we have a gantt and 4 radiobutton  that allow us to change the timeline dynamicaly.  

We need use ScrollToDate to show today after a change of timeline. 

We have Day, Week, Month, Year.

Exemple, the first time i click on the radiobutton YEAR, that bring always the gantt at the end ( year 2025 ). When i click a second time on the radiobutton YEAR, that bring the gantt at the right date.

The change of the timeline works perfectly. the problem is with the function ScrollToDate, We need to click two times on the radiobutton to be able to be on the right day after the scrolltodate.

here is our code :

 

setScaleConfig(level) {

let today = new Date();

      switch (level) {

          case "day":

            this.topUnitChange('Day')

            this.ganttInstance.timelineSettings.topTier.format = 'MMM dd, yyyy'

            this.bottomUnitChange(null)

            this.unitWidth(100)

            break;

          case "week":

            this.topUnitChange('Week')

            this.bottomUnitChange('Day')

            this.ganttInstance.timelineSettings.bottomTier.format = 'EEE'

            this.unitWidth(50)

            break;

          case "month":

            this.topUnitChange('Month')

            this.bottomUnitChange(null)

            this.unitWidth(100)

            break;

          case "year":

            this.topUnitChange('Year')

            this.bottomUnitChange(null)

            this.unitWidth(500)

            break;

          default:

            break;

      }

        this.ganttInstance.scrollToDate(today);

    }

<div>

          <label className="mr-4"><input type="radio" onClick={() => {this.setScaleConfig("day");}} name="scaleNew" />{i18n.t('Day')}</label>

          <label className="mr-4"><input type="radio" onClick={() => this.setScaleConfig("week")} name="scaleNew" />{i18n.t('Week')}</label>

          <label className="mr-4"><input type="radio" onClick={() => this.setScaleConfig("month")} name="scaleNew" defaultChecked={true} />{i18n.t('Month')}</label>

           <label><input onClick={() => this.setScaleConfig("year")} type="radio" name="scaleNew" />{i18n.t('Year')}</label>

        </div>

 <GanttComponent

              id='Timeline'

              ref={gantt => this.ganttInstance = gantt}

              dataSource={this.props.dataGantt}

              renderBaseline={true}

              allowSorting={true}

              treeColumnIndex={1}

              allowSelection={true}

              allowResizing={true}

              taskFields={this.taskFields}

              height='450px'

              labelSettings={this.labelSettings}

              rowSelecting={this.rowSelecting.bind(this)}

              splitterSettings={this.splitterSettings}

              allowPdfExport={true}

              toolbar={this.toolbarOptions}

              connectorLineWidth={2}

              rowHeight={45}

              collapseAllParentTasks={true}

              editSettings={this.editSettings}

              allowUnscheduledTasks={true}

              connectorLineBackground='#0aecb8'

              toolbarClick={this.toolbarClick.bind(this)}

              >

[Monisha Sivanthilingam]

Hi Frédéric, 

 

Greetings from Syncfusion support. 

 

We were able to replicate the issue you reported. We will validate and provide further details within two business days(July 13, 2021). 

 

We appreciate your patience until then. 

 

Regards, 

Monisha. 

[Monisha Sivanthilingam]

Hi Frédéric, 

 

Thank you for your patience. 

 

We have analyzed your issue and this can be resolved in the sample level itself. The issue you reported is occurring because the scrollToDate method, being a public method, is executed first before the timelineSettings are changed. However, we can avoid this issue by calling the scrollToDate method after a small interval. The following code snippets demonstrate the solution. 

 

Index.js 

 

day() { 

  proxy.ganttInstance.timelineSettings = { 

      timelineViewMode: 'Day' 

 }; 

  setTimeout(function() { 

      proxy.ganttInstance.scrollToDate(today); 

  }, 300); 

} 

week() { 

  proxy.ganttInstance.timelineSettings = { 

      timelineViewMode: 'Week' 

  }; 

  setTimeout(function() { 

      proxy.ganttInstance.scrollToDate(today); 

  }, 300); 

} 

year() { 

  proxy.ganttInstance.timelineSettings = { 

      timelineViewMode: 'Year' 

  }; 

  proxy.ganttInstance.projectStartDate = new Date('03/24/2021'); 

 proxy.ganttInstance.projectEndDate = new Date('03/24/2031'); 

  setTimeout(function() { 

      proxy.ganttInstance.scrollToDate(today); 

  }, 300); 

} 

 

 

We have prepared a sample for your reference. 

 

Please contact us if you require any further assistance. 

 

Regards, 

Monisha.