How do I set css for alternating lines in a Radscheduler

[Suzy]

Hi

I have a radscheduler which uses Resource grouping and grouping direction is set to vertical.  I would like to give the alternating rows a different background color.

For the resource gouping I use data from a database.  (also for the appointments offcourse)

How can I do this?

Kind regards

Suzy

[Magdalena]

Hello Suzy,

Thank you for contacting Telerik support.

You can use the :nth-child() pseudo selector for the purpose. Rows in the content table of RadScheduler can be customized by the .rsContentTable tr {} selector, so the CSS rule could be for example the following:

.rsContentTable tr {
    background: #ccc;
}

.rsContentTable tr:nth-child(4n+2),
.rsContentTable tr:nth-child(4n+3) {
    background: #eee;
}

Do not hesitate to contact us if you have other questions.

Regards,
Magdalena
Telerik

[Suzy]

Hi Magdalena,

Your solution is not working.

When I use rsContent instead of rsContentTable, the background if the group is alternated. But I need the entire row background to change.

This is the css I use at this moment :

.rsContent tr {
    background: #ccc;
}

.rsContent tr:nth-child(2n+1){
    background: #eee;
}

Kind regards

Suzy

 

[Suzy]

Hi Magdalena,

Your solution is not working.

when I use rsContent instead of rsContentTable the group is alternated. But I need the entire row to be in an alternating color.

This is the css I use :

.rsContent tr {
    background: #ccc;
}

.rsContent tr:nth-child(2n+1){
    background: #eee;
}

 

Kind regards

Suzy

[Magdalena]

Hello Suzy,

The solution works properly on our side. We are sending you a sample project in the attachment where is applied the previous solution.

You can also try to apply the following:

.rsAlt {
    background: red;
}

If these solutions do not work for your case, could you please provide us with a runnable project with applied your case so we will be able to assist you in more efficient way?

Regards,
Magdalena
Telerik

[Suzy]

Hi Magdalena,

I cannot test your example because I don't have the database used in your example.

Here is my RadScheduler I use:

<telerik:RadScheduler runat="server" ID="rscLendingService" GroupBy="LendingService" GroupingDirection="Vertical"
               RowHeight="50px" Height="100%"
               OnTimeSlotCreated="rscLendingService_TimeSlotCreated"
               AppointmentStyleMode="Auto" DataKeyField="MachineID"
               FirstDayOfWeek="Monday" LastDayOfWeek="Sunday"
               SelectedView="TimelineView" TimelineView-NumberOfSlots="7" TimelineView-SlotDuration="1.00:00:00" TimelineView-ShowInsertArea="false"
               AllowDelete="false" AllowEdit="false" AllowInsert="false">
               <TimelineView UserSelectable="false"></TimelineView>
               <MultiDayView UserSelectable="false"></MultiDayView>
               <DayView UserSelectable="false"></DayView>
               <WeekView UserSelectable="false"></WeekView>
               <MonthView UserSelectable="false"></MonthView>
               <TimeSlotContextMenuSettings EnableDefault="true"></TimeSlotContextMenuSettings>
               <AppointmentContextMenuSettings EnableDefault="true"></AppointmentContextMenuSettings>
           </telerik:RadScheduler>

and this is my code behind, with offcourse my own database.

protected void Page_Load(object sender, EventArgs e)
        {

            if (!Page.IsPostBack)
            {
                rscLendingService.DataSubjectField = "SchedulerSubject";
                rscLendingService.DataStartField = "DateFrom";
                rscLendingService.DataEndField = "DateTo";
                SetData();

                System.Globalization.CultureInfo ci = System.Threading.Thread.CurrentThread.CurrentCulture;
                DayOfWeek fdow = ci.DateTimeFormat.FirstDayOfWeek;
                rscLendingService.SelectedDate = DateTime.Today.AddDays(-(DateTime.Today.DayOfWeek - fdow));
            }
        }

        private void SetData()
        {
            ResourceType rt = new ResourceType("LendingService");
            rt.DataSource = BLogic.Assets.GetListForLendingService(null, null, null, null, null);
            rt.KeyField = "MachineID";
            rt.ForeignKeyField = "MachineID";
            rt.TextField = "MachineName";
            rscLendingService.ResourceTypes.Add(rt);
            rscLendingService.DataSource = BLogic.LendingServices.Search(null, null, null, null, null, null, null, null, "ACT", null, null, null, null, null);

        }
        protected void rscLendingService_TimeSlotCreated(object sender, TimeSlotCreatedEventArgs e)
        {
            if (rscLendingService.SelectedView == SchedulerViewType.TimelineView)
            {
                if (e.TimeSlot.Start.Date.DayOfWeek == DayOfWeek.Saturday || e.TimeSlot.Start.Date.DayOfWeek == DayOfWeek.Sunday)
                {
                    e.TimeSlot.CssClass = "SchedulerWeekend";
                }
            }

        }

I tried your suggestion but nothing is working for me.

 Kind regards

Suzy

 

[Magdalena]

Hello Suzy,

All databases used in our demos are available at the demos installation in the App_Data folder. We would like refer you for more information to the point 5 in the article about isolating a demo as a stand-alone application available from our demos.

After some modification of the code that you had provided, we succeeded to run the project. In your case the CSS that should work is

html .RadScheduler .rsAllDayRow:nth-child(2n+1){
    background: gray;
}

We are also sending you the tested project in the attachment.

Regards,
Magdalena
Telerik

[Suzy]

Hi Magdalena,

this seems to be working!

Thank you

Suzy