Bug in Syncfusion Gantt Chart with Selection and Load on Demand

[Loai Zewail]

Hello Syncfusion team ,

I noticed a bug in the Syncfusion Gantt Chart when using Load on Demand with Selection enabled. 

Issue Description Specifically: 

•  When I click on a task in the left side (tree grid), the right side (timeline) scrolls to the beginning, which is incorrect behavior.
• When I click on the right side (timeline), it scrolls to the selected task as expected.

Steps to Reproduce:

• Open the example on Syncfusion's demo site: https://ej2.syncfusion.com/react/demos/#/fluent2/gantt/load-on-demand  
• Zoom into the right side (timeline) to make scrolling more noticeable. 
• Click on a task in the left side (tree grid) and observe that the timeline scrolls to the beginning (unexpected behavior).
• Click on a task in the right side (timeline) and observe that the timeline scrolls to the correct task (expected behavior). 

Observations:

•  This issue only occurs when Selection is enabled.
•  This issue occurs when using load on demand for big data set.
•  Disabling selection prevents this behavior.
•  The same issue occurs in Syncfusion's official example linked above, confirming it's not specific to my implementation. 

Use Case: 

I want to use Load on Demand and enable Selection while ensuring that the timeline behaves correctly when selecting tasks from the left side (tree grid). 

Request: 

Is there a fix or workaround for this issue? If not, can this be addressed in a future update? This behavior disrupts the user experience when working with large datasets and hierarchical data. 

Screenshots:

- Example when I click on left side :



- ​Example when I click on right side :


My Implementation Snippets:
```javascript

    // calling data manager  

             

    useEffect(() => {

        if (projectId) {

            const dataManager = new DataManager({

                url: `${process.env.NEXT_PUBLIC_API_BASE_URL}api/Project/GetTreeData?projectId=${projectId}`,

                adaptor: new UrlAdaptor(),

                headers: [{ 'Authorization': `Bearer ${token}` }]

            });

            setDataManager(dataManager);

        }

    }, [projectId]);

// rendering the component   <GanttComponent

                            ref={ganttInstance}

                            dataSource={dataManager}

                            projectStartDate={projectStartDate}

                            projectEndDate={projectEndDate}

                            treeColumnIndex={2}

                            taskFields={taskSettings}

                            height={"98%"}

                            gridLines='Vertical'

                            renderBaseline={true}

                            baselineColor='#CDD1D7'

                            tooltipSettings={{

                                showTooltip: true,

                                taskbar: (e: any) => taskBarTooltip(e),

                                baseline: (e: any) => taskBarTooltip(e)

                            }}

                            labelSettings={{

                                taskLabel: (e: any) => taskBarLabel(e)

                            }}

                            toolbar={toolbar}

                            allowFiltering={true}

                            timelineSettings={{

                                timelineUnitSize: 50

                            }}

                            queryTaskbarInfo={queryTaskbarInfo}

                            connectorLineBackground='#FF6633'

                            taskbarTemplate={(e: any) => taskbarTemplate(e)}

                            taskbarHeight={17}

                            allowResizing={true}

                            zoomingLevels={customZoomingLevels}

                            recordDoubleClick={(e: any) => handleTaskClick(e)}

                            toolbarClick={toolbarClick}

                            enableCriticalPath={enableCriticalPath}

                            allowParentDependency={showDependency}

                            autoCalculateDateScheduling={false}

                            allowSelection={true}

                            actionBegin={handleScroll}

                            enableVirtualization={true}

                            // enableTimelineVirtualization={true}

                            loadChildOnDemand={true}

                            loadingIndicator={{ indicatorType: "Shimmer" }}

                            enableVirtualMaskRow={true}

                            splitterSettings={{ columnIndex: 3 }}

                        >

                            <EventMarkersDirective>

                                <EventMarkerDirective day={new Date()} label='Today' cssClass='eventMarker'></EventMarkerDirective>

                            </EventMarkersDirective>

                            <ColumnsDirective>

                                <ColumnDirective field='taskId' headerText='ID' width='100' textAlign="Left"></ColumnDirective>

                                <ColumnDirective field='level' headerText='Level' width='120' textAlign="Left" template={(e: any) => levelTemplate(e)}></ColumnDirective>

                                <ColumnDirective field='taskName' headerText='Name' width='300' textAlign="Left"></ColumnDirective>

                                <ColumnDirective field='progress' headerText='% Complete' width='150'></ColumnDirective>

                                <ColumnDirective field='duration' width='150'></ColumnDirective>

                                <ColumnDirective field='startDate' width='150'></ColumnDirective>

                                <ColumnDirective field='endDate' width='150'></ColumnDirective>

                            </ColumnsDirective>

                            <Inject services={[Selection, CriticalPath, DayMarkers, Filter, Toolbar, VirtualScroll, Resize]} />

                        </GanttComponent>

```javascript

Thanks !

[Sridharan Jayabalan]

Hi Loai,

Greetings from Syncfusion.

 

We have reviewed your query, and we are able to replicate the issue "AutoFocus mismatching issue between grid and chart click" in Gantt Chart.

 

To address the problem, we have logged a bug request, and the fix will be provided in the patch release which is scheduled to be rolled out on December 17, 2024. You can track its status from the feedback link given below.

 

Feedback Link - AutoFocus mismatching issue between grid and chart click in React | Feedback Portal

 

Note - You can view the feedback link once it moved to validated state.

 

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization

 

 

Regards,

Sridharan

[Sridharan Jayabalan]

Loai,

Sorry for the delay.

We are glad to announce that our patch release (v28.1.35) is rolled out successfully. In this release, we have added the fix for the reported issue.

 

Please upgrade to the latest version packages to resolve this issue "AutoFocus mismatching issue between grid and chart click in React | Feedback Portal".

 

Root Cause - While performing the above action in load on demand, it returns the args.data as treegrid data with this while check data.ganttProperties.left it returns a undefined value and occurs the reported issue.

Release Notes - Essential Studio for React Weekly Release Release Notes

Sample - U81dz6im (forked) - StackBlitz

Regards,

Sridharan