How do I set css for alternating lines in a Radscheduler

8 posts, 1 answers
  1. Suzy
    Suzy avatar
    66 posts
    Member since:
    Nov 2014

    Posted 10 Jun 2015 Link to this post

    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

  2. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 10 Jun 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Suzy
    Suzy avatar
    66 posts
    Member since:
    Nov 2014

    Posted 10 Jun 2015 in reply to Magdalena Link to this post

    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

     

  5. Suzy
    Suzy avatar
    66 posts
    Member since:
    Nov 2014

    Posted 10 Jun 2015 in reply to Magdalena Link to this post

    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

  6. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 12 Jun 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Suzy
    Suzy avatar
    66 posts
    Member since:
    Nov 2014

    Posted 16 Jun 2015 in reply to Magdalena Link to this post

    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

     

  8. Answer
    Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 17 Jun 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. Suzy
    Suzy avatar
    66 posts
    Member since:
    Nov 2014

    Posted 17 Jun 2015 in reply to Magdalena Link to this post

    Hi Magdalena,

    this seems to be working!

    Thank you

    Suzy

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017