Feature To See The Segmentation Split Of The Tasks In Gantt

[Emrah Asma]

Hello,

Do you have a feature to see the segmentation split of the tasks in Gantt

For example this is standard gantt:

This is what we want - see the green rolled up showing working time duration.

 

If it overlaps we should show solid line like this:

Thanks.

[Sridharan Jayabalan]

Hi Emrah,

Thank you for your patience.

We have reviewed your query, and to achieve your requirement, we recommend using the queryTaskbarInfo event. Within this event, you can access each taskbar element. By retrieving the width and left values of child records, you can create separate div elements & apply required styles and append them to the parent taskbar element "e-gantt-parent-taskbar". Refer code snippet and sample for your reference.

Note: You can customize the styles as needed.

Code-Snippet:   

const Editing = () => {

  function queryTaskbarInfo(args) {

    if (args.data.hasChildRecords) {

      const childRecords = args.data.childRecords;

      // Create a parent div to hold all child divs

      const parentDiv = document.createElement('div');

      parentDiv.style.position = 'relative';

      parentDiv.style.height = '50px';

      parentDiv.style.border = '1px solid #ccc';

      parentDiv.style.top = 0;

      parentDiv.style.position = 'absolute';

      for (let i = 0; i < childRecords.length; i++) {

        // collecting child records left and width values

        const childRecord = childRecords[i];

        const ganttProperties = childRecord.ganttProperties;

        // Create a new div element for each child record

        const childDiv = document.createElement('div');

        // applying styles for child divs

        childDiv.style.position = 'absolute';

        childDiv.style.left = `${ganttProperties.left - args.data.ganttProperties.left}px`;

        childDiv.style.width = `${ganttProperties.width}px`;

        childDiv.style.height = args.taskbarElement.style.height;

        childDiv.style.backgroundColor = 'lightgreen';

        childDiv.style.marginTop = '-2px';

        // Append the child div to the parent div

        parentDiv.appendChild(childDiv);

      }

      // Append the parent div to the container

      args.taskbarElement.querySelector('.e-gantt-parent-taskbar')

        .appendChild(parentDiv);

    }

  }

  return (

        <GanttComponent

          queryTaskbarInfo={queryTaskbarInfo}

        >

          <Inject services={[Edit, Selection, Toolbar, DayMarkers]} />

        </GanttComponent>

  );

};

 

Sample - https://stackblitz.com/edit/react-5wx5hpda-3ovnq4ms?file=index.js,data.js

 

 

Regards,

Sridharan