[Solved] Visually distinguishing between groups

[Roman Janki]

Hi,

When I group my appointments by a certain resource I want to visually distinguish each group with a vertical bold line.
How do I accomplish that?

Screenshot -> http://screencast.com/t/zpNcUbnXJ

Thank you in advance!

Regards,
Andrew

[Peter]

Hi André,

I have attached a small demo of the desired functionality. I have used a combination of jQuery, css and server API to achieve the desired appearance.

jQuery:

<script type="text/javascript">
     window.$ = $telerik.$;
        $(document).ready(function()
        {
           $(".rsHorizontalHeaderTable span:contains('Sun')").parent().css("border-right", "solid 2px red");
           $(".rsHorizontalHeaderTable tr:first").children().css("border-right", "solid 2px red");

        });
        function pageLoad()
        {
           var scheduler = $find("<%=RadScheduler1.ClientID %>");
           if(scheduler.get_selectedView() == Telerik.Web.UI.SchedulerViewType.TimelineView)
           {
                var numberOfSlots = $(".rsHorizontalHeaderTable tr:nth-child(2)").children().size();
                var numberOfResources = scheduler.get_resources().get_count();
                var NthPosition = numberOfSlots/numberOfResources;
                var inc = NthPosition;
                $(".rsHorizontalHeaderTable tr:nth-child(2)").children().each(function(i){
                if(NthPosition == i + 1){
                        $(this).css("border-right", "solid 2px red");
                        NthPosition += inc;
                   }
                })
           }
        }
    </script>

Note that for German you should use "So" instead of "Sun" in the highlighted text above.

CSS:

<style type="text/css">
    .rsSunCol
    {
        border-right: solid 2px red !important;
    }
    </style>

Code-behind:

protected void RadScheduler1_TimeSlotCreated(object sender, Telerik.Web.UI.TimeSlotCreatedEventArgs e)
    {
        if (RadScheduler1.SelectedView == SchedulerViewType.DayView)
        {
            e.TimeSlot.Control.Style.Add("border-right", "solid 2px red");
        }
        else if(RadScheduler1.SelectedView == SchedulerViewType.WeekView & e.TimeSlot.Start.DayOfWeek == DayOfWeek.Sunday)
        {
            e.TimeSlot.Control.Style.Add("border-right", "solid 2px red");
        }
        else if(RadScheduler1.SelectedView == SchedulerViewType.TimelineView )
        {
            int result = DateTime.Compare(e.TimeSlot.Start, RadScheduler1.VisibleRangeEnd.AddDays(-1));
            if (result == 0)
                e.TimeSlot.Control.Style.Add("border-right", "solid 2px red");
        }
    }

Regards,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Roman Janki]

Thank you very much for your answer! It worked perfect!

Regards,
André