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

Panel Curve Container - An ASP.NET Custom Control Nugget

, 15 Nov 2005 CPOL
Rate this:
Please Sign up or sign in to vote.
An ASP.NET custom panel control which is curved on the corners, could be minimized/maximized, displayed as a nugget, and can work as a container for anything.

Introduction

I wanted to have a control which could work as a container and be used similar to System.Web.UI.WebControls.Panel <ASP:PANEL>, which is curved at corners and at the same time has its own custom header text.

Process

I searched the internet a lot to find control similar to the Panel control but never got any help. So I decided to make one on my own. One way to do this was to create a user control which forms the curve and ask the developer to pass the values to this control, which was making the entire process too complex (creating too many user controls was a tedious job and would be difficult to manage), at the same I didn't want to place every code of mine inside a user control just for the sake of forming boundaries. Finally, one of the MSDN examples talked about such an implementation, but then it also had a flaw, it would throw an error if the control is used inside a user control or a DataGrid because the IDs are prefixed to the child control in this case. Then, I created my own control and tested it successfully inside a user control, a DataGrid, a nested DataGrid, and in many other ways, and it always worked.

Features

The following features are available for this control:

  • Curved tab header.
  • Minimize icon to minimize the tab.
  • Print icon to print the selected nugget.
  • You can customize the header text displayed in the header.
  • You can change the background color of the top tab or the bottom body.
  • You can use a user control, custom control or any web control inside the container and still you can access those controls directly in your code-behind.

    In the code-behind:

    protected TextBox txt;

    In the aspx:

    <Tittle:PanelCurveControl ...>
    <asp:textbox id=txt ... /> 
    </Tittle:PanelCurveControl>
  • This control will maintain its minimize/maximize state during postback.
  • This control can be used inside a DataGrid or a User Control (where the IDs of the parent control are prefixed to that of the child control), without any issue.

How to use it

If you have ever used <asp:panel>, then you can use this custom control as well:

<Tittle:PanelCurveControl ID=
 "Panelcurvecontrol1" runat="server" Title="My first Panel" >
    Name:<br>
       <asp:textbox id=txt runat="server" />            
</Tittle:PanelCurveControl>

The above would be rendered as:

Attributes

  • Expandable: Makes the control expandable on demand. Default: true.
  • RenderInBox: Renders the contents in the box. Default false (used only if Expandable is false). Making Expandable true makes the tab disappear, but if Expandable is false:
    • RenderInBox being "true" shows the border of the container.
    • RenderInBox being "false" shows no borders.
  • Closed: Whether the contents of the expandable panel must be visible.
  • Title: The text displayed as the caption of the expandable panel.
  • Margin: Margin to use if the panel is expandable.
  • HasMinimize: Whether to show minimize icon on screen or not.
  • HasPrint: Whether to show Print icon on screen or not.
  • DefaultMinimize: Render it minimized by default or not.
  • BodyBackColor: Content back color.
  • TabBackColor: Top tab back color.
  • HeaderTextColor: Top header text color.

Some Technical Details

I've inherited this control from ASP:Panel so that it can be used in the same manner as Panel. I have not deliberately inherited it from INamingContainer, and the reason behind this is that I didn't want it to prefix the parent ID before every child control ID (it gives a problem if the control is used inside a grid or a user control). A hidden field is used which retains its minimize/maximize state during postbacks. I fixed a hidden field ID so that it maintains the state in a normal page and inside any control.

if ( this.UniqueID.IndexOf(":") >=0 )
    hdn.ID = this.ID + "_hdnMinimizeState"; 
    //Within some user control or grid 
    //E.g. client id will be in this case 
    //"UserControl1__ctl0_tblCrvPnlControl2_hdnMinimizeState"
else
    hdn.ID = this.UniqueID + "_hdnMinimizeState"; 
    //Straight on aspx page, 
    //E.g. client id will be in this case 
    //"tblCrvPnlControl1_hdnMinimizeState"

PanelCurveControl.cs

using System;
using System.ComponentModel;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Drawing;
using System.IO;
using System.Collections.Specialized;

[assembly: TagPrefix ("Tittle.Controls" , "Tittle") ]
namespace Tittle.Controls
{    
    #region Table Curve Panel Control (Expandable)
    /// <summary>
    /// Renders a tab control on page. i.e. A tabbed 
    /// image on top of the table and you can have ur own 
    /// contents in between that.
    /// <example>
    /// <code>
    /// <Tittle:PanelCurveControl runat="server" 
    /// Expandable="true" 
    /// Width="500px"
    /// Margin="10"
    /// Title="Employees">
    ///        <table border=1>
    ///        <tr><td>test1</td><td>test2</td></tr>
    ///        <tr><td>test3</td><td>test4</td></tr>
    ///        </table>
    /// </Tittle:PanelCurveControl>    
    /// </CODE>
    /// </EXAMPLE>
    /// <AUTHOR>Tittle Joseph (tittlejoseph@yahoo.com) India.</AUTHOR>
    /// <URL>http://www.codeproject.com/PanelCurveContainer/</URL>
    /// </SUMMARY>
    [ToolboxData(
     "<{0}:PanelCurveControl runat=
        "server" Expandable='true' id='tblCrvPnl' Width='200px'>")]
    public class PanelCurveControl : Panel, IPostBackDataHandler 
    {
        private string skinName             = ""; //"/BasicNuggetSkin"; 
        private bool hasMinimize            = true;
        private bool hasPrint               = true;        
        private string imgPath;
        private Color bodyBackColor = Color.Transparent;
        private string tabBackColor = "#99CCFF";
        private string headerTextColor = "black";
        
        public PanelCurveControl() : base()
        {            
           Expandable = true;
           RenderInBox = false;
           Title = "Panel";
           Font.Name = "verdana";
           Font.Size = FontUnit.Point(10);
           Margin = 2;
           Closed = false;                        
           ForeColor = Color.Black;
           BorderColor = Color.DodgerBlue;            
           imgPath = 
             HttpContext.Current.Request.ApplicationPath + 
                                     skinName + "/Images/";
           //imgPath = "/Images/";
        }
        
        /// <SUMMARY>
        /// Makes the control expandable on demand,  
        /// Default: true
        /// </SUMMARY>
        [Browsable(true),
        Category("Validation"),
        DefaultValue("true"),
        Description ("Makes the control expandable on demand.") ] 
        public bool Expandable
        {
           get {return Convert.ToBoolean(ViewState["Expandable"]);}
           set {ViewState["Expandable"] = value;}
        }        

        /// <SUMMARY>
        /// Render the contents in the box 
        /// (used only if Expandable is false),
        /// 
        /// Expandable true makes tab disappear, 
        /// but if Expandable is false 
        ///        RenderInBox is "true" shows border of container.
        ///        RenderInBox is "false" no border appears.
        /// Default: false
        /// </SUMMARY>
        [Browsable(true),
        Category("Misc"),
        DefaultValue("false"),
        Description ("Render the contents in the box.") ]
        public bool RenderInBox
        {
            get {return Convert.ToBoolean(ViewState["RenderInBox"]);}
            set {ViewState["RenderInBox"] = value;}
        }
        
        /// <SUMMARY>
        /// Whether the contents of the expandable panel must be visible 
        /// Equivalent to "DefaultMinimize" attribute
        /// Default: false
        /// </SUMMARY>
        [Browsable(true),
        Category("Validation"),
        DefaultValue("false"),
        Description ("Whether the contents of the " + 
                 "expandable panel must be visible.") ] 
        public bool Closed
        {
            get {return Convert.ToBoolean(ViewState["Closed"]);}
            set {ViewState["Closed"] = value;}
        }        
        
        /// <SUMMARY>
        /// The text displayed as the caption of the expandable panel 
        /// 
        /// Default: "Panel"
        /// </SUMMARY>
        [Browsable(true),
        Category("Behavior"),
        DefaultValue("Panel"),
        Description ("The text displayed as the " + 
              "caption of the expandable panel.") ]
        public string Title
        {
           get {return Convert.ToString(ViewState["Title"]);}
           set {ViewState["Title"] = value;}
        }
        
        /// <SUMMARY>
        /// The margin to use if the panel is expandable 
        ///
        /// Default: "2"
        /// </SUMMARY>
        [Browsable(true),
        Category("Appearance"),
        DefaultValue("2"),
        Description ("Margin to use if the panel is expandable.") ]
        public int Margin
        {
           get {return Convert.ToInt32(ViewState["Margin"]);}
           set {ViewState["Margin"] = value;}
        }        

        /// <SUMMARY>
        /// SkinName to be used in nugget i.e. "BasicNuggetSkin", 
        /// "BillInfoNuggetSkin", "DataGridNuggetSkin", 
        /// "TabbedNuggetSkin"
        /// 
        /// Default is "BasicNuggetSkin"
        /// </SUMMARY>
        [Browsable(true),
        Category("Behavior"),
        DefaultValue("BasicNuggetSkin"),
        Description ("Skinname to be used in nugget.") ]
        public string SkinName
        {
            get{ return skinName;}
            set{ skinName = value;}
        }
        
        /// <SUMMARY>
        /// Whether to show Minimize icon on screen or not.
        /// 
        /// Default: true
        /// </SUMMARY>
        [Browsable(true),
        Category("Validation"),
        DefaultValue("true"),
        Description ("Whether to show minimize " + 
                          "icon on screen or not.") ]
        public bool HasMinimize
        {
            get{ return hasMinimize;}
            set{ hasMinimize = value;}
        }
        
        /// <SUMMARY>
        /// Whether to show Print icon on screen or not.
        /// 
        /// Default: true
        /// </SUMMARY>
        [Browsable(true),
        Category("Validation"),
        DefaultValue("true"),
        Description ("Whether to show Print " + 
                      "icon on screen or not.") ]
        public bool HasPrint
        {
            get{ return hasPrint;}
            set{ hasPrint = value;}            
        }
        
        /// <SUMMARY>
        /// Render it minmized by default or not
        /// 
        /// Default: false
        /// </SUMMARY>
        [Browsable(true),
        Category("Appearance"),
        DefaultValue("false"),
        Description ("Render it minimized by default or not.") ]
        public bool DefaultMinimize
        {
            get{ return Closed;}
            set{ Closed = value;}
        }

        /// <SUMMARY>
        /// Content Back Color
        /// </SUMMARY>
        public Color BodyBackColor
        {
            get { return bodyBackColor; }
            set { bodyBackColor = value; }
        }

        /// <SUMMARY>
        /// Top Tab Back Color
        /// </SUMMARY>
        public string TabBackColor
        {
            get { return tabBackColor; }
            set { tabBackColor = value; }
        }

        /// <SUMMARY>
        /// Top Header Text Color
        /// </SUMMARY>
        public string HeaderTextColor
        {
            get { return headerTextColor; }
            set { headerTextColor = value; }
        }

        /// <SUMMARY>
        ///RaisePostDataChangedEvent::LoadPostData
        /// Automatically updates the Closed property based on the content
        /// of hidden field named as this control 
        /// </SUMMARY>
        /// <PARAM name="postDataKey"</PARAM>
        /// <PARAM name="postCollection"></PARAM>
        /// <RETURNS></RETURNS>
        public virtual bool LoadPostData(string postDataKey, 
                          NameValueCollection postCollection) 
        {
            bool currentValueOfClosed = Closed;
            bool postedValueOfClosed = 
              Convert.ToBoolean(postCollection[postDataKey+
                                       "_hdnMinimizeState"]);

            // What if the field is empty?
            if (!currentValueOfClosed.Equals(postedValueOfClosed)) 
            {
                Closed = postedValueOfClosed;
                return true;
            }

            return false;
        }                
        
        /// <SUMMARY>
        /// IPostBackDataHandler::RaisePostDataChangedEvent 
        /// </SUMMARY>
        public virtual void RaisePostDataChangedEvent() 
        {
            // Do nothing here
            // No need of firing server-side events
        }        
        
        /// <SUMMARY>
        /// Fires when the panel gets loaded
        /// </SUMMARY>
        /// <PARAM name="e"></PARAM>
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);            

            // Check the browser caps and disable collapse/expand if needed
            bool uplevel = false;
            HttpBrowserCapabilities caps = Page.Request.Browser;
            if (caps.Browser.ToUpper().IndexOf("IE") > -1)
            {
                // This is IE. But is it at least v5?
                if (caps.MajorVersion >4)
                    uplevel = true;
            }

            // If the browser is not IE5 or higher, drop collapse/expand 
            if (!uplevel)
            {
                Expandable = false;
                RenderInBox = true;
            }

            //Need to write this, so that LoadPostData() gets called.
            Page.RegisterRequiresPostBack(this);
        }

        /// <SUMMARY>
        /// Render the control
        /// </SUMMARY>
        /// <PARAM name="output"></PARAM>
        protected override void Render(HtmlTextWriter output)        
        {
            if (!Expandable)
            {
                if (!RenderInBox)
                    base.Render(output);
                else
                    RenderContentsInBox(output);
                return;
            }

            // Add margin information if the panel is expandable
            Style["margin"] = Margin.ToString();
            Style["display"] = (Closed ?"none" :"");
        
            // The internal panel must cover 100% of the parent area
            // irrespective of the physical width. We change this here
            // so that the original Panel code doesn't reflect the
            // external width.
            Unit oldWidth = Width;
            Width = Unit.Percentage(100);
            
            //Add Hidden Field to maintain 
            //minimize/maximize state of the curve.
            TextBox hdn = new TextBox();
            hdn.Attributes.Add("style","display:none");
            //This is what created a big nuisance to me
            if ( this.UniqueID.IndexOf(":") >=0 )
                hdn.ID = this.ID + "_hdnMinimizeState"; 
            //"UserControl1__ctl0_tblCrvPnlControl2_hdnMinimizeState"
            else
                hdn.ID = this.UniqueID + "_hdnMinimizeState"; 
            //"tblCrvPnlControl1_hdnMinimizeState"
            
            hdn.Text = Closed.ToString();
            this.Controls.Add(hdn);

            // Capture the default output of the Panel
            StringWriter writer = new StringWriter();
            HtmlTextWriter buffer = new HtmlTextWriter(writer);
            base.Render(buffer);
            string panelOutput = writer.ToString();

            // Restore the wanted width because this affects the outer table
            Width = oldWidth;
            BuildControlTree(output, this.ClientID, panelOutput);
            return;
        }                
        
        // Handle the PreRender event        
        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);

            CreateClientScript();
        }
        
        /// <SUMMARY>
        /// Build the markup for this custom Panel control
        /// </SUMMARY>
        /// <PARAM name="output"></PARAM>
        /// <PARAM name="id"></PARAM>
        /// <PARAM name="panelOutput"></PARAM>
        private void BuildControlTree(HtmlTextWriter output, 
                               string id, string panelOutput)
        {                        
            Table t = new Table();
            //t.ID = "thePanel";            
            t.ID = id + "_thePanel";
            t.CellPadding = 0;
            t.CellSpacing = 0;            
            t.Width = Unit.Percentage(100); //Width;
            t.HorizontalAlign = HorizontalAlign.Center;
            t.Style.Add("margin", "0 0 0 0px");                        

            // Prepare the topmost row
            TableRow rowTop = new TableRow();
            
            // Leftmost cell
            TableCell leftCell = new TableCell();            
            leftCell.HorizontalAlign = HorizontalAlign.Left;
            leftCell.Style.Add("width","10px");        
            leftCell.Style.Add("background",
             tabBackColor + " url(" + imgPath + 
              "topleft.gif) top left no-repeat");
            leftCell.Text = " ";
            rowTop.Cells.Add(leftCell);            
            
            //Label Info
            TableCell centerCell = new TableCell();
            centerCell.Style.Add("background-Color",tabBackColor);
            centerCell.Wrap = false;
            centerCell.Attributes.Add("onselectstart","return false"); 
            //Not allowing user to select Tab Title text 
            //through mouse or double click.
            if ( hasMinimize == true )
              centerCell.Attributes.Add("ondblclick",
              String.Format("javascript:MinMaxTableCurvePanel('{0}')", id));
            Literal lit = new Literal();
            lit.Text = String.Format("{0}",Title,headerTextColor);
            centerCell.Controls.Add(lit);                    
            rowTop.Cells.Add(centerCell);

            //Print Icon Cell
            if ( hasPrint )
            {
                TableCell printCell = new TableCell();
                //printCell.HorizontalAlign = HorizontalAlign.Right;
                printCell.Style.Add("background-Color",tabBackColor);
                printCell.Wrap = false;
                printCell.Width = Unit.Pixel(20);
                System.Web.UI.WebControls.Image imgPrint = 
                       new System.Web.UI.WebControls.Image();
                imgPrint.AlternateText = "Print View";
                imgPrint.BorderWidth = 0;
                imgPrint.Style.Add("cursor","hand");
                imgPrint.Attributes.Add("onclick",
                 String.Format("javascript:PrintTableCurvePanel('{0}')",id));
                imgPrint.ImageAlign = ImageAlign.AbsMiddle;
                imgPrint.ImageUrl = imgPath + "print.gif";
                printCell.Controls.Add(imgPrint);
                rowTop.Cells.Add(printCell);
            }
            
            //Minimize/Maximize Icon Cell
            if ( hasMinimize )
            {
                TableCell minimizeCell = new TableCell();
                //minimizeCell.HorizontalAlign = HorizontalAlign.Right;
                minimizeCell.Style.Add("background-Color",tabBackColor);
                minimizeCell.Wrap = false;
                minimizeCell.Width = Unit.Pixel(20);
                System.Web.UI.WebControls.Image imgMinimize = 
                         new System.Web.UI.WebControls.Image();
                //imgMinimize.ID = "img";
                imgMinimize.ID = id + "_imgPlusMinus";
                imgMinimize.AlternateText = "Minimize/Maximize the Panel";
                imgMinimize.BorderWidth = 0;
                imgMinimize.Style.Add("cursor","hand");
                imgMinimize.Attributes.Add("onclick",
                 String.Format("javascript:MinMaxTableCurvePanel('{0}')",id));
                imgMinimize.ImageAlign = ImageAlign.AbsMiddle;
                imgMinimize.ImageUrl = 
                  imgPath + (Closed==true?"plus.gif":"minus.gif");
                minimizeCell.Controls.Add(imgMinimize);
                rowTop.Cells.Add(minimizeCell);
            }

            // Right most cell
            TableCell rightCell = new TableCell();           
            rightCell.HorizontalAlign = HorizontalAlign.Right;
            rightCell.Width = Unit.Pixel(10);
            rightCell.Style.Add("width","10px");     
            rightCell.Style.Add("background",tabBackColor + 
              " url(" + imgPath + "topright.gif) top right no-repeat");
            rightCell.Text = " ";            
            rowTop.Cells.Add(rightCell);

            // Add the top row to the table
            t.Rows.Add(rowTop);

            int colspan = 3;
            if ( hasPrint )
                colspan++;
            if ( hasMinimize )
                colspan++;

            // Insert the Panel's markup in the table cell  {Container}
            TableRow rowBody = new TableRow();
            if ( bodyBackColor != Color.Transparent  )
            rowBody.BackColor = bodyBackColor;
            TableCell cellBody = new TableCell();            
            cellBody.ColumnSpan = colspan;
            cellBody.Text = panelOutput;
            cellBody.Style.Add("BORDER","#cccccc 1px solid");
            cellBody.Style.Add("padding","0 0 0 0px"); //"0 5 5 5px"
            cellBody.Style.Add("margin","0 0 0 0px"); //"0 0 5 0px"

            rowBody.Cells.Add(cellBody);
            t.Rows.Add(rowBody);

            // Output
            t.RenderControl(output);
        }        
        
        /// <SUMMARY>
        /// Add client side scripting
        /// </SUMMARY>
        private void CreateClientScript()
        {
          string jscript = @"
           <style>                            
             P.PanelCurveTitleStyle
             {
               font-family:verdana;
               font-size: 12px;
               font-weight : bold;
               text-align: center;    
             }
           </STYLE>                        
          <script language="javascript">
            var imgPath='" + imgPath + @"'; 
          </script>
          <script language="javascript">   
           function MinMaxTableCurvePanel(cntrlId)
           {
             //Get state from hidden control.
             var closed_TableCurvePanel = 
               document.getElementById(cntrlId+'_hdnMinimizeState').value;
             if ( closed_TableCurvePanel.toLowerCase() == 'true' )
             {
               document.getElementById(cntrlId).style.display = '';
               document.getElementById(cntrlId+'_hdnMinimizeState').value=
                                                                 false;
               document.getElementById(cntrlId+'_imgPlusMinus').src = 
                                                 imgPath + 'minus.gif';
             }
             else 
             {
               document.getElementById(cntrlId).style.display = 'none';
               document.getElementById(cntrlId+'_hdnMinimizeState').value = 
                                                                      true;
               document.getElementById(cntrlId+'_imgPlusMinus').src = 
                                                        imgPath + 'plus.gif';
             }
           }
           //TODO: this could be improved further to show tab on new window.
           function PrintTableCurvePanel(cntrlId)
           {                            
             var objDiv = document.getElementById(cntrlId);
             var winTableCurvePanel = 
                window.open('','winTableCurvePanelId','');
             winTableCurvePanel.document.write('
               <html><head></head><body onload=
                                  \'javascript:window.print()\'>');
             winTableCurvePanel.document.write(objDiv.innerHTML);
             winTableCurvePanel.document.write('</body></html>');
             winTableCurvePanel.focus();
           }
          </script>
         ";

         if (!Page.IsClientScriptBlockRegistered("TableCurvePanel_Script"))
          Page.RegisterClientScriptBlock("TableCurvePanel_Script", 
                                                         jscript );
       }

       /// <SUMMARY>
       /// Render the panel in a box (MSDN like)
       /// </SUMMARY>
       /// <PARAM name="output"></PARAM>
       private void RenderContentsInBox(HtmlTextWriter output)
       {
           this.Style.Add("BORDER","#cccccc 1px solid");
           this.Style.Add("padding","0 0 0 0px"); //"0 5 5 5px"
           this.Style.Add("margin","0 0 0 0px"); //"0 0 5 0px"
            base.Render(output);
       }
    }
    #endregion
}

ASPX code of the image displayed at the top:

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" 
       AutoEventWireup="false" Inherits="PanelCurveContainer.WebForm1" %>
<%@Register TagPrefix="Tittle" namespace="Tittle.Controls" 
                               Assembly="ClassLibrary1" %>
<%@Register TagPrefix="Tittle" TagName=
   "WebUserControl" Src="WebUserControl1.ascx" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
 <head>
    <title>WebForm1</title>
 </head>
 <body MS_POSITIONING="GridLayout">
   <form id="Form1" method="post" runat="server">
     <Tittle:PanelCurveControl ID="Panelcurvecontrol1" 
       runat="server" Expandable="true" Margin="10" 
       Title="Panel Curve - Custom Tab Color" 
       TabBackColor="#FF9933">               
       <table width=90% align=center><tr>
       <td><font size=-1>Name:</font> 
       <asp:textbox id="Textbox1" runat="server" /> </td>
       <td><font size=-1>Age:</font> 
       <input type=text /></td>
       </tr></table> </font>
     </Tittle:PanelCurveControl>
     <br>
     <Tittle:PanelCurveControl ID="Panelcurvecontrol2" 
       runat="server" Expandable="true" 
       Title="Panel Curve - Custom Header Text Color and Content Back Color"
       BodyBackColor="Pink" HeaderTextColor="#009900">
        Content here
     </Tittle:PanelCurveControl>
     <br>           
       <table width="95%" border=0 align=center>
        <tr>
          <td valign=top>
            <Tittle:PanelCurveControl ID="Panelcurvecontrol3" 
              runat="server" Expandable="true" 
              Title="Panel Curve - Without Print Icon"
              HasPrint="False" BodyBackColor="#CCFFFF" >
               Name:<br>
              <asp:textbox id=txt runat="server" /> 
             </Tittle:PanelCurveControl>
             <br>
             <Tittle:PanelCurveControl ID="Panelcurvecontrol4" 
                 runat="server" Expandable="true" 
                 Title="Panel Curve - Without Any Icon" 
                 HasPrint="False" HasMinimize="false" 
                 HeaderTextColor="#009900" TabBackColor="#FFCC99">
               Content here
             </Tittle:PanelCurveControl>
          </td>
          <td valign=top>
            <Tittle:PanelCurveControl ID="Panelcurvecontrol5" 
                runat="server" Expandable="true" 
                Title="Panel Curve - Master Curve" 
                HasMinimize="false" HasPrint="false" 
                HeaderTextColor="pink" TabBackColor="green" >
              More Panels
              <table width="100%">
                <tr>                           
                  <td valign=top >
                     <Tittle:PanelCurveControl ID="Panelcurvecontrol7" 
                         runat="server" Expandable="true" 
                         Title="Panel Curve - Master Curve - Child 1" 
                         HasMinimize="false" HasPrint="false" 
                         HeaderTextColor="#666600" TabBackColor="#CCFFCC" >
                        One More Child
                        <Tittle:PanelCurveControl ID="Panelcurvecontrol8" 
                          runat="server" Expandable="true" 
                          Title="Panel Curve - Master Curve - Child 1 - Child 1"
                          HasPrint="false" HeaderTextColor="white" 
                          TabBackColor="#336699" >
                        Content here   
                        </Tittle:PanelCurveControl>
                     </Tittle:PanelCurveControl>
                  </td>
                </tr>
              </table>
           </Tittle:PanelCurveControl>
         </td></tr>
       </table>           
       <tittle:WebUserControl id="WebUserControl1" runat="server" />
       <br><br>
       <br>
    </form>
 </body>
</html>

Conclusion

I would really be interested in knowing if this code has helped you by any means, please do not hesitate or be lazy in dropping your comments telling what you have felt about this submission and how much it has helped you. I would appreciate it if you keep the URL of this page inside the control's code while using it.

History

  • Created on: 15 Nov 2005.

License

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

Share

About the Author

Tittle Joseph
Team Leader Royal Bank of Scotland
India India
Total 11+ years of experience in Software Development. Expertise in .net (C#, asp.net, controls making, webservice, ado.net, xml/xsl, assemblies, rational XDE etc.) also UML, Design Patterns, ASP, Javascript, VbScript, Dhtml, CSS etc.
 
Member of Planet-Source-Code.com, www.brainbench.com and many other and have submitted several snippets/sample applications on the web.
 
Email:tittlejoseph@gmail.com

Comments and Discussions

 
QuestionPanel curve control causing memory leaks in application PinmemberSunetra_147-Dec-11 23:50 
GeneralIt didn't work with firefox PinmemberBabu.R.K22-Jan-11 0:57 
GeneralGood PinmemberYves20-Feb-10 9:22 
GeneralTemplated?! PinmemberBasel Nimer29-Dec-09 14:10 
GeneralAdd JQuery to create animated scroll effect Pinmembertruongpham26-Aug-09 9:24 
GeneralImages do not come when application is web-shared Pinmemberksomi25-Aug-09 0:39 
GeneralThanks PinmemberMember 47372949-Jan-09 1:01 
GeneralRe: Thanks PinmemberTittle Joseph14-Feb-09 0:34 
Generalcongratulations PinmemberNeshon20-Aug-07 9:02 
GeneralRe: congratulations PinmemberTittle Joseph27-Aug-07 9:40 
GeneralNot compatible in Netscape/Mozilla Pinmemberjjsmitty26-May-06 10:30 
GeneralRe: Not compatible in Netscape/Mozilla PinmemberTittle Joseph28-May-06 21:02 
GeneralRe: Not compatible in Netscape/Mozilla Pinmemberjostster20-Mar-09 6:56 
GeneralRe: Not compatible in Netscape/Mozilla Pinmemberjostster20-Mar-09 8:09 
AnswerRe: Not compatible in Netscape/Mozilla Pinmemberakanphade29-Jun-09 15:35 
Well I was just looking at this composite control and was I able to find the fix immediately!
 
In the page OnLoad function, joseph is trying to verify the IE version,less than IE version 5 makes the control not expandable!
 
Well I just made it true irrespective of the IE version. I just tested the results in FF and the control are coming along perfect with the desired functionality.
 
I have not tested this code with IE version < 5.
 
Here is the change!!!
 
if (!uplevel)
{
Expandable = true;
RenderInBox = true;
}
 

I hope this helps others!!! Smile | :)
 
Happy coding!
 
Amol

AnswerRe: Not compatible in Netscape/Mozilla Pinmemberakanphade29-Jun-09 15:59 
QuestionJavaScript Error Pinmemberdmichael26623-May-06 6:10 
AnswerRe: JavaScript Error PinmemberTittle Joseph23-May-06 22:03 
AnswerRe: JavaScript Error Pinmembercliftmaples21-Dec-06 4:08 
Generalmaximise/minimise feature Pinmembergooseman11222-May-06 20:05 
GeneralRe: maximise/minimise feature PinmemberTittle Joseph22-May-06 23:37 
GeneralRe: maximise/minimise feature PinmemberAndy Moon7-Jul-06 17:58 
GeneralRe: maximise/minimise feature [modified] PinmemberRonyMan17-Oct-07 22:36 
GeneralRe: maximise/minimise feature PinmemberGrandson24-Sep-09 5:32 
GeneralObject Reference not set to an instance of an object. Pinmembervyastapan20-May-06 5:22 
GeneralRe: Object Reference not set to an instance of an object. PinmemberTittle Joseph21-May-06 20:43 
GeneralRe: Object Reference not set to an instance of an object. [modified] Pinmemberangelocba17-Jul-06 3:44 
GeneralRe: Object Reference not set to an instance of an object. PinmemberTittle Joseph26-Jul-06 4:57 
Generaljavascript error from asp:content tag Pinmembergooseman11211-May-06 6:47 
GeneralRe: javascript error from asp:content tag PinmemberTittle Joseph21-May-06 20:53 
GeneralJavaScript Error in .NET Tag PinmemberEdy G14-Apr-06 12:09 
GeneralRe: JavaScript Error in .NET Tag PinmemberTittle Joseph19-Apr-06 5:38 
QuestionTab title shift on minimize PinmemberFSZRM2-Mar-06 14:49 
AnswerRe: Tab title shift on minimize PinmemberTittle Joseph22-Mar-06 3:54 
GeneralJavascript Error PinmemberGregKuper26-Jan-06 5:56 
GeneralRe: Javascript Error PinmemberFSZRM2-Mar-06 12:37 
GeneralRe: Javascript Error PinmemberTittle Joseph2-Mar-06 18:51 
QuestionBrowser Compatability? Pinmemberjonwarren30-Dec-05 12:36 
AnswerRe: Browser Compatability? PinmemberTittle Joseph1-Jan-06 19:44 
GeneralServer Error in '/PanelCurveContainer' Application. Pinmemberjonwarren30-Dec-05 11:51 
GeneralRe: Server Error in '/PanelCurveContainer' Application. PinmemberTittle Joseph2-Mar-06 18:46 
Generalvalidation summary control Pinmembermankeshk23-Nov-05 0:44 
GeneralRe: validation summary control PinmemberTittle Joseph23-Nov-05 3:18 
GeneralRe: validation summary control PinmemberTittle Joseph26-Jul-06 4:59 
Questionhow to use with vs.net design mode PinmemberPeterCodeCode15-Nov-05 8:57 
AnswerRe: how to use with vs.net design mode PinmemberTittle Joseph15-Nov-05 20:52 
GeneralRe: how to use with vs.net design mode PinmemberPeterCodeCode16-Nov-05 10:57 
QuestionRe: how to use with vs.net design mode PinmemberTittle Joseph16-Nov-05 19:17 
AnswerRe: how to use with vs.net design mode Pinmembermickyg226-Dec-05 16:09 
AnswerRe: how to use with vs.net design mode Pinmembermangeles16-Jan-06 15:41 

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 | Terms of Use | Mobile
Web01 | 2.8.141223.1 | Last Updated 15 Nov 2005
Article Copyright 2005 by Tittle Joseph
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid