Dynamic DropDownList Controls

How to create dynamic DropDownList control in Asp.net?
How to retain value across postbacks ?
How to recreate the controls on each postback ?
How to dynamically attach event handlers to DropDownList control in asp.net ?



Dynamic DropDownList control in asp.net

Coding Language : C# :

Add a PreInit event to the Page and add the following snippet in it
.

Panel pnlDropDownList;

protected void Page_PreInit(object sender, EventArgs e)

{

//Create a Dynamic Panel

pnlDropDownList = new Panel();

pnlDropDownList.ID = "pnlDropDownList";

pnlDropDownList.BorderWidth = 1;

pnlDropDownList.Width = 300;

this.form1.Controls.Add(pnlDropDownList);

//Create a LinkDynamic Button to Add TextBoxes

LinkButton btnAddDdl = new LinkButton();

btnAddDdl.ID = "btnAddDdl";

btnAddDdl.Text = "Add DropDownList";

btnAddDdl.Click += new System.EventHandler(btnAdd_Click);

this.form1.Controls.Add(btnAddDdl);

//Recreate Controls

RecreateControls("ddlDynamic", "DropDownList");

}
So I have created the following controls :

* Dynamic panel pnlDropDownList and added it to the form control on the page

* Dynamic LinkButton btnAddDdl attached a Click event btnAdd_Click to it and added to the form control.

* A function called RecreateControls is being called.

On the Click event of the dynamic LinkButton I have added the following event:

protected void btnAdd_Click(object sender, EventArgs e)

{

int cnt = FindOccurence("ddlDynamic");

CreateDropDownList("ddlDynamic-" + Convert.ToString(cnt + 1));

}



As you will notice 2 function calls are made : The FindOccurence function as the name suggests gets the occurrence of the Dynamic DropDownList in the Request.Form collection. The basic idea is that I have given ID is a common pattern that is all IDs are of the form txtDynamic e.g. txtDynamic-1, txtDynamic-2 and so on.

private int FindOccurence(string substr)

{

string reqstr = Request.Form.ToString();

return ((reqstr.Length - reqstr.Replace(substr, "").Length)

/ substr.Length);

}

CreateDropDownList is used to create dynamic DropDownList. The function accepts ID as parameter .

private void CreateDropDownList(string ID)

{

DropDownList ddl = new DropDownList();

ddl.ID = ID;

ddl.Items.Add(new ListItem("--Select--", ""));

ddl.Items.Add(new ListItem("One", "1"));

ddl.Items.Add(new ListItem("Two", "2"));

ddl.Items.Add(new ListItem("Three", "3"));

ddl.AutoPostBack = true;

ddl.SelectedIndexChanged += new EventHandler(OnSelectedIndexChanged);

pnlDropDownList.Controls.Add(ddl);

Literal lt = new Literal();

lt.Text = "
"
;

pnlDropDownList.Controls.Add(lt);

}

What I do here is that I am creating a new DropDownList and adding Items to it. Once done that I am attaching SelectedIndexChanged Event Handler and setting the AutoPostBack property to true. Finally I am adding it to the panel pnlDropDownList.

The SelectedIndexChanged Event Handler is given below.

protected void OnSelectedIndexChanged(object sender, EventArgs e)

{

DropDownList ddl = (DropDownList)sender;

string ID = ddl.ID;

ClientScript.RegisterClientScriptBlock(this.GetType(), "Alert",

"");

//Place the functionality here

}


The most important function is RecreateControls whose job is to recreate all the DropDownList on each postback.


private void RecreateControls(string ctrlPrefix, string ctrlType)

{

string[] ctrls = Request.Form.ToString().Split('&');

int cnt = FindOccurence(ctrlPrefix);

if (cnt > 0)

{

for (int k = 1; k <= cnt; k++)

{

for (int i = 0; i <>

{

if (ctrls[i].Contains(ctrlPrefix + "-" + k.ToString())

&& !ctrls[i].Contains("EVENTTARGET"))

{

string ctrlID = ctrls[i].Split('=')[0];

if (ctrlType == "DropDownList")

{

CreateDropDownList(ctrlID);

}

break;

}

}

}

}

}


So first find the occurrence of a particular string here ddlDynamic in the Request.Form collection and then loop through each item and keep adding the DropDownList using the CreateDropDownList function described earlier.

One important thing I need to point out which people overlook is always give unique IDs to dynamic controls when you create them.







0 comments:

Post a Comment

Note: Only a member of this blog may post a comment.