ASP.Net Ajax Creating Multiple Calendar Extenders on TextBoxes Programmatically

A web app having multiple Textboxes and Date Pickers or Calendar Extenders are very common.
Usually a page for submitting more than one rows which include Date field.

If Textboxes with attached Calender depends on some logic then we need to create them programmatically.

I will show how to do it using Asp.Net Ajax Control Toolkit Calendar Extender as Date picker control. I also used the simple ‘Northwind’ sample Database for demo purpose.

This small application will show Employees Name, Title and Hire Date info. Hire Date can be choose using calendar extender & updated.

  1. Creating multiple TextBoxes and Calendar Extenders programmatically
    <form id="form1" runat="server">
            <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
            <asp:UpdatePanel ID="updpanel" runat="server">
                <asp:Table ID="tblinput" runat="server" >
                    <asp:TableHeaderRow ID="TableHeaderRow1" runat="server" Font-Names="Calibri" Font-Size="10pt">
                        <asp:TableHeaderCell>Hire Date</asp:TableHeaderCell>
                <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
                <asp:Button ID="btnSubmit" runat="server" Text="Submit" 
                    onclick="btnSubmit_Click" />  <asp:Label ID="lblmsg" runat="server"></asp:Label>

    I have Table Control as container of Labels & TextBoxes. Also PlaceHolder control that will be contained by AjaxControlToolkit Calendar Extender.

    Labels, TextBoxes and Calendar Extender created programmatically inside Page_Load procedure.

  2. This is Page Load code block to Show Labels and TextBoxes inside table control programmatically.
    private string connString = @"Data Source=.\SQLDEV;Initial Catalog=NorthWind;Integrated Security=SSPI";
    protected void Page_Load(object sender, EventArgs e)
    	AjaxControlToolkit.CalendarExtender cal_ext;    
    	SqlConnection conn = new SqlConnection(connString);
    	string query = "select employeeid, firstname, title, hiredate from Employees";
    	SqlDataAdapter da = new SqlDataAdapter(query, conn);
    	DataTable dt = new DataTable();
    	foreach (DataRow dr in dt.Rows)
    		Label lblID = new Label();
    		lblID.ID = "lblID_" + dr["employeeid"].ToString();
    		lblID.Text = dr["employeeid"].ToString();
    		Label lblName = new Label();
    		lblName.ID = "lblName_" + dr["employeeid"].ToString();
    		lblName.Text = dr["firstname"].ToString();
    		Label lblTitle = new Label();
    		lblTitle.ID = "lblTitle_" + dr["employeeid"].ToString();
    		lblTitle.Text = dr["title"].ToString();
    		TextBox txHireDate = new TextBox();
    		txHireDate.ID = "txHireDate_" + dr["employeeid"].ToString();
    		txHireDate.Text = Convert.ToDateTime(dr["hiredate"]).ToString("yyyy-MM-dd");
    		txHireDate.Width = Unit.Pixel(75);
    		TableRow tr = new TableRow();           
    		TableCell tc = new TableCell();
    		tc = new TableCell();
    		tc = new TableCell();
    		tc = new TableCell();
    		cal_ext = new AjaxControlToolkit.CalendarExtender();
    		cal_ext.PopupPosition = AjaxControlToolkit.CalendarPosition.BottomLeft;
    		cal_ext.TargetControlID = "txHireDate_" + dr["employeeid"].ToString();
    		cal_ext.Format = "yyyy-MM-dd";

    As you can see that Calendar Extender controls are added to PlaceHolder control and its TargetControlID is set to each unique TextBoxes ID.

  3. Saving Updated Entry
    protected void btnSubmit_Click(object sender, EventArgs e)
    	SqlConnection conn = new SqlConnection(connString);
    	int i = 0;
    	foreach (TableRow tr in tblinput.Rows)
    		if (i > 0)
    			Label lblID = (Label)tr.Cells[0].Controls[0];
    			string employeeid = lblID.Text;
    			TextBox txHireDate = (TextBox)tr.Cells[3].Controls[0];
    			string hiredate = txHireDate.Text;
    			string query = "update Employees set hiredate='" + hiredate + "'  where employeeid=" + employeeid;
    			SqlCommand cmd = new SqlCommand(query, conn);
    	lblmsg.Text = "save Success";

    Controls I created in Page_Load are converted from Table Cell’s Controls[index] and then HireDate field updated using standard SQL syntax.

Agung Gugiaji

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s