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

Getting Started with the Telerik WebForms Timeline

The following tutorial demonstrates how you can add a RadTimeline control populated with declarative items. The end result will be similar to Figure 1:

Figure 1: Basic RadTimeline configuration with static items

Getting Started with the Telerik WebForms Timeline

  1. Add a ScriptManager control on a Web Form.

  2. Add a RadTimeline control to the page, and set its properties:

    • EventTemplate - define your own template for rendering the events data by utilizing the Kendo UI Templates functionality. You can also use the values of custom defined properties in the template.

    • Populate the Items collection with TimelineItem instances and set their properties:

      • Actions - the actions of the item, each ot them could have its own navigation Url
      • Images - the images of the item
    • Set other properties like AlternatingMode, CollapsibleEvents, Height and Width to control its layout and behavior as desired.

    The end result can be similar to the following:

    ASPX
     <telerik:RadTimeline runat="server" ID="RadTimeline1" AlternatingMode="false" CollapsibleEvents="false" Width="600px" Height="420px">
         <EventTemplate>
                  <div class="k-card-header">
                         <h5 class="k-card-title">#= data.title #</h5>
                         <h6 class="k-card-subtitle"><strong>#= kendo.toString(data.date, "MMM d, yyyy")#</strong></h6>
                     </div>
                     <div class="k-card-body">
                         <div class="k-card-description">
                             <p>#= data.description #</p>
                             <div class="imageContainer">
                                 # var imagesCount = data.images? data.images.length:0;
                                  for (var i = 0; i < imagesCount; i++) { #
                                 <img src="#= data.images[i].src #" class="k-card-image">
                                 # } #
                             </div>
                         </div>
                     </div>
    
                 #if(data.attributes && data.attributes.Friends){#
                     <p>I was with #=data.attributes.Friends#</p>
                 #}#
    
                  # var actionsCount = data.actions? data.actions.length:0;
                  if (actionsCount>0){#
                     <div class="k-card-actions">
                         # for (var i = 0; i < actionsCount; i++) { #
                                 <a class="k-button k-flat k-primary" href="#= data.actions[i].url #" target="_blank">#= data.actions[i].text #</a>
                                 # } #
                     </div>
                  #}#
         </EventTemplate>
         <Items>
             <telerik:TimelineItem Date="2020/3/14" Title="March Event" Subtitle="14 March 2020" Description="This is the description of the March event" Friends="Joe and Mary">
                 <Actions>
                     <telerik:TimelineItemAction Text="Action 1" Url="https://google.com/search?q=action1" />
                     <telerik:TimelineItemAction Text="Action 2 No url" />
                 </Actions>
                 <Images>
                     <telerik:TimelineItemImage Src="https://via.placeholder.com/64" />
                     <telerik:TimelineItemImage Src="https://via.placeholder.com/32" />
                 </Images>
             </telerik:TimelineItem>
         </Items>
     </telerik:RadTimeline>
Not finding the help you need?
Contact Support