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

iPhone Launch Screen Sizes

iPhone Portrait iOS 8 Retina HT 5.5 = 1242 X 2208 Retna HD 4.7 = 750 X 1134 iPhone Landscape iOS 8 Retina HD 5.5  2208 X 1242 iPho...