This is a migrated thread and some comments may be shown as answers.

Timeline View RowHeight?

7 Answers 209 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
G C
Top achievements
Rank 1
G C asked on 26 Mar 2010, 05:31 AM
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

7 Answers, 1 is accepted

Sort by
0
G C
Top achievements
Rank 1
answered on 29 Mar 2010, 01:24 AM
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?  
0
Kamen Bundev
Telerik team
answered on 31 Mar 2010, 07:49 PM
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.
0
G C
Top achievements
Rank 1
answered on 01 Apr 2010, 07:26 AM
Hi, the css class looks like this:

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


0
T. Tsonev
Telerik team
answered on 06 Apr 2010, 05:51 PM
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.
0
Andy
Top achievements
Rank 1
answered on 12 Jul 2012, 04:26 PM
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>
0
Peter
Telerik team
answered on 17 Jul 2012, 11:34 AM
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.
0
Andy
Top achievements
Rank 1
answered on 17 Jul 2012, 02:09 PM
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.
Tags
Scheduler
Asked by
G C
Top achievements
Rank 1
Answers by
G C
Top achievements
Rank 1
Kamen Bundev
Telerik team
T. Tsonev
Telerik team
Andy
Top achievements
Rank 1
Peter
Telerik team
Share this question
or