New to Telerik UI for ASP.NET AJAX? Start 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()
});
}
}