Collapse Grid Not Working

[Braulio Portela]

Hello there!

I am using the Gantt Chart and the basic implementation, following the example in the documentation, is not proper collapsing the tasks/subtasks in the grid section. The button/icon to collapse/expand, only collapses and expands the chart section.

Bellow, the code used:

import { GanttComponent } from "@syncfusion/ej2-react-gantt";

import { registerLicense } from "@syncfusion/ej2-base";

import "./GanttStyles.css";

const GanttChart = () => {

  const licenseKey = process.env.REACT_APP_SYNCFUSION_LICENSE_KEY as string;

  registerLicense(licenseKey);

  const taskFields = {

    id: "TaskID",

    name: "TaskName",

    startDate: "StartDate",

    duration: "Duration",

    progress: "Progress",

    parentID: "ParentId",

  };

  const GanttData = [

    {

      TaskID: 1,

      TaskName: "Project Initiation",

      StartDate: new Date("04/02/2019"),

      EndDate: new Date("04/21/2019"),

    },

    {

      TaskID: 2,

      TaskName: "Identify Site location",

      StartDate: new Date("04/02/2019"),

      Duration: 4,

      Progress: 50,

      ParentId: 1,

    },

    {

      TaskID: 3,

      TaskName: "Perform Soil test",

      StartDate: new Date("04/02/2019"),

      Duration: 4,

      Progress: 50,

      ParentId: 1,

    },

    {

      TaskID: 4,

      TaskName: "Soil test approval",

      StartDate: new Date("04/02/2019"),

      Duration: 4,

      Progress: 50,

      ParentId: 1,

    },

    {

      TaskID: 5,

      TaskName: "Project Estimation",

      StartDate: new Date("04/02/2019"),

      EndDate: new Date("04/21/2019"),

    },

    {

      TaskID: 6,

      TaskName: "Develop floor plan for estimation",

      StartDate: new Date("04/04/2019"),

      Duration: 3,

      Progress: 50,

      ParentId: 5,

    },

    {

      TaskID: 7,

      TaskName: "List materials",

      StartDate: new Date("04/04/2019"),

      Duration: 3,

      Progress: 50,

      ParentId: 5,

    },

    {

      TaskID: 8,

      TaskName: "Estimation approval",

      StartDate: new Date("04/04/2019"),

      Duration: 3,

      Progress: 50,

      ParentId: 5,

    },

  ];

  return (

    <GanttComponent

      dataSource={GanttData}

      height="450px"

      taskFields={taskFields}

    />

  );

};

export default GanttChart;

[Dinesh Vinayagam]

Hi Braulio Portela,

For this query, this issue may occur due to using different versions of source files and styles.
To resolve this, we recommend using the same Gantt chart version for both your source and style references.

Please make sure to include the following references in your index.html file:

Code-Snippet:   

index.html:-

 

<script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>

<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/29.1.33/material.css" rel="stylesheet">

We ran the sample you attached and tested the expand/collapse behavior in the Gantt Chart.
However, we were unable to replicate the reported issue—the expand/collapse action is functioning properly for both the grid section and the chart section.

To assist you further, please share the following details:

• The full code snippet of the Gantt Chart, along with the package version details.
• A video demo that clearly shows the exact steps to reproduce the issue.
• Information about any customizations applied to the Gantt Chart using events, for further validation.
• Details about the dataSource, including its structure and a dummy version that closely resembles the one used in your application.
• If possible, please attempt to reproduce the issue using the sample we provided and share your observations.

Sample for Reference: Sample for Reference

Once we have these details, we will investigate further and provide a resolution.

Regards,
Dinesh