Tuesday, November 02, 2010

How to add detail textbox opon the check of a check box

Demo:
Example:
Markup:
<%@ Page Language="C#" %>
<html>   
<head id="Head1" runat="server">  
</head>
<body>
    <form id="form1" runat="server">
        <asp:FreeCheckBox runat="server" 
            ID="freeCheckBox" 
            DetailPlaceHolderId="phDetails" 
            Text="Are you disabled?" 
            DetailLabel="Please please provide details" />
        <asp:PlaceHolder runat="server" ID="phDetails" />
        <hr />
        <asp:Button runat="server" ID="btnSave" Text="Save" />
    </form>
</body>
</html>
Control:
public class FreeCheckBox : CheckBox
{
    private TextBox txtDetail;
    private Panel pnlDetail;
    private string script = @"
    function ShowHideDetailPanel(detailPanel, source) {            
        var panel = document.getElementById(detailPanel);
        if (panel == undefined) return;
        if (source.checked == true)
            panel.style.display = ""block"";
        else
            panel.style.display = ""none"";
    }
";
    public string DetailLabel { getset; }
    public string Details { getset; }
    public string DetailPlaceHolderId { getset; }
    public bool IsMultiline { getset; }
    public FreeCheckBox()
    {
        this.DetailPlaceHolderId = string.Empty;
        this.IsMultiline = false;
    }
    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);
        this.CreateControlHeirarchy();
    }
    public void CreateControlHeirarchy()
    {
        this.pnlDetail = new Panel() { ID = string.Concat(this.ID, "_DetailPanel"), CssClass = "DetailPanel" };
        this.txtDetail = new TextBox() { ID = string.Concat(this.ID, "_TextBox"), 
                                            CssClass = "DetailTextBox", TextMode = TextBoxMode.MultiLine };
        if (this.IsMultiline) this.txtDetail.TextMode = TextBoxMode.MultiLine;
        this.pnlDetail.Controls.Add(new Label() { Text = this.DetailLabel, CssClass = "DetailLabel" });
        this.pnlDetail.Controls.Add(this.txtDetail);
        PlaceHolder phDetail = this.Page.FindControl(this.DetailPlaceHolderId) as PlaceHolder;
        Control parent = this.Parent;
        while (phDetail == null)
        {
            phDetail = parent.FindControl(this.DetailPlaceHolderId) as PlaceHolder;
            if (phDetail == null) parent = parent.Parent;
            if (parent == nullbreak;
        }
        if (phDetail != null) phDetail.Controls.Add(pnlDetail);
        this.Attributes.Add("onclick", 
                string.Format("javascript:ShowHideDetailPanel('{0}', this)", pnlDetail.ClientID));
    }
    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);
        if (this.Checked)
            this.pnlDetail.Attributes.Add("style""display:block;");
        else
            this.pnlDetail.Attributes.Add("style""display:none;");
    }
    protected override bool LoadPostData(string postDataKey, NameValueCollection postCollection)
    {
        bool value = base.LoadPostData(postDataKey, postCollection);
        if (this.Checked)
            this.Details = this.txtDetail.Text;
        return value;
    }
    protected override void OnPreRender(EventArgs e)
    {
        base.OnPreRender(e);
        this.Page.ClientScript.RegisterClientScriptBlock(
                this.GetType(), this.GetType().Name, this.script, true);
    }
}

2 comments:

Anonymous said...

that one is custom control right

Charith Shyam Gunasekara said...

Yes it is

Azure Storage Account Types

Defferent Types of Blobs Block blobs store text and binary data. Block blobs are made up of blocks of data that can be managed individually...