bottomTier and topTier cause day alignment issue

[Emrah Asma]

Hello,

There is my settings in the below. I am using it like this to prevent gant alignment issue. 

private timelineSettings: TimelineSettingsModel = {
    weekStartDay: this.props.weekStartDay,
    timelineUnitSize: 60,
    topTier: {
        format: 'MMM dd, yyyy',
        unit: 'Week',
        count: 52,
    },
    bottomTier: {
        unit: 'Day',
        format: 'EEE, dd',
        count: 1,
    },
};

When I use this settings I can not changing the time by dragging the task, it only change date part:

another scenario I tried: 

private timelineSettings: TimelineSettingsModel = {
    weekStartDay: this.props.weekStartDay,
    timelineUnitSize: 60,
    topTier: {
        format: 'MMM dd, yyyy',
        unit: 'Day',
        count: 7,
    },
    bottomTier: {
        unit: 'Hour',
        format: 'EEE, dd',
        count: 24,
    },
};

It allows me to change time by dragging but it display the task in the wrong day:

How can I fix this? I want to change task's date and time by dragging and also I want to see data in the correct day in the view side. Thanks.

[Sridharan Jayabalan]

Hi Emrah,

 

Greetings from Syncfusion.

 

Query 1 - When I use this settings I can not changing the time by dragging the task, it only change date part:

Query 2 - It allows me to change time by dragging but it display the task in the wrong day:

 

For both of your queries, we have prepared a sample and tried to replicate the reported issue on our end. However, we were unable to reproduce it. We used your timelineSettings, dates are displayed correctly in the tooltip while taskbar drag action, and observed that the record is placed at the correct dates after the drop action.

 

To proceed further with our investigation, please share the following details:

 

• Complete Gantt chart configuration (including properties, templates, etc.)
• Time zone information of your application.
• The data source you're using.
• Any customizations done in the beforeTooltipRender, actionBegin, or actionComplete events (if applicable, please share those code snippets)
• A video demo showing the issue

 

Alternatively, you may try to reproduce the issue using the attached sample, or share a runnable sample where the issue is occurring for further validation.

 

Sample - https://stackblitz.com/edit/react-hacnm3qi-dcnejwe1?file=index.js,data.js

 Video - https://www.syncfusion.com/downloads/support/directtrac/general/ze/dragTimeline

 

 

Regards,

Sridharan

[Emrah Asma]

I am using the Syncfusion Gantt component in my React project. The timeline does not update or render correctly when data is updated after clicking an "Apply" button. Although the Gantt chart is initially loaded, when the data is updated via the button click, the timeline doesn't get redrawn, and it shows an incorrect view. However, when I manually interact with the "next" and "previous" timespan buttons, the timeline adjusts itself as expected. This behavior suggests that the timeline is not being properly refreshed when the new data is set.

Additionally, the incoming data is in UTC (UTC0 timezone), and to ensure that users in different time zones view the same values, I am adding 10 hours to the incoming data. Despite this, the issue persists.

Steps to Reproduce:

1. Initially, the Gantt chart is rendered with no data or incomplete data.

2. After clicking the "Apply" button, new data is fetched and assigned to the Gantt chart.

3. The timeline doesn’t update, and the data is not rendered correctly in the chart.

4. Clicking the "next" or "previous" timespan buttons updates the timeline and data correctly.

Expected Behavior:

When the data is updated (e.g., via a button click), the timeline should automatically refresh and display the updated data without needing to manually interact with the timespan buttons.

---

Additional Details:

The data I receive from the API is in UTC (UTC0 timezone). To account for time zone differences and ensure users in different time zones view the same data, I add 10 hours to the incoming UTC data before passing it to the Gantt component. This adjustment is done to synchronize the display across various time zones.

Despite the time zone adjustment, the timeline is not updated correctly when the data is dynamically changed.

Attempted Solutions:

1. Using timelineModule.refreshTimeline() and ganttChartModule.renderTimelineContainer(): I tried calling these methods directly after updating the data, but they didn’t solve the issue. Here’s the code I used:

   tsx
   CopyEdit
   handleApplyClick = async () => {
     const newData = await fetchData();  // Fetching the new data from an API or another source
   
     this.setState({ ganttData: newData }, () => {
       // Attempting to refresh the timeline
       if (this.ganttInstance) {
         this.ganttInstance.timelineModule.refreshTimeline();
         this.ganttInstance.ganttChartModule.renderTimelineContainer();
       }
     });
   };
   

   However, these methods did not have the desired effect.

2. Using setTimeout: I added a setTimeout to ensure that the DOM is ready before calling the refreshTimeline() method. This also didn’t fix the issue.

   
   dataBound={() => {
     setTimeout(() => {
       if (this.ganttInstance) {
         this.ganttInstance.timelineModule.refreshTimeline();
         this.ganttInstance.ganttChartModule.renderTimelineContainer();
       }
     }, 100);  // Adding delay to allow for DOM readiness
   }}

Additional Notes:

• I have tried to call the refreshTimeline() and renderTimelineContainer() methods, but they do not trigger the expected behavior.

• The issue only occurs when the data is updated dynamically (i.e., after clicking the "Apply" button).

• The timeline updates correctly only when I manually interact with the "next" and "previous" timespan buttons.

• The incoming data is in UTC (UTC0 timezone), and I am adding 10 hours to it before passing it to the Gantt component to synchronize the time zones.

---

Request for Support:

I would appreciate assistance in identifying why the timeline is not updating when the data is dynamically updated and how I can trigger a proper re-render or refresh of the timeline when the data changes. Any help in resolving this issue would be greatly appreciated.

[Emrah Asma]

Here are the codes we use below:

const model = [];
for (let i = 0; i < theData.length; i++) {
    const res = theData[i];
    if (res.order_id === null || res.order_code === null) {
        continue;
    }

    model.push({
        ...res,
        EndDate: this.moment
            .utc(res.planned_end_date)
            .add(this.server_gmt, 'hours')
            .format('YYYY-MM-DD HH:mm:ss'),
        StartDate: this.moment
            .utc(res.planned_start_date)
            .add(this.server_gmt, 'hours')
            .format('YYYY-MM-DD HH:mm:ss'),
        TaskID: res.order_id,
        TaskName: res.order_code + ' - ' + res.description,
        isChecked: false,
        isEffected: res.isEffected,
        subtasks: res.subtasks.map((sub: any) => {
            const startDate = new Date(sub.scheduled_start_date);
            const endDate = new Date(sub.scheduled_end_date);

            let difference = endDate.getTime() - startDate.getTime();

            let duration = difference / (1000 * 3600);
            return {
                ...sub,
                isRejected: res.isRejected,
                Duration: duration ? duration : sub.duration,
                Progress: sub?.percentage,
                Segments: sub?.Segments ? sub?.Segments : [],
                isDone: res?.isDone,
                StartDate:
                    sub?.scheduledStartDate !== null
                        ? this.moment
                            .utc(sub?.scheduled_start_date)
                            .add(this.server_gmt, 'hours')
                            .format('YYYY-MM-DD HH:mm:ss')
                        : sub?.plannedStartDate !== null
                            ? this.moment
                                .utc(sub?.plannedStartDate)
                                .add(this.server_gmt, 'hours')
                                .format('YYYY-MM-DD HH:mm:ss')
                            : '',
                EndDate:
                    sub?.scheduledEndDate !== null
                        ? this.moment
                            .utc(sub?.scheduledEndDate)
                            .add(this.server_gmt, 'hours')
                            .format('YYYY-MM-DD HH:mm:ss')
                        : sub?.plannedEndDate !== null
                            ? this.moment
                                .utc(sub?.plannedEndDate)
                                .add(this.server_gmt, 'hours')
                                .format('YYYY-MM-DD HH:mm:ss')
                            : '',
                TaskID: sub?.operationId,
                Work: Number(sub?.estHours),
                TaskName:
                    sub?.operationSequence + ' - ' + sub?.operationDescription,
                info: sub?.longDescription,
                Predecessor: sub?.dependencyCode,
                long_description: `<${sub?.tradeCode}> ${res.description}`,
                asset_code: sub?.assetCode,
                type_code: sub?.typeCode,
                priority_code: sub?.priority,
                isChecked: false,
                isEffected: res.isEffected,
            };
        }),
    });
}
loadingShow(false);

if (this.isMountedCS) {
    this.gantObj.dataSource = model;

    this.gantObj?.dataBind();
}

[Emrah Asma]

<GanttComponent
    id='cloud-scheduler-gantt'
    dataSource={this.state.GantData}
    ref={(gant: GanttComponent) => (this.gantObj = gant)}
    expanded={this.expanded.bind(this)}
    collapsed={this.collapsed.bind(this)}
    dateFormat='dd/MM/yyyy HH:mm'
    durationUnit='Hour'
    actionComplete={this.actionCompletedElement.bind(this)}
    actionBegin={this.actionBegin.bind(this)}
    dataBound={this.dataBound.bind(this)}
    treeColumnIndex={5}
    contextMenuItems={this.contextMenuItems}
    contextMenuOpen={this.contextMenuOpen.bind(this)}
    rowHeight={32}
    contextMenuClick={this.contextMenuClick.bind(this)}
    showColumnMenu={true}
    collapseAllParentTasks={true}
    taskType='FixedWork'
    width={'100%'}
    taskbarEditing={this.taskbarEditing.bind(this)}
    enableTimelineVirtualization={true}
    allowFiltering={true}
    selectionSettings={{
        type: 'Multiple',
        mode: 'Row',
        enableToggle: true,
    }}
    allowSorting={true}
    connectorLineBackground='red'
    allowResizing={true}
    workWeek={[
        'Monday',
        'Tuesday',
        'Wednesday',
        'Thursday',
        'Friday',
        'Saturday',
        'Sunday',
    ]}
    toolbarClick={this.toolbarClick.bind(this)}
    editDialogFields={this.editDialogFields}
    projectStartDate={this.state.projectStartDate}
    projectEndDate={this.state.projectEndDate}
    allowRowDragAndDrop={false}
    queryCellInfo={this.gantCellQuery.bind(this)}
    rowSelected={this.rowSelected}
    rowDeselected={this.rowDeselected}
    taskFields={{
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        dependency: 'Predecessor',
        child: 'subtasks',
        notes: 'info',
        resourceInfo: 'Resources',
        segments: 'Segments',
        work: 'Work',
    }}
    timelineSettings={this.timelineSettings}
    labelSettings={
        this.state.displayGantInformation
            ? this.labelSettings
            : undefined
    }
    editSettings={
        this.state.current_plan_isLocked
            ? undefined
            : this.editSettings
    }
    height={
        this.state.status
            ? 'calc(-130px + 70vh)'
            : 'calc(-130px + 95vh)'
    }
    gridLines={'Both'}
    toolbar={
        this.props.isSuperVisor ? this.toolbarAdmin : toolbar
    }
    resourceFields={this.resourceFields}
    resources={this.state.resourceData}
    enableContextMenu={true}
    filterSettings={{type: 'Menu'}}
    allowExcelExport={true}
    allowPdfExport={true}
    allowReordering={true}
    highlightWeekends={true}
    enableVirtualization={false}
    splitterSettings={{
        columnIndex: 2,
        position: '60%',
    }}
    dayWorkingTime={this.state.dayWorkingTime}
    //timezone={Intl.DateTimeFormat().resolvedOptions().timeZone}

>

[Sridharan Jayabalan]

Emrah,

 

Thanks for sharing code snippets.

 

We have prepared a sample using your code and tested it in both UTC and London time zones. However, we were unable to replicate the issue where the timeline does not refresh when dynamically adding a data source in the absence of projectStartDate and projectEndDate.

 

We suspect the issue is caused by a mismatch between your projectStartDate/projectEndDate and the actual dates in your data source. (Refer vide demo)

 

Example:

If your data source contains records with dates in 2025, but your projectStartDate and projectEndDate are set to dates in 2020, the Gantt chart will not display any records, as they fall outside the defined range.

 

Please ensure that the projectStartDate and projectEndDate you’ve set cover the full date range of your data source.

 

If you are still facing the same issue, kindly share the following details to proceed further:

 

• Your timezone.

• Your data source in JSON format.

• The values of the properties and events used in your GanttComponent (e.g., actionBegin, timelineSettings, etc.)

• An issue replicating video demo.

 

Alternatively, you can try to replicate the issue using our shared sample, or provide a runnable sample for further validation.

 

Client Sample - Rnoaj3nf (forked) - StackBlitz

Server Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerPrevTimespan

Video demo - https://www.syncfusion.com/downloads/support/directtrac/general/ze/prevTimespan

 

 

Regards,

Sridharan