TimelineView Horizontal Scrolling

[Paige Cook]

Is it possible to enable horizontal scrolling of the RadScheduler in TimelineView. For example, I would like to setup the TimelineView with 24 slots each with a 1 hour duration and then be able to set the width property on the RadScheduler such that the first 10 hours appear and the user would need to scroll to see the remaining 14 hours in the day.

I tried to put the RadScheduler inside of a parent div with a specified width (900px) and set the width of the RadScheduler wider (1400px) , but the Timeline table was not contained within the parent div. Is it possible to do this?

Thanks.

[T. Tsonev]

Hello Paige,

Unfortunately, horizontal scrolling is not supported "out of the box" just yet. Regarding the workaround with the containing div, I believe that you need to add overflow-x:scroll to the div style:

<div style="width: 400px; overflow-x: scroll;">...</div>

Sincerely yours,
Tsvetomir Tsonev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Paige Cook]

Thanks Tsvetomir,

However, I can only make this work within your Live Demos. If I add the style to the div that surrounds the RadScheduler control on the Timeline example (Live Demos\Scheduler\Examples\TimelineView\DefaultCs.aspx) It works as expected. If I apply this to another page with only a RadScheduler it does not work. For example I used the DragAndDrop demo app from this post and when I wrapped a div with a style="width:100px; overflow-x:scroll;" property around the control it did not work.

I cannot seem to figure out what is the difference. Any help would be appreciated.

Thanks.

[T. Tsonev]

Hi,

This is actually a bug in IE. The div needs to be positioned to work around this. For example:

<div style="float: left;">
    <div style="width:200px; overflow-x:scroll; position: relative;">
        <telerik:RadScheduler ID="RadScheduler1" runat="server" ProviderName="TestSchedulerProvider" Width="700px">
        </telerik:RadScheduler>
    </div>
</div>

Best wishes,
Tsvetomir Tsonev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Paige Cook]

Positioning the div worked. Thank You.

[Paige Cook]

Just noticed that this does not work in IE7 or FF3. Works just fine in IE6 however, which is what I was originally using.

- Paige

[Peter]

Hi Paige,

That's strange. The suggested approach worked as expected on our side (please, see the attached screenshot). What could we be missing?

Regards,
Peter
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Paige Cook]

Peter,

I do not see a screen shot attachment to your last message. But I will try this out with one of the live demo pages, as I am guessing it probably something related to the markup I am using on my current test page.

Thanks.

[Peter]

Apologies for the missing screenshot. It should be attached now. Also, let us know how your testing goes with this case.


Regards,
Peter
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Paige Cook]

Sorry for the long delay. I was able to get this working with IE7 and FF. It was an issue with my markup.

Thank you for the assistance.

[Joe]

I cannot find a way to implement horizontal scrolling in timeline view. is this possible yet?

[Peter]

Hi Joe,

Try setting the ColumngWidth property (in pixels) and let me know if this helps.

Best wishes,
Peter
the Telerik team