Customize ColumnHeaderDateFormat

5 posts, 0 answers
  1. CLAUDE LLOP
    CLAUDE LLOP avatar
    10 posts
    Member since:
    Mar 2008

    Posted 14 May 2012 Link to this post

    Hi,
    I would like to customize my ColumnHeaderDateFormat with every hour of my TimeLabelSpan (see screenshots attached : now and after)
    Here is my source code :
                    rsPlanning.TimelineView.SlotDuration = TimeSpan.Parse("01:00:00");
                    rsPlanning.TimelineView.TimeLabelSpan = 8;
                    rsPlanning.TimelineView.NumberOfSlots = 24;
                    rsPlanning.TimelineView.ColumnHeaderDateFormat = "HH:mm";
                    rsPlanning.TimelineView.HeaderDateFormat = "dddd";
                    rsPlanning.TimelineView.EnableExactTimeRendering = true;
                    rsPlanning.TimelineView.StartTime = TimeSpan.Parse("05:00:00");
                    rsPlanning.ShowNavigationPane = true;
                    rsPlanning.EnableDatePicker = false;










    How I can edit my TimelineView to have my screenshot names after ?
  2. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 14 May 2012 Link to this post

    Hi Claude,

    The merge of the header cells in your current view is caused by setting rsPlanning.TimelineView.TimeLabelSpan = 8; . So if you want to achieve the appearance from the second image, simply do not set this property and leave it to its default value of 1.

    Kind regards,
    Peter
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. CLAUDE LLOP
    CLAUDE LLOP avatar
    10 posts
    Member since:
    Mar 2008

    Posted 14 May 2012 Link to this post

    Thanks for your reply. But I want to keep 3 blocks of 8 hours with separation bar !
    Is it possible ?
  4. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 15 May 2012 Link to this post

    Hi Claude,

    Please, try the following:
    <script type="text/javascript">
     
           function pageLoad() {
     
               var $ = $telerik.$;
               var sch = $find('<%=rsPlanning.ClientID %>');
               var schElement = sch.get_element();
               var numberOfColumns = $(".rsHorizontalHeaderTable tr:nth-child(2) > th", schElement).size() / 3;
     
               $(".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) % numberOfColumns == 0)
     
                       $(this).css("border-right", "solid 2px black");
               });
           }
     
       </script>
       <telerik:RadScheduler runat="server" ID="rsPlanning"
           SelectedView="TimelineView" ontimeslotcreated="rsPlanning_TimeSlotCreated">
       </telerik:RadScheduler>

    protected void Page_Load(object sender, EventArgs e)
       {
           rsPlanning.TimelineView.SlotDuration = TimeSpan.Parse("01:00:00");
           rsPlanning.TimelineView.TimeLabelSpan = 8;
           rsPlanning.TimelineView.NumberOfSlots = 24;
           rsPlanning.TimelineView.ColumnHeaderDateFormat = "HH:mm";
           rsPlanning.TimelineView.HeaderDateFormat = "dddd";
           rsPlanning.TimelineView.EnableExactTimeRendering = true;
           rsPlanning.TimelineView.StartTime = TimeSpan.Parse("05:00:00");
           rsPlanning.ShowNavigationPane = true;
           rsPlanning.EnableDatePicker = false;
       }
       
       protected void rsPlanning_TimeSlotCreated(object sender, TimeSlotCreatedEventArgs e)
       {
           if (rsPlanning.SelectedView == SchedulerViewType.TimelineView)
           {
               if ((e.TimeSlot.End.Hour == 13) || (e.TimeSlot.End.Hour == 21))
               {
                   e.TimeSlot.Control.Style.Add("border-right", "solid 2px black");
               }
           }
       }
     
       protected override void OnInit(EventArgs e)
       {
           base.OnInit(e);
           rsPlanning.Provider = new XmlSchedulerProvider(Server.MapPath("~/App_Data/Appointments.xml"), true);
       }

    Attached is a sample for reference.

    All the best,
    Peter
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. CLAUDE LLOP
    CLAUDE LLOP avatar
    10 posts
    Member since:
    Mar 2008

    Posted 15 May 2012 Link to this post

    Thank you so much !
    It's working fine, I just had to add a few modifications.

Back to Top