New to Telerik UI for ASP.NET AJAXStart a free 30-day trial

Expand all nodes when the timeline is loaded

Environment

ProductRadTimeLine for ASP.NET AJAX

Description

Check out the code solution below to learn how to expand all timeline nodes on load.

Solution

The solution shows how to get reference to the underlying Kendo UI timeline object and use its expand method to expand the event-related nodes:

ASP.NET
<script>
    function OnClientLoad(sender, args) {
        var timelineObject = $find("<%=RadTimeline1.ClientID %>"); //the standard script control object
        var kendoTimeline = timelineObject.get_kendoWidget(); //the Kendo widget
        var allEvents = kendoTimeline.element.find(".k-timeline-event");
        kendoTimeline.expand(allEvents);
    }
</script>
<telerik:RadTimeline runat="server" ID="RadTimeline1" 
    Orientation="Vertical" CollapsibleEvents="true"
    EventWidth="250" AlternatingMode="true">
    <ClientEvents OnLoad="OnClientLoad" />
    <Items>
        <telerik:TimelineItem Date="2020/3/14" Title="March Event" Subtitle="14 March 2020" Description="Meeting with John">
            <Actions>
                <telerik:TimelineItemAction Text="Action 1" Url="https://google.com/search?q=action1" />
            </Actions>
        </telerik:TimelineItem>

        <telerik:TimelineItem Date="2020/3/15" Title="March Event" Subtitle="15 March 2020" Description="Meeting with Amy">
            <Actions>
                <telerik:TimelineItemAction Text="Action 2" Url="https://google.com/search?q=action2" />
            </Actions>
        </telerik:TimelineItem>
    </Items>
</telerik:RadTimeline>

See Also