Template Rounded Corner Control

• Download demo code here - 3.12 Kb

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.

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;
   
       [TemplateContainer(typeof(ContentTemplateContainer))]
       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()
   {
       Controls.Clear();
   
       if(this.ContentTemplate != null)
       {
           this._contentTemplateContainer = 
                       new ContentTemplateContainer(this);
           this.ContentTemplate.InstantiateIn(this._contentTemplateContainer);
           this.Controls.Add(this._contentTemplateContainer);
       }
       this.ChildControlsCreated = true;
   }

4. 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);
       }

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)
           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.