Hi,
I have a custom Panel control,which is expandable and we can insert any control on that. Given below is the code of custom control.
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; using System.Collections;
[assembly: TagPrefix("PanelControl", "Tittle")] namespace PanelControl { #region Table Curve Panel Control (Expandable)
/// 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.
[ToolboxData("<{0}:PanelControl runat=server Expandable='true' id='tblCrvPnl' Width='200px'></{0}:PanelControl>")]
public class PanelControl : 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 PanelControl()
: base()
{
}
/// <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>
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>
protected override void OnLoad(EventArgs e)
{
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/";
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 = true;
RenderInBox = true;
}
//Need to write this, so that LoadPostData() gets called.
Page.RegisterRequiresPostBack(this);
}
/// <summary>
/// Render the control
/// </summary>
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"; //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"
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>
private void BuildControlTree(HtmlTextWriter output, string id, string panelOutput)
{
Panel p = new Panel();
Table t = new Table();
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("<P class=PanelCurveTitleStyle><font color='{1}'>{0} </font></P>", 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><title>Print</title></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)
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
}
Now i want output in form of panel,rather than in table(tr and td).
can anyone suggest how can i do this?
its very important for me..
Looking for quick response.
Regards Pulak