Expand all nodes when the timeline is loaded
Environment
| Product | RadTimeLine 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:
<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>