Timeline View RowHeight?

[G C]

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

[G C]

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?  

[Kamen Bundev]

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.

[G C]

Hi, the css class looks like this:

.RadScheduler .rsWrap .rsApt.Custom
   {
      height: 45px !important;
     white-space:normal;
      color:White;
      font-size: 10px;
   }

[T. Tsonev]

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.

[Andy]

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>

[Peter]

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

[Andy]

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.