Schedule access resource in renderCell

[Jan van Rossum]

I'm using the timeline schedule with resources, quite similar to this one:

https://ej2.syncfusion.com/angular/demos/#/material/schedule/timeline-resource-grouping

Is there a way from the renderCell event

https://ej2.syncfusion.com/angular/documentation/api/schedule/#rendercell

to access the corresponding resource (row) of the cell?

Thanks for your reply.

[Vinitha Devi Murugan]

Hi Jan van, 

Greetings from Syncfusion. 

It is possible to get the corresponding resource details in renderCell event. We have prepared the below sample for the same. 

https://stackblitz.com/edit/angular-hzuo4j?file=app.component.ts 

onRenderCell(args: RenderCellEventArgs): void { 

  if (args.element.classList.contains('e-work-cells')) { 

 // RenderCell event has the groupIndex in it’s parameter which help us to get the resource details  

by calling getResourceByIndex method. 

    let resource: ResourceDetails = this.scheduleObj.getResourcesByIndex(args.groupIndex); 

    console.log(resource); 

  } 

 } 

Kindly try the above solution and let us know, if you need further assistance on this. 

Regards, 

M.Vinitha devi 

[Jan van Rossum]

It's perfect, thank you!

[Vinitha Devi Murugan]

Hi Jan van, 

 

We are happy to hear that our solution has fulfilled your requirement.  

 

Regards, 

M.Vinitha devi 

[Jan van Rossum]

I just noticed that in the mobile/touch view (where there is shown only one resource at a time), args.groupIndex is undefined

You can reproduce this by running the example using the mobile emulator in the Chrome DevTools for instance.

Is there another way to reach the groupIndex and/or the resource from there?

[Karthigeyan Krishnamurthi]

Hi Jan, 

 

Thanks for the update. 

 

Kindly use the below code example to overcome the reported issue. 

https://stackblitz.com/edit/angular-hzuo4j-tlggva?file=app.component.ts 

 

onRenderCell(args: RenderCellEventArgs): void { 

    if (args.element.classList.contains("e-work-cells")) { 

      let resource: ResourceDetails = this.scheduleObj.getResourcesByIndex( 

        this.scheduleObj.getCellDetails(args.element).groupIndex 

      ); 

      console.log(resource); 

    } 

  } 

 

Regards, 

Karthi 

[Jan van Rossum]

Yes, this works in both cases. 

Thanks for providing the solution!

[Karthigeyan Krishnamurthi]

Most welcome 😊 

[Guilbaud William]

Hello,

My goal is to color the background of my cells in different colors regarding to the appointment inside (for example if one day is overbooked I want the background to be red whereas if there is still availability I want it to be green). For this, I want to access ressources in my renderCell function :  

However, I've tried both methods but its always returns me undefined when I try to print it into my console.

My issue is that args.groupIndex is also undefined.

Is there somethings I'm doing wrong? Am I doing it the wrong way?

Thanks for your reply.

[Hareesh Balasubramanian]

Hi Guilbaud, 

Thanks for the update. 

We have validated your shared query “I've tried both methods but its always returns me undefined when I try to print it into my console” at our end. And we have prepared the sample with your shared snippets and the groupIndex are properly getting at our end. And the sample can be viewed from the following link. 

Code snippet: 

  onRenderCell(args: RenderCellEventArgs): void { 

    if (args.element.classList.contains("e-work-cells") || args.element.classList.contains("e-work-hours")) { 

      let resourceIndex: number = args.groupIndex; 

      console.log('index : ' + resourceIndex); 

      let resource1: ResourceDetails = this.scheduleObj.getResourcesByIndex(args.groupIndex); 

      console.log("Method 1 : " + resource1); 

      let resource2: ResourceDetails = this.scheduleObj.getResourcesByIndex( 

        this.scheduleObj.getCellDetails(args.element).groupIndex 

      ); 

      console.log("Method 2 : " + resource2); 

    } 

  } 

Sample: https://stackblitz.com/edit/angular-resource-sample?file=app.component.ts  

Kindly try the above sample and if the issue still persists at your end kindly share the below details to serve you better? 

 

• Replicate the issue in the above sample
• Share the issue replicating sample (if possible)

 

Regards, 

Hareesh