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

Binding to ASP DataSource components

RadTimeline supports binding to all ASP.NET 2.0 DataSource components, including:

To bind to a DataSource component, all you need to do is set the DataSourceID property of RadTimeline to the ID of the DataSource component. You should also set the DataTextField and DataValueField properties of RadTimeline to map the Date, Title, Subtitle, Description, Actions and Images values of the items to the respective columns / fields from the data source.

If you need to map additional columns from the data source to properties of RadTimeline items, you can use the ItemDataBound event. The event arguments passed to the event, e.Item and e.Item.DataItem, hold the instance of RadTimeline item being bound and the DataItem to which it is bound. You can map a property from the DataItem to the corresponding property of RadTimeline item. Be sure to cast the DataItem object to the proper data type first.

C#
protected void RadTimeline1_ItemDataBound(object sender, RadTimelineItemEventArgs e)
{
    var dataItem = e.Item.DataItem as DataRowView;
    var orderID = dataItem["OrderID"].ToString();
    e.Item.Actions.Add(new TimelineItemAction()
    {
        Text = "Go to order",
        Url = "https://google.com/search?q=" + orderID
    });
        
    DataRow[] orderActions = OrderActionsTable().Select("OrderID = " + orderID);
    foreach (DataRow row in orderActions)
    {
        e.Item.Actions.Add(new TimelineItemAction()
        {
            Text = row["Text"].ToString(),
            Url = row["Url"].ToString()
        });
    }
}

SqlDataSource

ASP.NET
<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>
<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>

XmlDataSource

ASP.NET
<telerik:RadTimeline runat="server" ID="RadTimeline1" DataSourceID="XmlDataSource1"
    OnItemDataBound="RadTimeline1_ItemDataBound"
    DataMember="Appointment"
    DataDateField="FoundedDate"
    DataTitleField="CompanyName"
    DataSubtitleField="ContactName">
</telerik:RadTimeline>

<asp:XmlDataSource runat="server" ID="XmlDataSource1" 
    DataFile="~/App_Data/XmlDataSourceExampleTemp.xml"></asp:XmlDataSource>
	

The data fields of the used XmlDataSource should be Attributes instead of child node elements. The XML file should have the format shown below:

XML
<Customers>
	<Customer CustomerID="0" FoundedDate="2010-05-01T08:00Z" CompanyName="Alfreds Futterkiste" ContactName="Maria Anders">
		<Actions>
		  <Action Url="https://google.com/search?q=Alfeds+Futterkiste" Text="Google it"></Action>
		</Actions>
	</Customer>
	<Customer CustomerID="1" FoundedDate="2010-05-02T08:00Z" CompanyName="Antonio Moreno Taqueria" ContactName="Ana Trujillo"></Customer>
	<!-- Wrong syntax: -->
	<!-- <Customer  FoundedDate="2010-05-02T08:00Z"> -->
		<!-- <FoundedDate>2010-05-02T08:00Z</FoundedDate> -->
	<!-- </Customer> -->
  </Customers>
	

ObjectDataSource

ASP.NET
<telerik:RadTimeline runat="server" ID="RadTimeline1"
    DataActionsField="Actions"
    DataImagesField="Images"
    DataTitleField="Title"
    DataSubtitleField="Subtitle"
    DataDateField="Date"
    DataDescriptionField="Description"
    DataSourceID="ObjectDataSource1">
</telerik:RadTimeline>

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="AllTimelineEvents"
    TypeName="TimelineEventsObjectDataSource"></asp:ObjectDataSource>
C#
public class MyTimelineItem
{
    public string Description { get; set; }
    public string Title { get; set; }
    public string Subtitle { get; set; }
    public DateTime Date { get; set; }

    public List<MyAction> Actions { get; set; }
    public List<MyImage> Images { get; set; }
}
public class MyAction
{
    public string Text { get; set; }
    public string Url { get; set; }
}
public class MyImage
{
    public string Src { get; set; }
}

LinqDataSource

You can also handle the LinqDataSource OnSelecting event in order to get your real data and set it as e.Result value.

ASP.NET
<telerik:RadTimeline runat="server" ID="RadTimeline1" DataSourceID="LinqDataSource1"
    DataActionsField="Actions"
    DataImagesField="Images"
    DataTitleField="Title"
    DataSubtitleField="Subtitle"
    DataDateField="Date"
    DataDescriptionField="Description">
</telerik:RadTimeline>

<asp:LinqDataSource runat="server" ID="LinqDataSource1" OnSelecting="LinqDataSource1_Selecting"></asp:LinqDataSource>
C#
protected void LinqDataSource1_Selecting(object sender, LinqDataSourceSelectEventArgs e)
{
    e.Result = GetTimelineEvents();
}

public IQueryable<MyTimelineItem> GetTimelineEvents()
{
    var ds = new List<MyTimelineItem>();
    for (int i = 1; i <=5 ; i++)
    {
        ds.Add(new MyTimelineItem()
        {
            Title = "My title "+i,
            Subtitle = "My subtitle "+i,
            Date = DateTime.Now.AddDays(i),
            Description = "My item description for item #"+i,
            Images = new List<MyImage>()
            {
                new MyImage(){ Src="https://via.placeholder.com/64" },
                new MyImage(){ Src="https://via.placeholder.com/32x64" },
            },
            Actions = new List<MyAction>()
            {
                new MyAction(){ Text = "Go here", Url="https://www.google.com/search?q=here+"+i},
                new MyAction(){ Text = "Go there", Url="https://www.google.com/search?q=there+"+i}
            }
        });
    }

    return ds.AsQueryable();
}
public class MyTimelineItem
{
    public string Description { get; set; }
    public string Title { get; set; }
    public string Subtitle { get; set; }
    public DateTime Date { get; set; }

    public List<MyAction> Actions { get; set; }
    public List<MyImage> Images { get; set; }
}
public class MyAction
{
    public string Text { get; set; }
    public string Url { get; set; }
}
public class MyImage
{
    public string Src { get; set; }
}

See Also