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

Binding to DataTable, DataSet, or DataView

RadTimeline can be bound also to a DataTable, DataSet and DataView. The example below shows binding to a DataTable object on the server-side.

To demonstrate that this binding is happening entirely programmatically in the code-behind, the declaration of the following RadTimeline object includes no DataSourceID property or <Items> section:

ASP.NET
<telerik:RadTimeline runat="server" ID="RadTimeline1" 
OnItemDataBound="RadTimeline1_ItemDataBound"></telerik:RadTimeline>

In the Page_Load event handler, you can create and fill the DataTable object, then bind it to the RadTimeline. The DataBind() method should be called after setting the DataSource property.

The binding of the Actions fields in the sample below is done in the Timeline's OnItemDataBound event handler, which allows you to ajust the Actions related data further.

C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        RadTimeline1.DataTitleField = "ShipName";
        RadTimeline1.DataSubtitleField = "ShipCountry";
        RadTimeline1.DataDateField = "OrderDate";
        RadTimeline1.DataDescriptionField = "Freight";
        RadTimeline1.DataSource = OrdersTable();
        RadTimeline1.DataBind();
    }
}
public int OrdersCount = 10;
private DataTable OrderActionsTable()
{
    DataTable dt = new DataTable();

    dt.Columns.Add(new DataColumn("OrderID", typeof(int)));
    dt.Columns.Add(new DataColumn("ActionID", typeof(int)));
    dt.Columns.Add(new DataColumn("Text", typeof(string)));
    dt.Columns.Add(new DataColumn("Url", typeof(string)));

    dt.PrimaryKey = new DataColumn[] { dt.Columns["ActionID"] };
    var rand = new Random();

    for (int i = 0; i < rand.Next(4, 20); i++)
    {
        int index = i + 1;

        DataRow row = dt.NewRow();

        row["ActionID"] = index;
        row["OrderID"] = rand.Next(0, OrdersCount);
        row["Text"] = "Action " + (i + 1);
        row["Url"] = "https://google.com/search?q=action+" + (i + 1);

        dt.Rows.Add(row);
    }

    return dt;
}
private DataTable OrdersTable()
{
    DataTable dt = new DataTable();

    dt.Columns.Add(new DataColumn("OrderID", typeof(int)));
    dt.Columns.Add(new DataColumn("OrderDate", typeof(DateTime)));
    dt.Columns.Add(new DataColumn("Freight", typeof(decimal)));
    dt.Columns.Add(new DataColumn("ShipName", typeof(string)));
    dt.Columns.Add(new DataColumn("ShipCountry", typeof(string)));

    dt.PrimaryKey = new DataColumn[] { dt.Columns["OrderID"] };

    for (int i = 0; i < OrdersCount; i++)
    {
        int index = i + 1;

        DataRow row = dt.NewRow();

        row["OrderID"] = index;
        row["OrderDate"] = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 0, 0, 0).AddHours(index);
        row["Freight"] = index * 0.1 + index * 0.01;
        row["ShipName"] = "Name " + index;
        row["ShipCountry"] = "Country " + index;

        dt.Rows.Add(row);
    }

    return dt;
}

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()
        });
    }
}
Not finding the help you need?
Contact Support