Style background color row in resource view

[PT Lattice Teknologi Mandiri]

Is it possible to change the background color of row only for resource row in resource view ? (the color of subtask row is not changed)

furthermore, in resource view can i change bg color of row when dragging a taskbar ? Example taskbar A, can only be dragged to resource view with id 1. So the bg color of row with resource id 1 changed to blue, and other resource row execpt the id 1 is changed to red. 

[Ajithkumar Gopalakrishnan]

Hi PT Lattice,

Greetings from Syncfusion Support,

To achieve your requirements, we suggest using the rowDataBound and queryTaskbarInfo events in the Gantt chart. The rowDataBound and queryTaskbarInfo events trigger during the initial load, allowing you to customize the background color of parent records (resource items). When the taskbar is dragged and dropped, the taskbarEditing event is triggered. In this event, the rowDataBound and queryTaskbarInfo events are used again to reapply row color customization in the Gantt chart. We have attached a code snippet and sample for your reference:

<GanttComponent id='ResourceView'

        queryTaskbarInfo={queryTaskbarInfo}

        rowDataBound={rowDataBound}

        taskbarEditing={taskbarEditing}

        taskbarEdited={taskbarEdited}

        >

          ...

</GanttComponent>

let updatedTaskIdCollection = []; // Global variable to store task IDs

let missingChildren;

let taskbarAction = null;

function rowDataBound(args)

{

    if (args.data.hasChildRecords && taskbarAction == null)

    {

        args.row.style.backgroundColor = 'lightblue';

    }

    if (taskbarAction != null)

    {

        if (args.data.hasChildRecords)

        {

            const allRows = document.querySelectorAll('.e-row');

            missingChildren.forEach(task =>

            {

                allRows[task.index].style.backgroundColor = 'blue';

            });

        }

        else

        {

            args.row.style.backgroundColor = 'red';

        }

    }

}

function queryTaskbarInfo(args)

{

    if (args.data.hasChildRecords && taskbarAction == null)

    {

        args.rowElement.style.backgroundColor = 'lightblue';

    }

    if (taskbarAction != null)

    {

        if (args.data.hasChildRecords)

        {

            missingChildren = args.data.childRecords.filter(

                (child) => !updatedTaskIdCollection.includes(child.TaskID)

            );

            console.log(missingChildren)

            const allRows = document.querySelectorAll('.e-chart-row');

            missingChildren.forEach(task =>

            {

                allRows[task.index].style.backgroundColor = 'blue';

            });

        }

        else

        {

            args.rowElement.style.backgroundColor = 'red';

            updatedTaskIdCollection.push(args.data.TaskID)

        }

    }

}

function taskbarEditing(args)

{

    taskbarAction = args.taskBarEditAction;

}
function taskbarEdited(args)

{

    updatedTaskIdCollection = [];

    missingChildren = [];

    taskbarAction = null;

}

You can find a working example onStackBlitz.  

Initial load image ref :



After taskbar drag image ref:



For more information, you may refer to the following link:

https://ej2.syncfusion.com/react/documentation/api/gantt/#taskbaredited

https://ej2.syncfusion.com/react/documentation/api/gantt/#taskbarediting

https://ej2.syncfusion.com/react/documentation/api/gantt/#rowdatabound

https://ej2.syncfusion.com/react/documentation/api/gantt/#querytaskbarinfo

If you have any further questions or need additional assistance, please let me know!

Regards,
Ajithkumar G