Click here to Skip to main content
Click here to Skip to main content

Template Rounded Corner Control

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

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.

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.

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.

Sample screenshot

License

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

billxie

United States United States
No Biography provided

Comments and Discussions

 
Generalbox.Rows[1].Cells[1]; not found PinmemberTallWebGuy6-Jul-05 10:21 
GeneralUpdating Scott's code Pinmembermangia22-Aug-04 17:49 
GeneralA bug has been fixed! Pinsussbillxie6-Aug-04 14:50 
GeneralI could not bind the DataList to the control PinmemberPhong Nguyen5-Aug-04 14:18 
GeneralRe: I could not bind the DataList to the control Pinmemberbillxie5-Aug-04 16:28 
GeneralRe: I could not bind the DataList to the control Pinsussbillxie5-Aug-04 18:51 
GeneralRe: I could not bind the DataList to the control PinmemberCode Addictive5-Aug-04 19:23 
GeneralRe: I could not bind the DataList to the control Pinmemberbillxie6-Aug-04 8:51 

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.140709.1 | Last Updated 4 Aug 2004
Article Copyright 2004 by billxie
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid