Timeline view doesn't line up correctly

15 posts, 0 answers
  1. Teemu
    Teemu avatar
    3 posts
    Member since:
    Aug 2012

    Posted 24 Aug 2012 Link to this post

    Hi,

    I'm using RadSchedulers TimelineView to display my appointments. I want to display one week at a time with 30min slot duration. The problem is that appointments are displayed horizontally in the wrong places. In Chrome, the problem can be solved by setting ColumnWidth="3px" for the Scheduler, but in IE even that won't work. I have used some custom styles, but removing them didn't help. Also removing the TimeLabelSpan="48" declaration doesn't do any good. Here is a part of my code: 
    <telerik:RadScheduler runat="server" ID="scheduler" Height="100%" SelectedView="TimelineView"
                DataKeyField="ID" DataStartField="Alkuaika" DataEndField="Loppuaika" DataSubjectField="Loppuaika"
                CustomAttributeNames="Alkuaika, Loppuaika" DayView-UserSelectable="false" MonthView-UserSelectable="false"
                WeekView-UserSelectable="false" OnDataBound="dataBound" OnAppointmentClick="appointmentClick"
                OnAppointmentCreated="appointmentCreated" OnAppointmentDataBound="appointmentDataBound"
                OnTimeSlotCreated="timeSlotCreated" OnNavigationComplete="navigationComplete"
                AllowInsert="false" AllowEdit="false" AllowDelete="false" FirstDayOfWeek="Monday"
                LastDayOfWeek="Sunday" AppointmentStyleMode="Default" NumberOfHoveredRows="0" ColumnWidth="3px">
                <TimelineView GroupBy="Ammattinimike" GroupingDirection="Vertical" SlotDuration="00:30:00"
                    NumberOfSlots="336" ColumnHeaderDateFormat="ddd dd.MM." TimeLabelSpan="48"/>
                <AppointmentTemplate>
                    <div>
                        <%# Convert.ToDateTime(Eval("Start")).ToShortTimeString() %>-<%# Convert.ToDateTime(Eval("End")).ToShortTimeString() %>
                    </div>
                </AppointmentTemplate>
                <ResourceTypes>
                    <telerik:ResourceType DataSourceID="ds_Ammattinimike" ForeignKeyField="AmmattinimikeID"
                        KeyField="ID" Name="Ammattinimike" TextField="Nimi" />
                </ResourceTypes>
            </telerik:RadScheduler>

    I also have some screenshots to illustrate the problem.
    • The first one is Chrome without the ColumnWidth-declaration (Here all the cells seem to be 3px wide, except on Sunday their width is 4px)
    • The second one is Chrome with ColumnWidth="3px"  (The appointments are in the right places, but the right side of the Scheduler looks a bit stupid now) 
    The third one is IE with ColumnWidth="3px" (It looks exactly the same without ColumnWidth)

    Any suggestions on what could cause this or how to solve the problem?

    - Teemu 



  2. Ivana
    Admin
    Ivana avatar
    657 posts

    Posted 28 Aug 2012 Link to this post

    Hi Teemu,

    Showing multiple days in timeline View in a configuration other than the following, is not a customization that it supported out-of-the-box for RadScheduler:
    <telerik:RadScheduler runat="server" ID="RadScheduler1" SelectedView="TimelineView"
        FirstDayOfWeek="Monday" LastDayOfWeek="Sunday" AppointmentStyleMode="Default"
        NumberOfHoveredRows="0">
        <TimelineView GroupBy="User" GroupingDirection="Vertical" SlotDuration="1:00:00:00"
            NumberOfSlots="7" ColumnHeaderDateFormat="ddd dd.MM." />
        <AppointmentTemplate>
            <div>
                <%# Convert.ToDateTime(Eval("Start")).ToShortTimeString() %>-<%# Convert.ToDateTime(Eval("End")).ToShortTimeString() %>
            </div>
        </AppointmentTemplate>
        <ResourceTypes>
            <telerik:ResourceType DataSourceID="ds_Ammattinimike" ForeignKeyField="AmmattinimikeID"
                KeyField="ID" Name="Ammattinimike" TextField="Nimi" />
        </ResourceTypes>
    </telerik:RadScheduler>
    It is possible to align the cells so that one cell is shown and all the others are set width zero, but this is not a good solution since there will be just one timeslot which time span is 30min.

    I hope this is helpful.

    All the best,
    Ivana
    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. UI for ASP.NET Ajax is Ready for VS 2017
  4. Neha
    Neha avatar
    5 posts
    Member since:
    Jun 2013

    Posted 07 Aug 2013 Link to this post

    Hi,
    I am facing the same problem.
    In timeline view, I created all 15 mins slots covering a hour in 4 slots. The timelime view ranges from 12:00 AM to 11:00 PM.
    My appointment starting at 8:00 AM appears shifted to left on scheduler and appears like starting at 7:45 PM. Please refer attched screenshot.
    Please provide any solution for this issue.

    Thanks,
    Neha Mathur
  5. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 12 Aug 2013 Link to this post

    Hello Neha,

     
    I have tested the described behavior both on our on-line demo and locally but could not reproduce the unusual behavior. Would you please share what other styles or code that should we add in order to observe the described behavior and be more helpful?

    Regards,
    Plamen
    Telerik
    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 the blog feed now.
  6. Neha
    Neha avatar
    5 posts
    Member since:
    Jun 2013

    Posted 14 Aug 2013 Link to this post

    Hi Plamen,

    Thanks!
    I identified the problem was with my css. I am using a css class to hide the timeslot borders by making them white. I had also set the border width to 1px (which I guess is less than actual border width). It was causing the appointments to shift to left.
    I removed the border width setting from css and then the appointments were aligned.
    This was my css:
    .White {
        background-color: white !important;
        border-left:1px white !important;
        border-right:1px white !important;
    }

    And this is how it was applied:

    protected void radScheduler_TimeSlotCreated(object sender, TimeSlotCreatedEventArgs e)
            {
                RadScheduler scheduler = (RadScheduler)sender;
                if (scheduler.SelectedView == SchedulerViewType.TimelineView)
                {
                    e.TimeSlot.CssClass = "White";
                }
    }

    To fix the problem, I changed css to:
    .White {
        background-color: white !important;
        border-left-color: white !important;
        border-right-color:white !important;
    }

    What should I do if I want to change border width of time slots without any alignment problem?

    -Neha

  7. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 19 Aug 2013 Link to this post

    Hi Neha,

     
    Thank you for getting back to us.

    You can add this CSS that will align your appointments properly even when the border of the timeslots is 0px:

    .rsApt {
             margin-left: 0 !important;
         }

    Hope this will be helpful. 

    Regards,
    Plamen
    Telerik
    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 the blog feed now.
  8. Neha
    Neha avatar
    5 posts
    Member since:
    Jun 2013

    Posted 28 Aug 2013 Link to this post

    Hi Plamen,

    Now when I am using browser IE 10, I am getting a similar alignment problem. The time slot and its header are not aligned, particularly when Time Label Span is 2 or above.
    You can reproduce the issue on your online demo at http://demos.telerik.com/aspnet-ajax/scheduler/examples/timelineview/defaultcs.aspx

    I am attaching screen slots of demo with IE 9 and IE 10.

    Please respond as soon as possible, as we are close to our client release.

    Thanks,
    Neha
  9. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 30 Aug 2013 Link to this post

    Hello Neha,

     
    Thank you very much for reporting the issue.

    This looks like a bug in RadScheduler in IE10. I have logged it for fixing and we will make our best to fix it as soon as possible. Please excuse us for the inconvenience caused by it.

    Regards,
    Plamen
    Telerik
    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 the blog feed now.
  10. Neha
    Neha avatar
    5 posts
    Member since:
    Jun 2013

    Posted 02 Sep 2013 Link to this post

    Hi Plamen,

    We are in process of purchasing multiple licenses of DevCraft UI Edition and this issue is an important functionality for the project, shall we expect the fix for the issue sooner?
    Any tentative dates would be appreciated.

    Neha
  11. Neha
    Neha avatar
    5 posts
    Member since:
    Jun 2013

    Posted 03 Sep 2013 Link to this post

    Hi Plamen,

    Can I know the bug ID and its link that can be provided to us to keep track of the issue?

    Neha
  12. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 04 Sep 2013 Link to this post

    Hi Neha,

    The issue is logged with a high priority and we will do our best to fix it as soon as possible. You can follow it status here and vote for it.

    Regards,
    Plamen
    Telerik
    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 the blog feed now.
  13. Abd Elmonem
    Abd Elmonem avatar
    2 posts
    Member since:
    Jul 2014

    Posted 20 Jul 2014 Link to this post

    Hi, 
    I have a problem with timeline, 
    I have a metronic Template with a left sidebar, 
    when I collapse the sidebar, the scheduler moves to the left but the timeline stays on their location in the page (the timeline shifted left) 
  14. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 21 Jul 2014 Link to this post

    Hello Abd,

    We are not aware of such known issue so would you please elaborate a little bit what should be done in order to observe it locally and if it can be replicated on our on-line demo.

    Regards,
    Plamen
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  15. Harish
    Harish avatar
    11 posts
    Member since:
    Mar 2012

    Posted 28 Jun 2015 Link to this post

    Hi,

    I have a problem displaying radscheduler with timeline view. In google chrome the appointment is not displaying properly.
    I am using the latest version (2015.1.401.40).

    <telerik:RadScheduler runat="server" ID="schedulerdemo" DataKeyField="ScheduleId" DataSubjectField="ShowTime_From_To" DataDescriptionField="ShowTime_From_To" DayStartTime="06:00:00" DayEndTime="5:59:00" DataStartField="ScheduleDateTime" DataEndField="ScheduleEndTime" SelectedView="TimelineView" AllowEdit="true" AllowDelete="false" AllowInsert="true" RowHeight="40px"
    Skin="Default" OverflowBehavior="Expand" TimeSlotContextMenuSettings-EnableDefault="true">
                <AdvancedForm Modal="false"></AdvancedForm>
                <MultiDayView UserSelectable="false"></MultiDayView>
                <TimelineView UserSelectable="true" GroupBy="ScreenName" GroupingDirection="Vertical"
                    SlotDuration="00:05:00" EnableExactTimeRendering="true" TimeLabelSpan="12" StartTime="6:00:00"
                    ColumnHeaderDateFormat="HH:mm" NumberOfSlots="288" ShowInsertArea="true"></TimelineView>
                <DayView UserSelectable="false" />
                <WeekView UserSelectable="false" />
                <MonthView UserSelectable="false" />
                <AgendaView UserSelectable="false" />
                <Localization ConfirmDeleteText="Do you want to delete this show?" ConfirmDeleteTitle="Delete" />
    </telerik:RadScheduler>

  16. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 02 Jul 2015 Link to this post

    Hi,

    We have isolated the issue and it seems to be caused by not correct slot calculation by Chrome browser itself. The only workaround that can be recommended is setting the ColumnWidth="7" of RadScheduler that will calculate the correct width and position all the appointments properly.

    Regards,
    Plamen
    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017