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

Declarative DataSource Binding

Timeline can be bound to all ASP.NET Data Source controls:

  • AccessDataSource
  • ObjectDataSource
  • XmlDataSource
  • SqlDataSource
  • SiteMapDataSource
  • LinqDataSource

Databinding properties and methods used when binding Timeline to a data source:

  • 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.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Title="" Language="C#"  AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Timeline.DeclarativeDataSource.DefaultCS" %>

<%@ 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 size-wide" runat="server">
        <telerik:RadTimeline runat="server" ID="TimelineOrders"
            DataSourceID="SqlDataSourceEmployees"
            DataTitleField="FullName"
            DataSubtitleField="Title"
            Orientation="Vertical"
            DataKeyNames="TitleOfCourtesy,City,Country,Region"
            DataDateField="HireDate"
            OnItemDataBound="TimelineOrders_ItemDataBound">
            <EventTemplate>
                <div class="k-card-header">
                    <h5 class="k-card-title">#=data.TitleOfCourtesy# #=data.FullName#</h5>
                    <h6 class="k-card-subtitle">#=data.Title#</h6>
                </div>
                <div class="k-card-body">
                    <div class="k-card-description">
                    <p>
                        #=data.City#, #=data.Country#
                        #if(data.Region){ #
                        , #=data.Region#
                        #}#
                    </p>
                    # var images = data.images; 
                    if(images && images.length > 0) { #
                        <img src="#=images[0].src#" class="k-card-image">
                    # } #
                    </div>
                </div>
            </EventTemplate>
            <WebServiceClientDataSource>
                <SortExpressions>
                    <telerik:ClientDataSourceSortExpression FieldName="HireDate" SortOrder="Desc" />
                </SortExpressions>
                <Schema>
                    <Model>
                        <telerik:ClientDataSourceModelField DataType="Date" FieldName="HireDate" />
                    </Model>
                </Schema>
            </WebServiceClientDataSource>
        </telerik:RadTimeline>
        <asp:SqlDataSource ID="SqlDataSourceEmployees" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            ProviderName="System.Data.SqlClient" SelectCommand="Select [EmployeeID], [FirstName] + ' ' + [LastName] as [FullName],[LastName], [FirstName], [Title], [TitleOfCourtesy], [BirthDate], [HireDate], [Address], [City], [Region], [PostalCode], [Country], [HomePhone], [Extension], [Photo], [Notes], [ReportsTo], [PhotoPath] from Employees"
            runat="server"></asp:SqlDataSource>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance