Timeline View RowHeight?

8 posts, 0 answers
  1. G C
    G C avatar
    6 posts
    Member since:
    Mar 2010

    Posted 26 Mar 2010 Link to this post

    Hi,

    I am using the timeline view to schedule jobs to our users. I need to be able to show the full subject name which can be rather long. I have setup some custom CSS  classes that get applied to appointments with long names. (This can be seen in LongApName.png)

    These appointments look fine, until you put two on the same day. Then they can overlap.

    In thisTimeline Demo the "Margaret Morrison Main Room" Row has a height of 75px, Where is this set? I believe this could be a workaround to my real problem.

    Cheers, Grant Cannan
  2. G C
    G C avatar
    6 posts
    Member since:
    Mar 2010

    Posted 28 Mar 2010 Link to this post

    I have attached the file which shows the appointments overlapping.

    I know this can avoided by using the rowheight property when initialising RadScheduler, but this creates a large gap for the smaller appointments.

    Anyone know of any solutions to this problem?  
  3. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 31 Mar 2010 Link to this post

    Hi,

    Thank you for contacting us.

    Can you provide these custom CSS classes you're using or maybe a whole sample project with this issue isolated? A live URL may also help if that's easier for you. Thank you in advance for your trouble.

    Greetings,
    Kamen Bundev
    the Telerik team

    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 Public Issue Tracking system and vote to affect the priority of the items.
  4. G C
    G C avatar
    6 posts
    Member since:
    Mar 2010

    Posted 01 Apr 2010 Link to this post

    Hi, the css class looks like this:

    .RadScheduler .rsWrap .rsApt.Custom    
       {   
          height45px !important;   
          white-space:normal
          color:White; 
          font-size10px
       } 


  5. T. Tsonev
    Admin
    T. Tsonev avatar
    2817 posts

    Posted 06 Apr 2010 Link to this post

    Hi,

    I understand what you're trying to achieve. We can try something similar to this KB.

    .RadScheduler .rsTimelineView .rsWrap,
    .RadScheduler .rsTimelineView .rsApt,
    .RadScheduler .rsTimelineView .rsAptOut,
    .RadScheduler .rsTimelineView .rsAptIn,
    .RadScheduler .rsTimelineView .rsAptMid,
    .RadScheduler .rsTimelineView .rsAptContent
    {
            position: static !important;
            height: auto !important;
    }
    .RadScheduler .rsTimelineView .rsWrap
    {
            overflow: hidden;
            font-size: 0;
            line-height: 0;
    }
    .RadScheduler .rsTimelineView .rsLastWrap
    {
            height: 16px !important;
    }
    .RadScheduler .rsTimelineView .rsAptContent
    {
            position: relative !important;
            border-top: 0;
            border-bottom: 0;
            left: 0;
            top: 0;
    }
    * html .RadScheduler .rsTimelineView .rsAptIn
    {
            border-width: 0 1px;
            top: 0;
        margin-left: -1px;
        margin-right: -1px;
    }
    * html .RadScheduler .rsTimelineView .rsAptMid
    {
            top: 0;
            left: 1px;
            margin: 0 1px;
            border-width: 1px 0;
    }
    .RadScheduler .rsTimelineView .rsAptResize
    {
            display: none;
    }

    There are limitations to this approach - you can't have appointments that span multiple days. If this is unacceptable you'll have to use RowHeight.

    I hope this helps.

    Greetings,
    Tsvetomir Tsonev
    the Telerik team

    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 Public Issue Tracking system and vote to affect the priority of the items.
  6. Andy
    Andy avatar
    31 posts
    Member since:
    Nov 2010

    Posted 12 Jul 2012 Link to this post

    I have tried the solution provided and it does work to automatically increase the height of the appointment in the timeline view.  The problem is that the vertical scrolling on the timeline view doesn't allow me to scroll down to see additional appointments.  It looks to me that the scroll area height is set by mutipliying the rowheight (20px in my case) time the number of appointments (15).  Attached is a screenshot and below is the tag info from my aspx.  As a side issue, the style for the bullet list in the appointment templete does not show properly,  the bullets don't display.

                <telerik:RadScheduler ID="rsVisitScheduler" runat="server" DataEndField="End"
                        DataKeyField="ID" DataStartField="Start" DataSubjectField="Subject"
                        Skin="Windows7" AllowInsert="false"
                        OnClientAppointmentClick="rsVisitScheduler_AppointmentClick"
                        OnClientAppointmentDeleting="rsVisitScheduler_AppointmentsDeleting"
                        OnClientAppointmentMoving="rsVisitScheduler_AppointmentsMoving"
                        OnClientAppointmentResizing="rsVisitScheduler_AppointmentsResizing"
                        OnAppointmentCreated="rsVisitScheduler_AppointmentCreated"
                        OnAppointmentDatabound="rsVisitScheduler_AppointmentDataBound"
                        OnAppointmentsPopulating="rsVisitScheduler_AppointmentsPopulating"
                        OnResourcesPopulating="rsVisitScheduler_ResourcesPopulating"
                        OnFormCreating="rsVisitScheduler_OnFormCreating"   
                        OnTimeSlotCreated="rsVisitScheduler_OnTimeSlotCreated"              
                        ProviderName="VisitSchedulerProvider" RowHeight="20px" Height="635px"
                        MinutesPerRow="15" TimeLabelRowSpan="4">
                        <AppointmentTemplate>
                            <div class="rsAptSubject" style=" overflow:scroll !important;">
                                <%# Eval("Subject") %>
                                <br/>Programs:<asp:BulletedList ID="blPrograms" runat="server" BulletStyle="Circle">
                                </asp:BulletedList>
                               
                            </div>
                        </AppointmentTemplate>                
                        <TimelineView NumberOfSlots="1" />
                        <DayView EnableExactTimeRendering="True" />                 
                        <MonthView VisibleAppointmentsPerDay="0" />
                </telerik:RadScheduler>
  7. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 17 Jul 2012 Link to this post

    Hi Andy,

    In general, workarounds that aim to achieve auto height for the appointments based on the length of their Subject are fragile and have limitations. In your case you can try setting OverFlowBehavior="Expand" for RadScheduler. However, I recommend you consider increasing the value set for the RowHeight property or use RadToolTip to display the entire subject.


    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.
  8. Andy
    Andy avatar
    31 posts
    Member since:
    Nov 2010

    Posted 17 Jul 2012 Link to this post

    For now I have increased the row height to a large value when the timeline view is shown.  This makes the scrolling area much bigger than it needs to be, but at least it will scroll down so I can see all rows.
Back to Top