Dynamic TextBox and AutoCompleteExtender

Question

User-1785826290 posted

Hello all i am trying to create textboxes dynamically (in code behind) and simultaneous adding Ajax AutoCompleteExtender to each textbox after the texboxes have been created

the code is as follows:

protected void Button1_Click(object sender, EventArgs e)
    {
        i = Convert.ToInt32(txtNumberWorked.Text);

        for (int j = 1; j <= i; j++)
        {

            TextBox box = new TextBox();
            box.ID = "textbox" + j.ToString();

            trow = new TableRow();
            tcell1 = new TableCell();
            tcell1.Controls.Add(box);
            trow.Cells.Add(tcell1);
            mytbl.Controls.Add(trow);

                
            AjaxControlToolkit.AutoCompleteExtender kit = new AjaxControlToolkit.AutoCompleteExtender();
            kit.ID = "AutoCompleteExtender" + j.ToString();
            kit.Enabled = true;
            kit.TargetControlID = box.ID;
            kit.CompletionListCssClass = "completionList";
            kit.CompletionListHighlightedItemCssClass = "itemHighlighted";
            kit.CompletionListItemCssClass = "listItem";
            kit.CompletionInterval = 10;
            kit.MinimumPrefixLength = 1;
            kit.ServiceMethod = "GetName";
            this.Form.Controls.Add(kit);
            
        }


    }

The problem is after the textbox is created the code for the AutoCompleteExtender TargetControlID cannot find the textbox that has just been created.

Can anyone Hep me please and thank you

Answer 1

User1208776063 posted

The problem is after the textbox is created the code for the AutoCompleteExtender TargetControlID cannot find the textbox that has just been created.

Dynamic controls need to be recreated on postback with the same ID to retain changes from ViewState. You need to create a method to create dynamic controls in button click event handler and call the same method in the Page postbacks as well.

protected void Page_Load(object sender, EventArgs e)
{
    int numHours = 0;
    if (IsPostBack && int.TryParse(txtNumberWorked.Text, out numHours))
    {
        AddControls(numHours);
    }
}
protected void Button1_Click(object sender, EventArgs e)
{
    int numHours = 0;
    if (int.TryParse(txtNumberWorked.Text, out numHours))
    {
        AddControls(numHours);
    }
}
public void AddControls(int numberHours)
{
    for (int j = 1; j <= numberHours; j++)
    {
        TextBox box = new TextBox();
        box.ID = "textbox" + j.ToString();
        trow = new TableRow();
        tcell1 = new TableCell();
        tcell1.Controls.Add(box);
        trow.Cells.Add(tcell1);
        mytbl.Controls.Add(trow);
        AjaxControlToolkit.AutoCompleteExtender kit = new AjaxControlToolkit.AutoCompleteExtender();
        kit.ID = "AutoCompleteExtender" + j.ToString();
        kit.Enabled = true;
        kit.TargetControlID = box.ID;
        kit.CompletionListCssClass = "completionList";
        kit.CompletionListHighlightedItemCssClass = "itemHighlighted";
        kit.CompletionListItemCssClass = "listItem";
        kit.CompletionInterval = 10;
        kit.MinimumPrefixLength = 1;
        kit.ServiceMethod = "GetName";
        this.Form.Controls.Add(kit);
    }
}

• Creating dynamic controls in ASP.NET

Answer 2

User-1785826290 posted

tried your coding however is saying now says Multiple controls with the same ID 'textbox1' were found. FindControl requires that controls have unique IDs.

Answer 3

User1208776063 posted

Hmm. I thought button1 is the only control doing postback in your page. But, it seems like some other controls are adding them prior to clicking the button.   Idea is to recreate controls on page postbacks using similar logic.

public bool HasControlsToAdd
{
    get
    {
        if (ViewState["HasControlsToAdd"] == null)
            ViewState["HasControlsToAdd"] = false;
        return Convert.ToBoolean(ViewState["HasControlsToAdd"]);
    }
    set
    {
        ViewState["HasControlsToAdd"] = value;
    }
}
protected void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack && HasControlsToAdd)
    {
        AddControls();
    }
}
protected void Button1_Click(object sender, EventArgs e)
{
    AddControls();
}
public void AddControls()
{
    int numberHours = Convert.ToInt32(txtNumberWorked.Text);
    for (int j = 1; j <= numberHours; j++)
    {
        TextBox box = new TextBox();
        box.ID = "textbox" + j.ToString();
        trow = new TableRow();
        tcell1 = new TableCell();
        tcell1.Controls.Add(box);
        trow.Cells.Add(tcell1);
        mytbl.Controls.Add(trow);
        AjaxControlToolkit.AutoCompleteExtender kit = new AjaxControlToolkit.AutoCompleteExtender();
        kit.ID = "AutoCompleteExtender" + j.ToString();
        kit.Enabled = true;
        kit.TargetControlID = box.ID;
        kit.CompletionListCssClass = "completionList";
        kit.CompletionListHighlightedItemCssClass = "itemHighlighted";
        kit.CompletionListItemCssClass = "listItem";
        kit.CompletionInterval = 10;
        kit.MinimumPrefixLength = 1;
        kit.ServiceMethod = "GetName";
        this.Form.Controls.Add(kit);
    }
    HasControlsToAdd = true;
}

This will make sure that controls are added only after button1 is clicked.  Try this way and see if it works.

Answer 4

User-1785826290 posted

now am getting original error 

The TargetControlID of 'AutoCompleteExtender1' is not valid. A control with ID 'textbox1' could not be found.

Answer 5

User-1785826290 posted

I figure it out i needed a Placeholder on the page and add control to it

so:

PlaceHolder1.Control.Add.(box);