Click here to Skip to main content
12,750,191 members (37,336 online)
Click here to Skip to main content
Add your own
alternative version


49 bookmarked
Posted 3 Aug 2004

Template Rounded Corner Control

, 3 Aug 2004
Rate this:
Please Sign up or sign in to vote.
Enhance Rounded Corner Control to support template.


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.

Sample screenshot

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:

Sample screenshot

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.


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.

  1. Add template container class in the namespace PrettyUI.
    //Change attribute in RoundedCorner.cs : [ParseChildren(true)]
    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;}
  2. Add the following code to the file RoundedCorners.cs.
    private ITemplate _contentTemplate = null;
    public ITemplate ContentTemplate
        get{return this._contentTemplate;}
        set{this._contentTemplate = value;}
    public ContentTemplateContainer _contentTemplateContainer;
  3. Rename method CreateChildControls to private function CreateControlTree. Override CreateChildControls again.
    protected override void CreateChildControls()
        if(this.ContentTemplate != null)
            this._contentTemplateContainer = 
                        new ContentTemplateContainer(this);
        this.ChildControlsCreated = true;
  4. Modify methods Render and DataBind as follows:
    public override void DataBind()
        this.ChildControlsCreated = true;
        base.DataBind ();
    protected override void Render(HtmlTextWriter writer)
  5. 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)

    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)


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.

Sample screenshot


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

United States United States
No Biography provided

You may also be interested in...


Comments and Discussions

Generalbox.Rows[1].Cells[1]; not found Pin
TallWebGuy6-Jul-05 11:21
memberTallWebGuy6-Jul-05 11:21 
GeneralUpdating Scott's code Pin
mangia22-Aug-04 18:49
membermangia22-Aug-04 18:49 
GeneralA bug has been fixed! Pin
billxie6-Aug-04 15:50
sussbillxie6-Aug-04 15:50 
GeneralI could not bind the DataList to the control Pin
Phong Nguyen5-Aug-04 15:18
memberPhong Nguyen5-Aug-04 15:18 
GeneralRe: I could not bind the DataList to the control Pin
billxie5-Aug-04 17:28
memberbillxie5-Aug-04 17:28 
GeneralRe: I could not bind the DataList to the control Pin
billxie5-Aug-04 19:51
sussbillxie5-Aug-04 19:51 
GeneralRe: I could not bind the DataList to the control Pin
Code Addictive5-Aug-04 20:23
memberCode Addictive5-Aug-04 20:23 
GeneralRe: I could not bind the DataList to the control Pin
billxie6-Aug-04 9:51
memberbillxie6-Aug-04 9:51 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170215.1 | Last Updated 4 Aug 2004
Article Copyright 2004 by billxie
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid