I am using the Syncfusion `GanttComponent` with virtualization enabled (`enableVirtualization` and `enableTimelineVirtualization`). While it works most of the time, I occasionally encounter the following error, which causes the Gantt chart and table to remain stuck in the skeleton state:
```
Uncaught runtime errors:
×
ERROR
Cannot read properties of undefined (reading 'isRowSelected')
TypeError: Cannot read properties of undefined (reading 'isRowSelected')
at VirtualTreeContentRenderer.scrollListeners (http://localhost:3000/static/js/bundle.js:609070:242)
at http://localhost:3000/static/js/bundle.js:608788:24
at later (http://localhost:3000/static/js/bundle.js:530038:28)
```
Below is the relevant part of my Gantt configuration:
```jsx
import { L10n, loadCldr, setCulture } from "@syncfusion/ej2-base";
import { DayMarkers, GanttComponent, Inject, VirtualScroll } from "@syncfusion/ej2-react-gantt";
const Gantt = forwardRef((props, ref) => {
const settings = useMemo(function settings() {
return {
allowSelection: false,
baselineColor: "red",
columns: [
{
autoFit: true,
field: "title",
headerTemplate,
isPrimaryKey: true,
template: template("title"),
visible: true,
width: "500px",
},
//rest columns
],
connectorLineBackground: "#7e7e7e",
connectorLineWidth: 3,
dataBound: handleDataBound,
eventMarkers: [
{
day: new Date(),
label: tProjectSchedule("Today"),
},
],
gridLines: "Both",
highlightWeekends: true,
labelSettings: {
leftLabel: "",
rightLabel: function rightLabel(data) {
return data.taskData.assignees.map((assignee) => assignee.name).join(", ");
},
taskLabel: "${taskData.progressTaskLabel}%",
},
locale,
milestoneTemplate: () => {
// code
},
onTaskbarClick: (event) => {
//code
},
queryTaskbarInfo,
ref,
renderBaseline: true,
enableVirtualization: true,
enableTimelineVirtualization: true,
rowDataBound,
splitterSettings: computeSplitterSettings(fullscreenMode, columns, view),
taskFields: {
baselineEndDate: "baselineEndDate",
baselineStartDate: "baselineStartDate",
child: "child",
dependency: "dependency",
duration: "duration",
id: "id",
indicators: "indicators",
name: "name",
progress: "progress",
startDate: "startDate",
},
taskMode: "Manual",
timelineSettings: computeTimelineSettings(timelineViewMode),
tooltipSettings: {
showTooltip: true,
},
width: "100%",
workWeek: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
};
}, [dateFormat]);
return (
<Box
sx={{
display: "flex",
flexDirection: "row",
flexGrow: 1,
overflow: "hidden",
width: "100%",
}}
>
<GanttComponent {...settings}>
<Inject services={[DayMarkers, VirtualScroll]} />
</GanttComponent>
</Box>
);
})
```
Has anyone else faced this issue? Could this be related to the library version, or am I missing something in my configuration?
Any suggestions to resolve this would be highly appreciated! Thank you.
