Coloring Group Row Background in the Schedule Component

[Alex]

Good afternoon Ashok

thnks for your answer.

I think that i not explained correctly my request: excuse me.

What I want is to color the row Group that allow to expand/compress  all the users.

I want to color the backround with a standard attribute if it's possible/available.

For us is clear how to color the background event: You show to me with the code of yours first example.

My goal is to color, has you can see here, the background row of the PROJEC NR (the group name).

If it's possible the complete row, otherwise only the cell with the name if it's not possible

Thanks in adavance Alex

[Ashokkumar Karuppasamy]

Hi Alex

You can fulfill your requirement by utilizing the renderCell event. If the event is used, you can apply background styles based on the group index or CSS attributes. The attached example demonstrates the solution. Feel free to give it a try, and don't hesitate to reach out if you need further assistance.

Sample: https://stackblitz.com/edit/react-epvz8rpm-9o2xhlfo?file=index.js

  const setResourceBackgroundColor = (args) => {

    const resourceData = scheduleObj.current.getResourcesByIndex(args.groupIndex); // Use args.groupIndex

    if (resourceData) {

      const project = projectData.find(p => p.id === resourceData.groupData.functionalCategoryId);

  

      if (project) {

        args.element.style.backgroundColor = project.color;

      }

    }

  };

  

  const onRenderCell = (args) => {

    const { elementType, element } = args;

  

    // Handle resource header elements

    if (elementType === 'resourceHeader' && element.classList.contains('e-parent-node')) {

      setResourceBackgroundColor(args); // Use the new method

    } 

    // Handle resource group cells

    else if (elementType === 'resourceGroupCells') {

      setResourceBackgroundColor(args); // Use the new method

    }

  };

         <ScheduleComponent

            cssClass='timeline-resource-grouping'

            width='100%'

            height='650px'

            ref={scheduleObj}

            selectedDate={new Date(2025, 0, 4)}

            currentView='TimelineWeek'

            eventSettings={{ dataSource: data, fields: fieldMappings, allowAdding: false, allowDeleting: false, resourceColorField: 'Grp_FC'}}

            renderCell = {onRenderCell}

            group={{ resources: ['Grp_FC', 'Grp_Usr'] }}

          >

Regards,
Ashok