Converting listview to a composite control
- by Paul
The link below shows a listview composite control in its most basic form however I can't seem to extend this to what I'm trying to do.
http://stackoverflow.com/questions/92689/how-to-define-listview-templates-in-code
My listview has 1 tablerow with 2 fields. The first field contains 1 element whilst the second field contains 2 elements as shown below.
<asp:ListView ID="lstArticle" runat="server">
<LayoutTemplate>
<table id="itemPlaceholder" runat="server">
</table>
</LayoutTemplate>
<ItemTemplate>
<div class="ctrlArticleList_rptStandardItem">
<table width="100%">
<tr>
<td valign="top" class="ctrlArticleList_firstColumnWidth">
<a href="<%# GetURL(Container.DataItem) %>">
<%# GetImage(Container.DataItem)%>
</a>
</td>
<td valign="top">
<span class="ctrlArticleList_title">
<a href="<%# GetURL(Container.DataItem) %>">
<%# DataBinder.Eval(Container.DataItem, "Title") %>
</a>
</span>
<span class="ctrlArticleList_date">
<%# convertToShortDate(DataBinder.Eval(Container.DataItem, "ActiveDate"))%>
</span>
<div class="ctrlArticleList_standFirst">
<%# DataBinder.Eval(Container.DataItem, "StandFirst")%>
</div>
</td>
</tr>
</table>
</div>
</ItemTemplate>
So to convert this I have to use the InstantiateIn method of the ITemplate for the layouttemplate and the ItemTemplate. Data is bound to the itemtemplate using the DataBinding event.
My question at the moment is how do I setup the ItemTemplate class and bind the values from the above ListView ItemTemplate. This is what I've managed so far:
private class LayoutTemplate : ITemplate
{
public void InstantiateIn(Control container)
{
var table = new HtmlGenericControl("table") { ID = "itemPlaceholder" };
container.Controls.Add(table);
}
}
private class ItemTemplate : ITemplate
{
public void InstantiateIn(Control container)
{
var tableRow = new HtmlGenericControl("tr");
//first field in row
var tableFieldImage = new HtmlGenericControl("td");
var imageLink = new HtmlGenericControl("a");
imageLink.ID = "imageLink";
tableRow.Controls.Add(imageLink);
// second field in row
var tableFieldTitle = new HtmlGenericControl("td");
var title = new HtmlGenericControl("a");
tableFieldTitle.Controls.Add(title);
tableRow.Controls.Add(tableFieldTitle);
//Bind the data with the controls
tableRow.DataBinding += BindData;
//add the controls to the container
container.Controls.Add(tableRow);
}
public void BindData(object sender, EventArgs e)
{
var container = (HtmlGenericControl)sender;
var dataItem = ((ListViewDataItem)container.NamingContainer).DataItem;
container.Controls.Add(new Literal() { Text = dataItem.ToString() });
}
One of the functions in the ListView just for an example is:
public string GetURL(object objArticle)
{
ArticleItem articleItem = (ArticleItem)objArticle;
Article article = new Article(Guid.Empty, articleItem.ContentVersionID);
return GetArticleURL(article);
}
Summary
What do I need to do to convert the following into a composite control:
1.
<a href="<%# GetURL(Container.DataItem) %>"><%# GetImage(Container.DataItem)%></a>
2.
<a href="<%# GetURL(Container.DataItem) %>">
<%# DataBinder.Eval(Container.DataItem, "Title") %>
</a>
