Click here to Skip to main content
13,293,698 members (70,013 online)
Click here to Skip to main content
Add your own
alternative version


39 bookmarked
Posted 29 Nov 2008

Create Composite Control using Ajax Toolkit Controls

, 29 Nov 2008
Rate this:
Please Sign up or sign in to vote.
How to create a Composite Control containing the features of Ajax ResizableControlExtender, CollapsiblePanelExtender and DragPanelExtender


Ajax Control Toolkit allows the developer to create Web applications that can update data on the Web page without a complete reload of the page, and contain many controls with very interesting features: popup panels, resizable controls, floating controls and others.

Often you want a control with some features of some other controls, so you can achieve the goal of joining more controls in a single control as CompositeControl.
Composite Controls are controls that combine multiple controls together to form a new reusable control. For example, I want to create a control container that makes resizable, collapsible, draggable all guest controls as IFrame or others.
ResizableControlExtender, CollapsiblePanelextender, DragPanelExtender controls extend their own features to the Panel written on TargetControlID property so you can create a mix like this:

AjaxCompositePanel Control

AjaxCompositePanel Control


This is a graphic representation of the control...

AjaxCompositePanel structure

... and this is the code, built in the page, of the control described in the bitmap above.

<%--====== StyleSheet class needed by the control build in page ====--%>

<asp:Panel ID="PanelContainer" runat="server"  Visible="false" 

	style="Left:200px; Position:absolute; Top:100px;">
	<%-- PANEL CLOSE --%>
	<asp:Panel ID="PanelClose" runat="server" Height="20px">
		<asp:ImageButton ID="ImageButton1" 

		runat="server" style="cursor: hand"

		ImageAlign="Right" Height="100%" ImageUrl="~/images/close.gif"

		onclick="ImageButton1_Click" />

	<%-- PANEL HEADER --%>
	<asp:Panel ID="PanelHeader" runat="server" style="cursor: hand" Height="20px"


	<%-- PANEL BODY --%>
	<asp:Panel ID="PanelBody" runat="server" BorderStyle="Solid" BorderWidth="1px">
		<iframe  id="ieframe" scrolling="auto" runat="server"



		</iframe >

<%--====== AjaxPanelExtender Controls ============================--%>
<%--====== Client side script needed to the behavior ====--%>

Now we will convert it in a redistributable Composite Control.

Using the Code

In order to test the control build in the page, set AjaxCompositePanelBuildInPage.aspx as the project start page.
In order to test the composite control, set AjaxCompositePanelBuildInControl.aspx as the project start page.

Points of Interest

A composite control class AjaxCompositePanel inside AjaxCompositePanel.cs file inherits from the CompositeControl class, and has some class attributes...

//This attribute gives to the control added on Visual Studio Toolbox 
//the icon of other control,View control in this case.
//This attribute sets a control name displayed on the toolbox of Visual Studio.
[ToolboxData("<{0}:AjaxCompositePanel runat="server">")]
//This attribute sets a design-time rendering support class.
public class AjaxCompositePanel : CompositeControl

... and some method attributes for design-time behaviors inside Visual Studio properties window:

//Visible from Visual Studio properties windows.
//Property category
//Property default value displayed on properties windows
//Property description
[Description("Url of header image.")]
//Support to design time editors as select files URL or select color.
public string BarImageUrl

The main method of Custom Control is method named CreateChildControls which can be overridden, that calls CreateControlsHierarchy() within which a tree structure of the child control is built and added to the controls collection:

protected virtual void CreateControlsHierarchy()
    //Create and set PanelContainer.
    Panel DragebleResizablePanelContainer = new Panel();
    DragebleResizablePanelContainer.ID = "DragebleResizablePanelContainer";
    DragebleResizablePanelContainer.Visible = false;
    DragebleResizablePanelContainer.Attributes["style"] = "float: right";

    //Create and set PanelHeader.
    Panel DrageblePanelHeader = new Panel();
    DrageblePanelHeader.ID = "DrageblePanelHeader";
    DrageblePanelHeader.Attributes["style"] = "cursor: hand";

    //Adds PanelHeader as child to the PanelContainer controls collection.

    //Adds PanelContainer to the controls collection of composite control.

Composite Control client side behavior will need JavaScript methods that will be added to the page...

//Adds a script block to the top of the page.
if (!Page.ClientScript.IsClientScriptBlockRegistered("clientScript"))
    System.Text.StringBuilder sb = new System.Text.StringBuilder();

    sb.Append("<script type="\"text/javascript\""></script>");
	"clientScript", sb.ToString(),false);
//Adds a script block into the page that executes when the page 
//finishes loading but before the page's onload event is raised.
if (!Page.ClientScript.IsStartupScriptRegistered("repositioningScript"))
    //"clientScript", sb.ToString(), false);

... and also a stylesheet class used for Ajax Panel Extender will be added to the page:

protected virtual void CreateControlsHierarchy()
{        ...
	//Adds to the page header a stylesheet class
    this.Page.Header.StyleSheet.CreateStyleRule(new ResizingIFrameCssClass(), 
	this.Page, ".resizingIFrame");

// Stylesheet class
class ResizingIFrameCssClass : Style
    protected override void FillStyleAttributes
	(CssStyleCollection attributes, IUrlResolutionService urlResolver)
        base.FillStyleAttributes(attributes, urlResolver);
        attributes[HtmlTextWriterStyle.Padding] = "0px";
        attributes[HtmlTextWriterStyle.BorderStyle] = "solid";
        attributes[HtmlTextWriterStyle.BorderWidth] = "2px";
        attributes[HtmlTextWriterStyle.BorderColor] = "#B4D35D";

At the end, only one word on Design-Time rendering of the control.
Inside AjaxCompositePanelDesigner.cs, you can see the AjaxCompositePanelDesigner class that inherits from the CompositeControlDesigner class, and GetDesignTimeHtml method which can be overridden that retrieves the HTML markup used to render the control at design time.


  • 28th November, 2008: Initial version


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer
Italy Italy
No Biography provided

You may also be interested in...


Comments and Discussions

GeneralMy vote of 5 Pin
Ali Al Omairi(Abu AlHassan)28-Jan-11 4:38
memberAli Al Omairi(Abu AlHassan)28-Jan-11 4:38 
GeneralThanks Pin
muhamd yusuf15-Mar-10 9:30
membermuhamd yusuf15-Mar-10 9:30 
GeneralCode makes up for the article Pin
bulg10-Feb-10 10:37
memberbulg10-Feb-10 10:37 

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
Web02 | 2.8.171207.1 | Last Updated 29 Nov 2008
Article Copyright 2008 by msp.netdev
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid