Add a fare Value on each group render cell

[Arturo Martinez]

Good Afternoon, 

At this moment I manage to add on the grouped column the count of the number of events on the day of the container, but is there a way I can also on this same field one space below a fare value?? like

 

This is my renderCell function:

onRenderCell(args: RenderCellEventArgs): void {

console.log("")

let filteredData: any;

if (args.elementType == 'resourceGroupCells' ) {

const dataSource = Object.values(this.scheduleObj.eventSettings.dataSource!);

filteredData = dataSource.filter((data: any) => {

const dataDate = new Date(data.StartTime);

const argsDate = new Date(args.date!);

dataDate.setHours(0, 0, 0, 0);

argsDate.setHours(0, 0, 0, 0);

debugger

let groupIndex = this.scheduleObj.getResourcesByIndex(data.ProjectId);

let argsGroupIndex = this.scheduleObj.getResourcesByIndex(args.groupIndex!);

return data.ProjectId === argsGroupIndex.groupData!.ProjectId && dataDate.getTime() == argsDate.getTime();

});

(args.element as HTMLElement).innerText = filteredData.length.toString();

}

}

[Ram Raju Elaiyaperumal]

Hi Arturo Martinez,

Certainly, you can modify your code to display both the number of events and a fare value in the same cell. Instead of using the renderCell event, it would be more efficient to use the dataBound event. This event is triggered after the Scheduler component's data is bound to its data source, making it an ideal place to update the values in the resource header.

Here's a sample code snippet that demonstrates this:

 public fareValue = 950;

 

public onDataBound() { 

    const numberOfDaystoDisplay = 7;

    const workCells = document.querySelectorAll(".e-work-cells.e-resource-group-cells");

    workCells.forEach((cell, index) => {

        let project1Events = [];    

        const timestamp = Number(cell.getAttribute('data-date'));

        const startDate = new Date(timestamp);

        const endDate = new Date(startDate);

        endDate.setDate(startDate.getDate() + 1); // add one day

        const events = this.scheduleObj.getEvents(startDate, endDate);

        events.forEach(event => {

            if (event.ProjectId === 1) {

                project1Events.push(event);

            } 

        });

        (cell as HTMLElement).innerText = project1Events.length.toString();

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

        newElement.innerText = this.fareValue.toString();

        newElement.style.marginTop = '10px';

        (cell as HTMLElement).appendChild(newElement);

        project1Events = [];

       

    });

  }

In this code, we've added a new div element for the fare value, similar to how we added the number of events.

For your convenience we have prepared a stackblitz sample, kindly check on the sample: https://stackblitz.com/edit/number-of-events-with-resources-bca69x

Regards,

Ram