Introduction
Scott posted a very exciting server control named rounded corner control, which can dynamically create image so as to make a HTML table corner look round. Since it is not easy for a graphics beginner to create images, such an idea is really cool. However, if we can make it a template control such that its content is not limited to text, this control would be more useful. This article explains how to enhance this control in order to transform it into a template control.
The image above comes from the original control. Text is displayed in the middle. After transforming it into a template control, it can be used together with databinding as shown by the following picture:
In the demo aspx page, I also show some advanced skills regarding nested DataList
and databinding. Please download the code and play with it. Click here to view the online demo.
Enhancement
Thanks Scott for sharing his source code. First of all, you download the rounded corner control. And then you download the code above. Follow the instructions below to merge the code. For reference on how to write a template server control, click here.
- Add template container class in the namespace
PrettyUI
.
public class ContentTemplateContainer : WebControl, INamingContainer
{
public ContentTemplateContainer():base(){}
private RoundedCorners _parent;
public ContentTemplateContainer(RoundedCorners parent)
{
this._parent = parent;
}
public RoundedCorners Container
{
get{return this._parent;}
}
}
- Add the following code to the file RoundedCorners.cs.
private ITemplate _contentTemplate = null;
[TemplateContainer(typeof(ContentTemplateContainer))]
public ITemplate ContentTemplate
{
get{return this._contentTemplate;}
set{this._contentTemplate = value;}
}
public ContentTemplateContainer _contentTemplateContainer;
- Rename method
CreateChildControls
to private
function CreateControlTree
. Override CreateChildControls
again.
protected override void CreateChildControls()
{
Controls.Clear();
if(this.ContentTemplate != null)
{
this._contentTemplateContainer =
new ContentTemplateContainer(this);
this.ContentTemplate.InstantiateIn(this._contentTemplateContainer);
this.Controls.Add(this._contentTemplateContainer);
}
this.ChildControlsCreated = true;
}
- Modify methods
Render
and DataBind
as follows:
public override void DataBind()
{
base.OnDataBinding(System.EventArgs.Empty);
this.CreateChildControls();
this.ChildControlsCreated = true;
base.DataBind ();
}
protected override void Render(HtmlTextWriter writer)
{
CreateControlTree();
this.RenderContents(writer);
}
- Next, we have to redesign the method
CreateControlTree
. Before we clear Controls
collection, we have to save it. The following code achieves this purpose. Put it in the front of the existing code.
ArrayList arrList = new ArrayList();
foreach(Control con in this.Controls)
arrList.Add(con);
Next, replace the middle cell with content template. Add the following code to the end of CreateControlTree
:
TableCell _midCell= box.Rows[1].Cells[1];
if(this.ContentTemplate != null)
{
foreach( Control con in arrList)
{
_midCell.Controls.Add(con);
}
}
Demo
Download the test page above and add the modified PrettyUI project. The following picture resulted from the test page. Click the nested DataList
, the message will show 111, 222 and 333 according to what link you click.
To see live demo, click here.
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.