Creating Dynamic DataList control in C#/ASP.Net

Creating Dynamic DataList control in C#/ASP.Net

In precise, it can be done by implementing ITemplate interface in System.Web.UI namespace.

In this article, I will explain the construction of dynamic DataList control by building dynamic template columns. Moving forward, I will create dynamic template columns for DataList control specific to the resultset returned by the stored procedure. Template columns for datalist can be created by implementing the interface ITemplate in System.Web.UI namespace. Refer the code listing 1 and class diagram in figure 2 for ITemplate interface

Steps for creating Template class

1. Create a Template class (MyTemplate class, Listing 2 –TemplateClass for DataList) that implements ITemplate interface.

2. Create a constructor for the class that takes ListItemType as argument so that we can determine whether we are constructing HeaderTemplate or ItemTemplate or FooterTemplate. Also we can make it through by exposing ListItemType as public property.

3. Implement the InstantiateIn(Control container) method and construct the corresponding template from the input got from the constructor. Refer the code (Listing 2 –TemplateClass for DataList) for clear understanding.

4. For data binding and child control that requires data binding, create a data binding event to fill the data with the control. This event will be raised after the template items are created with all its controls.

The above 4 steps have been implemented in the code, Listing 2 –TemplateClass for DataList

Constructing Dynamic DataList

The DataList will have Header template with Category Name displayed. For example, if it is displaying ASP.Net article the category name will be ASP.Net. The articles will be displayed in the item template i.e. for every article in the item template we will display the title of the article as a hyperlink that links to the original URL of the article with a description and author name. The footer will show the number of articles present in this category.

protected void Page_Load(object sender, EventArgs e)

{
DataList dl1 = new
DataList();
DataTable dt = new
DataTable();
dt.Columns.Add("Links");
DataRow dr;
for (int i = 1; i < 20; i++)
{
dr = dt.NewRow();
dr["Links"] = "A" + i;
dt.Rows.Add(dr);
dt.AcceptChanges();
}
dl1.RepeatDirection = RepeatDirection.Horizontal;
dl1.RepeatColumns = 10;
if (dt.Rows.Count > 0)
{
dl1.HeaderTemplate = new MyTemplate(ListItemType.Header);
dl1.FooterTemplate = new MyTemplate(ListItemType.Footer);
dl1.ItemTemplate = new MyTemplate(ListItemType.Item);
dl1.SelectedItemTemplate = new MyTemplate(ListItemType.SelectedItem);
dl1.Width = Unit.Percentage(100);
dl1.GridLines = GridLines.Both;
dl1.DataSource = dt;
dl1.DataBind();
pnl.Controls.Add(dl1);
}
}

The MyTemPlage Class – This act as the content data binding

public class MyTemplate : ITemplate

{

ListItemType ItemType;
public MyTemplate(ListItemType _ItemType)
{
ItemType = _ItemType;
}
//This is the implentation fo the ITemplate interface
#region ITemplate Members
public void InstantiateIn(Control container)
{
Literal lc = new
Literal();
LinkButton lb = new
LinkButton();
//Determining which type of ListItem has come header or item etc.
switch (ItemType)
{
case ListItemType.Header:
lc.Text = "<div id=\"nifty\" class=\"PostCategory\">Header</div>";
break;
case
ListItemType.Item:
lc.DataBinding += new EventHandler(TemplateControl_DataBinding);
lb.DataBinding += new EventHandler(lb_DataBinding);
break;
case
ListItemType.SelectedItem:
lb.Text = "<div style='background-color:Red'><A href=DataListTest.aspx >Test Link</a></div> ";
break;
case
ListItemType.Footer:
lc.Text = "<div style=\"text-align:right\">Footer</div>";
break;
}
//container.Controls.Add(lc);
//Adding to the container - here container is the DataList
container.Controls.Add(lb);
}
void lb_DataBinding(object sender, EventArgs e)
{
LinkButton lb = (LinkButton)sender;
//Thru lb.NamingContainer the DataList is being determined
DataListItem container = (DataListItem)lb.NamingContainer;
lb.Text = "<div style='background-color:#FFFFCC'><A href=DataListTest.aspx?Val=" + DataBinder.Eval(container.DataItem, "Links") + ">" + DataBinder.Eval(container.DataItem, "Links") + " </a></div> ";
lb.CommandName = "Select";
}
private void TemplateControl_DataBinding(object sender, System.EventArgs e)
{
Literal lc = (Literal)sender;
DataListItem container = (DataListItem)lc.NamingContainer;
lc.Text += "<div style='background-color:#FFFFCC'><A href=" + DataBinder.Eval(container.DataItem, "Links") + ">" + DataBinder.Eval(container.DataItem, "Links") + " </a></div> ";
}
#endregion
}

...HaPpY CoDiNg

Partha (Aurum)