New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Programmatic Server-side Binding

RadTimeline fully supports binding to various data sources on the server-side, such as

  • Array
  • IEnumerable
  • DataTable
  • DataSet
  • DataView

This demo demonstrates how to bind RadTimeline to an IEnumerable, at runtime. In the Page_Load event handler, you can create and fill an IEnumerable collection of custom objects, then bind it to the RadTimeline. The DataBind() method should be called after setting the DataSource property.

Below are the databinding properties and methods you can use when binding Timeline:

  • DataSource property - set to an instance of the data source.
  • DataSourceID property - set to the ID of the data source.
  • DataMember property - if the data source is a DataSet and DataMember is a set, then Timeline is bound to the DataTable with the respective name in the DataSet.
  • DataDateField property - field name from the data source to bind to the Date property of the TimelineItem.
  • DataTitleField property - field name from the data source to bind to the Title property of the TimelineItem.
  • DataSubtitleField property - field name from the data source to bind to the Subtitle property of the TimelineItem.
  • DataDescriptionField property - field name from the data source to bind to the Description property of the TimelineItem.
  • DataImagesField property - field name from the data source to bind to the Images collection.
  • DataActionsField property - field name from the data source to bind to the Actions collection.
  • DataKeyNames property - lists the additional fields of the DataSource that will be mapped to each event item.
  • DataBind method - must be called after the aforementioned properties are set when binding at runtime.
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
  • styles.css
<%@ Page CodeFile="DefaultVB.aspx.vb" Language="vb" AutoEventWireup="false" Inherits="Telerik.Web.Examples.Timeline.ProgrammaticBinding.DefaultVB" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container" runat="server">
        <script>
            function OnDataBound(sender, args) {
                sender.expand(sender.get_items()[2]);
            }
        </script>
        <telerik:RadTimeline runat="server" ID="RadTimeline1" CollapsibleEvents="true"
            DataDateField="ReleaseDate" AlternatingMode="true"
            DataTitleField="Title"
            DataKeyNames="Author,Cover,Url">
            <ClientEvents  OnDataBound="OnDataBound"/>
            <EventTemplate>
                <div class="k-card-header">
                    <h5 class="k-card-title">
                        <span class="k-event-title">#= data.Title #</span>
                          <span class="k-event-collapse k-button k-button-icon k-flat"><span class="k-icon k-i-arrow-chevron-right"></span></span>
                    </h5>
                    <h6 class="k-card-subtitle">by <strong>#= data.Author #</strong></h6>
                </div>
                <div class="k-card-body">
                    <div class="k-card-description">
                        <div class="imageContainer">                                   
                            <img src="#= data.Cover #" class="k-card-image">
                        </div>
                    </div>
                </div>

                <div class="k-card-actions">
                    <a class="k-button k-flat k-primary" href="#= data.Url #" target="_blank">Buy on Amazon</a>
                </div>
            </EventTemplate>
            <WebServiceClientDataSource runat="server">
                <Schema>
                    <Model>
                        <telerik:ClientDataSourceModelField DataType="Date" FieldName="ReleaseDate" />
                    </Model>
                </Schema>
                <SortExpressions>
                    <telerik:ClientDataSourceSortExpression FieldName="ReleaseDate" SortOrder="Desc" />
                </SortExpressions>
            </WebServiceClientDataSource>
        </telerik:RadTimeline>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance