border color between resources

[Mitchell]

Hi!

I've got a scheduler with 3 resources going across it. My client would like it if there was a dark line between each resource.

I tried:

div.RadScheduler .rsTopWrap .rsContentTable td {
    border-right: 1px solid Black;
}

But in Month view, that puts a column between every day. I just want a single border between resource1 | 2 | 3, top to bottom.

Any way to do that?

[Peter]

Hi Mitchell,

Here is one possible solution:

ASPX:

<script type="text/javascript">
       function pageLoad() {
           var $ = $telerik.$;
           var sch = $find('<%=RadScheduler1.ClientID %>');
           var schElement = sch.get_element();
           var resCount = sch.get_resources().getResourcesByType(sch.get_groupBy()).get_count();
           var resColumns = $(".rsHorizontalHeaderTable tr:nth-child(2) > th", schElement).size() / resCount;
           $(".rsHorizontalHeaderTable tr:first > th:not('th:last')", schElement).css("border-right", "solid 2px black");
           $(".rsHorizontalHeaderTable tr:nth-child(2) > th:not('th:last')", schElement).each(function (i) {
               if ((i + 1) % resColumns == 0)
                   $(this).css("border-right", "solid 2px black");
           });
       }
   </script>
   <telerik:RadScheduler ID="RadScheduler1" runat="server" GroupBy="User" FirstDayOfWeek="Thursday"
       SelectedView="TimelineView" OnTimeSlotCreated="RadScheduler1_TimeSlotCreated">
       <TimelineView NumberOfSlots="2" SlotDuration="03:00:00" />
   </telerik:RadScheduler>

code-behind:

protected void RadScheduler1_TimeSlotCreated(object sender, TimeSlotCreatedEventArgs e)
   {
       RadScheduler scheduler1 = (RadScheduler)sender;
       int lastResIndex = scheduler1.Resources.GetResourcesByType(scheduler1.GroupBy).Count - 1;
       if (scheduler1.GroupBy != null)
       {
           if (e.TimeSlot.Resource.Key.ToString() != scheduler1.Resources.GetResourcesByType("User")[lastResIndex].Key.ToString()) //This check excludes the last resource.
           {
               if (scheduler1.SelectedView == SchedulerViewType.DayView)
               {
                   e.TimeSlot.Control.Style.Add("border-right", "solid 2px black");
               }
               else if (scheduler1.SelectedView == SchedulerViewType.TimelineView)
               {
                   if(e.TimeSlot.End == scheduler1.VisibleRangeEnd)
                       e.TimeSlot.Control.Style.Add("border-right", "solid 2px black");
               }
               else if (e.TimeSlot.Start.DayOfWeek == scheduler1.LastDayOfWeek)
               {
                   e.TimeSlot.Control.Style.Add("border-right", "solid 2px black");
               }
           }
       }
   }

Attached is a demo for reference.

We will consider providing this as a built-in feature. Thank you for your question.


Regards,
Peter
the Telerik team

[Mitchell]

Worked great!! Thanks