How to alternate row colors for a timeline view with multiple resources and resource groups?

I want to alternate the rows colors between resources in a timeline view.. i.e.

Resource A - grey
Resource B - white
Resource C - grey
Resource D - white

Is it possible to set the color of an entire row?

1 Reply 1 reply marked as answer

VM Vengatesh Maniraj Syncfusion Team February 24, 2021 11:29 AM UTC

Hi Zachary, 
 
Greetings from Syncfusion Support. 
 
Yes. It is possible to set the alternate color for entire row by making use of the OnRenderCell event like the below code snippet. 
<SfSchedule TValue="AppointmentData" Height="550px" @bind-SelectedDate="@CurrentDate"> 
    <ScheduleGroup Resources="@Resources" ></ScheduleGroup> 
    <ScheduleEvents TValue="AppointmentData" OnRenderCell="OnRenderCell" ></ScheduleEvents> 
    <ScheduleResources>         
        <ScheduleResource TItem="ResourceData" TValue="int[]" DataSource="@OwnersData" Field="OwnerId" Title="Owner" Name="Owners" TextField="OwnerText" IdField="Id" GroupIDField="OwnerGroupId" ColorField="OwnerColor" AllowMultiple="true"></ScheduleResource> 
    </ScheduleResources> 
    <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings> 
    <ScheduleViews> 
        <ScheduleView Option="View.TimelineWeek" MaxEventsPerRow="2"></ScheduleView> 
        <ScheduleView Option="View.TimelineMonth" MaxEventsPerRow="2"></ScheduleView>         
    </ScheduleViews> 
</SfSchedule> 
 
 
public void OnRenderCell(RenderCellEventArgs args) 
    { 
        //ElementType.WorkCells: for Timeline views 
        //ElementType.MonthCells: for Timeline Month view 
        if (args.ElementType == ElementType.WorkCells || args.ElementType == ElementType.MonthCells) 
        { 
            if (args.GroupIndex % 2 == 0) 
            { 
                args.CssClasses = new List<string>() { "gray-class" }; 
            } 
            else 
            { 
                args.CssClasses = new List<string>() { "white-class" }; 
            } 
        } 
    } 
 
For your reference, we have prepared the sample that can be available in the below link. 
 
 
Kindly check the above sample and get back to us if you need any further assistance. 
 
Regards, 
Vengatesh  


Marked as answer
Loader.
Up arrow icon