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">
        <div>
            <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
            </asp:ToolkitScriptManager>
            <asp:UpdatePanel ID="updpanel" runat="server">
            <ContentTemplate>
               
                <asp:Table ID="tblinput" runat="server" >
                    <asp:TableHeaderRow ID="TableHeaderRow1" runat="server" Font-Names="Calibri" Font-Size="10pt">
                        
                        <asp:TableHeaderCell>ID</asp:TableHeaderCell>
                        <asp:TableHeaderCell>Name</asp:TableHeaderCell>
                        <asp:TableHeaderCell>Title</asp:TableHeaderCell>
                        <asp:TableHeaderCell>Hire Date</asp:TableHeaderCell>
                    </asp:TableHeaderRow>
                    
                </asp:Table>
               
                <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>
                
            </ContentTemplate>
            </asp:UpdatePanel>
        </div>
        </form>
    ...
    

    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);
    	conn.Open();
    	string query = "select employeeid, firstname, title, hiredate from Employees";
    	SqlDataAdapter da = new SqlDataAdapter(query, conn);
    	DataTable dt = new DataTable();
    	da.Fill(dt);
    	da.Dispose();
    
    	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.Controls.Add(lblID);
    		tr.Cells.Add(tc);
    
    		tc = new TableCell();
    		tc.Controls.Add(lblName);
    		tr.Cells.Add(tc);
    
    		tc = new TableCell();
    		tc.Controls.Add(lblTitle);
    		tr.Cells.Add(tc);
    
    		tc = new TableCell();
    		tc.Controls.Add(txHireDate);
    		tr.Cells.Add(tc);
    
    		tblinput.Rows.Add(tr);
    
    		cal_ext = new AjaxControlToolkit.CalendarExtender();
    		cal_ext.PopupPosition = AjaxControlToolkit.CalendarPosition.BottomLeft;
    		cal_ext.TargetControlID = "txHireDate_" + dr["employeeid"].ToString();
    		cal_ext.Format = "yyyy-MM-dd";
    		PlaceHolder1.Controls.Add(cal_ext);
    	}
    	conn.Close();
    }
    

    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);
    	conn.Open();
    
    	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);
    			cmd.ExecuteNonQuery();
    			cmd.Dispose();
    		}
    		i++;
    
    	}
    
    	conn.Close();
    	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.

Regards,
Agung Gugiaji

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s