Height rows in TimelineView

3 posts, 0 answers
  1. Michael
    Michael avatar
    5 posts
    Member since:
    Sep 2013

    Posted 22 Oct 2013 Link to this post

    Hi all,

    I have created a RadScheduler that uses a TimelineView. I have an issue with the height of the rows. Ideally the height of the rows would match the appointments' height, but it seems it has some other height defined which is much higher than the appointment (see screenshot). When I change the RowHeight property I change the height of the appointment, but not of the entire row. I guess it is somehow related to the grouping.
    I feel I've tried changing all height properties I can find, but no success.

    How can I make each row be only as high as the appointment (all appointments have a fixed height, so if I can hardcode the rows to be 25px thats fine)?

    My markup is shown below:

    <div style="clear:both;">
    <telerik:RadScheduler runat="server"
        ID="Scheduler"
        DataStartField="Start"
        DataEndField="End"
        DataSubjectField="CustomText"
        DataKeyField="Id"
         
        ShowResourceHeaders="True"
        AllowDelete="False"
        AllowEdit="False"
        AllowInsert="False"
        SelectedView="TimelineView"
        GroupingDirection="Vertical"
        DayStartTime="08:00:00"
        DayEndTime="19:00:00"
        TimeZoneOffset="02:00:00"
        OverflowBehavior="Expand"
        ReadOnly="True"
        RowHeight="25"
        FirstDayOfWeek="Monday"
        LastDayOfWeek="Sunday"
        AppointmentStyleMode="Simple"
        NumberOfHoveredRows="0"
     
        OnAppointmentDataBound="AppointmentDatabound"
        OnResourceHeaderCreated="ResourceCreated"
         
    >
        <TimelineView
            GroupingDirection="Vertical"
            SlotDuration="7.00:00:00"
            NumberOfSlots="12"
            ColumnHeaderDateFormat="dd/MM"
            UserSelectable="False" >
        </TimelineView>
        <MonthView UserSelectable="False" />
        <DayView UserSelectable="False" />
        <WeekView UserSelectable="False" />
        <AppointmentTemplate>
            <div >
                <label style="color:black; font-size:7pt; display:block; text-align: center;"><%# Eval("Subject") %></label>
            </div>
        </AppointmentTemplate>
    </telerik:RadScheduler>
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 25 Oct 2013 Link to this post

    Hello Michael,

    I tested the scenario that you describe and I could not get any issues. For example in the Day View the height of the appointment row is the same as the height of the appointment row in the Timeline VIew. Please check the attached image files that demonstrate the described appearance. If you need to expand the height of the appointment to match the height of the time slot you can use the ShowInsertArea property of the TimeLineView and set it to false.

    Regards,
    Kate
    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.

  3. Michael
    Michael avatar
    5 posts
    Member since:
    Sep 2013

    Posted 25 Oct 2013 Link to this post

    Hi Kate,

    Thank you for the response. Setting ShowInsertArea to false worked perfectly and gave exactly the result I was looking for. Thank you again!
Back to Top