Develop Reference

Dynamically Created DropDownList within a List of Panels is not allowing for Event Handling

I am trying to create a UI that creates rows that can be dynamically populated.
I am at the point where I can add a Panel to my list that contains a DropDownList and has an associated Remove Button.
The Remove Button has an OnClick event bound that allows me to remove that specific panel.
I am having an issue when trying to bind a SelectedIndexChanged EventHandler to my DropDownList it does not.
I suspect this had something to do with how I am recreating my controls after every Postback.
I am not asking for or expecting a straightforward "Add this or Change this in the code." I really want to have a understand where I am going wrong, sorry for asking so much! :s
protected void Page_Load(object sender, EventArgs e)
{
//Showing this for the the poster that asked.
if (!IsPostBack)
{
GetClustersFromDB(user);
BindGrid();
BindState();
}
if (Session["persistControls"] != null)
{
persistControls = (List<Panel>)Session["persistControls"];
int count = 0;
foreach (Panel dynamicControl in persistControls)
{
DropDownList list = new DropDownList();
list.ID = "list" + count;
list.SelectedIndexChanged += new EventHandler(list_SelectedIndexChanged);
list.AutoPostBack = true;
list.Items.Add(new ListItem("", "0"));
list.Items.Add(new ListItem("Title", "1"));
dynamicControl.ID = "panel" + count;
Button btnRemove = new Button();
btnRemove.Click += new EventHandler(btnDelete_Click);
btnRemove.Text = "Remove";
btnRemove.CommandArgument = count.ToString();
myPlaceholder.Controls.Add(dynamicControl);
myPlaceholder.Controls.Add(btnRemove);
count++;
}
}
}
protected void btnAdd_Click(object sender, EventArgs e)
{
try
{
DropDownList list = new DropDownList();
list.SelectedIndexChanged += new EventHandler(list_SelectedIndexChanged);
list.AutoPostBack = true;
list.Items.Add(new ListItem("", "0"));
list.Items.Add(new ListItem("Title", "1"));
Panel panelContainer = new Panel();
panelContainer.ID = "panel" + persistControls.Count;
panelContainer.Controls.Add(list);
Button btnRemove = new Button();
btnRemove.Click += new EventHandler(btnDelete_Click);
btnRemove.Text = "Remove";
btnRemove.CommandArgument = persistControls.Count.ToString();
myPlaceholder.Controls.Add(panelContainer); // Pushes the Panel to the page.
persistControls.Add(panelContainer);// Adds our Panel to the Control list
myPlaceholder.Controls.Add(btnRemove); // Pushes our Button to the page.
Session["persistControls"] = persistControls; // put it in the session
}
catch
{
throw;
}
}
protected void btnDelete_Click(object sender, EventArgs e)
{
try
{
int deleteThisOne = int.Parse(((Button)sender).CommandArgument);
persistControls.Remove(persistControls[deleteThisOne]);
Session["persistControls"] = persistControls;
Response.Redirect(Request.Url.ToString());
}
catch
{
throw;
}
}
protected void list_SelectedIndexChanged(object sender, EventArgs e)
{
throw new NotImplementedException();
}
//aspx File Snippets
<asp:Button ID="btnAdd" runat="server" Text="Add Control" onclick="btnAdd_Click" />
<asp:Button ID="btnClear" runat="server" Text="Reset" onclick="btnClear_Click"/>
<asp:PlaceHolder ID="myPlaceholder" runat="server"></asp:PlaceHolder>

Maintaining controls like this is a real pain. You could try an alternative approach:
Create a (small) class that encapsulates the data you want to display in each Panel.
Maintain a List of these objects in Session.
Use an <asp:Repeater> to display the items by data-binding it to your list.
In the repeater's ItemTemplate, you can write out your <asp:Panel> that can contain a <asp:DropDownList>. Use the ItemCommand property of the drop-down list to bind it to a server-side event handler. Similarly you can put an <asp:Button> in the template and bind the ItemCommand property of this to another server-side event handler.
When you click Add, you'll postback to the server, add to your list, save it in session, re-bind the repeater.
When you click a Remove, you'll postback to the server, remove the item from your list, save it in session, re-bind the repeater.
This way lets ASP.Net handle all the control creation for you. However, if you really want to do all that yourself, then this Infinities Loop blog post is required reading.

I don't think this will work. If you create the dropdownlists in the PageLoad event, the viewstate will never get bound to it, and you will never see the option selected by the user.
You should create the controls OnInit, then when the PostBack occurs the ViewState data will get bound to the control and you will be able to access it.

Dynamic Placeholder Control and attaching an Event

I have been getting some massive head aches working on a very dynamic app.
I am using a dynamic placeholder control from:
http://www.denisbauer.com/ASPNETControls/DynamicControlsPlaceholder.aspx
This saves me a lot of hassle when trying to re-create dynamically created controls after a postback.
Has anyone else had any issues with attaching a event handler to checkbox control?
Here is my code for the dynamically created checkbox.
// Now I create my checkbox
chkDynamic = new CheckBox();
string chk = "chk";
// Add it to our dynamic control
chkDynamic.CheckedChanged += new EventHandler(chkDynamic_CheckedChanged);
chkDynamic.ID = chk;
DynamicControlsPlaceholder1.Controls.Add(chkDynamic);
chkDynamic.Text = "hey";
This works, but its like the event is not getting attached!
Here is my event handler!
protected void chkDynamic_CheckedChanged(object sender, EventArgs e)
{
if (((CheckBox)sender).Checked)
Response.Write("you checked the checkbox :" + this.chkDynamic.ID);
else
Response.Write("checkbox is not checked");
}
Now if I was to use a regular placeholder or a panel this works great.
Ex. Change this line:
DynamicControlsPlaceholder1.Controls.Add(chkDynamic);
to
Panel1.Controls.Add(chkDynamic);
And it works perfect.
Could someone please tell me, is this an issue with this control, or my coding?
There are no errors, the only thing that is happening that is unexpected is my event is not firing when I'm using the DynamicControlsPlaceholder.

Creating a delegate (anonymous method) did the job for me.
// Now I create my checkbox
chkDynamic = new CheckBox();
string chk = "chk";
// Add it to our dynamic control
chkDynamic.CheckedChanged += delegate (System.Object o, System.EventArgs e)
{
if (((CheckBox)sender).Checked)
Response.Write("you checked the checkbox :" + this.chkDynamic.ID);
else
Response.Write("checkbox is not checked");
};
chkDynamic.ID = chk;
DynamicControlsPlaceholder1.Controls.Add(chkDynamic);
chkDynamic.Text = "hey";
this will cause the code written in delegate to execute whenever dynamic control hits the action "CheckedChanged"

If you are adding dynamic controls, you MUST create/recreate the controls no later than OnInit(). This is the point in the .NET page lifecycle where the viewstate and events are restored. If it is solely for the purpose of adding dynamic controls that you are using the dynamic placeholder control, then simply putting the control creation/recreation in OnInit() will solve your problem. Give it a try and let me know your results.

Ok, so this works with one dynamically created control. But not with multiple...

ASP.NET TextBox ignores update panel

I have a GridView with a item template defined like:
public class ToolLogTemplate : ITemplate
{
public String DataField { get; set; }
public ToolLogTemplate(String column)
{
DataField = column;
}
public void InstantiateIn(Control container)
{
var textBox = new TextBox();
textBox.ClientIDMode = ClientIDMode.Predictable;
textBox.CssClass = "ToolLog";
textBox.AutoPostBack = true;
textBox.DataBinding += textBox_DataBinding;
container.Controls.Add(textBox);
}
void textBox_DataBinding(object sender, EventArgs e)
{
var textBox = (TextBox)sender;
var context = DataBinder.GetDataItem(textBox.NamingContainer);
textBox.Text = DataBinder.Eval(context, DataField).ToString();
}
}
The GridView is inside of a UpdatePanel defined like:
UpdatePanel updatePanel = new UpdatePanel();
updatePanel.UpdateMode = UpdatePanelUpdateMode.Conditional;
The TextChanged event of the TextBoxes in the GridView trigger a full refresh of the page. My understanding was that by wrapping the TextBoxes in a UpdatePanel it would trigger a partial refresh instead. Am I misunderstanding this?
Update in response to the newest comment on the question:
I have some javascript attached to the textboxes:
currentTextBox.Attributes.Add("onFocus", String.Format("document.getElementById('RowTextBox').value = {0}; document.getElementById('ColTextBox').value = {1}; this.style.backgroundColor='#ffeb9c';", i, j));
currentTextBox.Attributes.Add("onBlur", "this.style.backgroundColor='#ffffff'");
It just sets the colors of the textbox and saves where it is in the gridview. The updatepanel works as expected with the menu and button I have in it, it's just the textboxes that cause a full postback.

Upon seeing update code, I have revised my answer...
The UpdatePanel needs to be told which controls it should respond to. You can do this by adding Triggers. In your case, you have TextBox controls within a GridView. These Textboxes are set to autopostback. Since they are within the GridView, I believe the GridView is treating them like a RowCommand. Using your original code, I would recommend you add the following:
UpdatePanel updatePanel = new UpdatePanel();
updatePanel.UpdateMode = UpdatePanelUpdateMode.Conditional;
gridView.OnRowCommand = "GridViewRowCommand";
AsyncPostbackTrigger newTrigger = new AsyncPostbackTrigger();
newTrigger.ControlID = gridView.ControlID;
updatePanel.Triggers.Add(newTrigger);
Within your codebehind, you would need to do something like this:
protected void GridViewRowCommand(object sender, RowCommandEventArgs e)
{
var myTextBox = e.Row.FindControl("myTextBoxID");
// Do some work
}

Well unfortunately I was never able to make the model described here work. Instead I put an invisible button inside of the updatepanel and had javascript click it on the textboxes onchange event. I don't know why this method works and the TextChanged one doesn't, but that's how it ended up going down.

How to call an event handler from one control to the another control where the second control is inside the first control?

i have a calender control like this
<asp:Calendar ID="CldrDemo" runat="server" BackColor="#FFFFCC" BorderColor="#FFCC66"
OnSelectionChanged="CldrDemo_SelectionChanged" OnDayRender="CldrDemo_DayRender">
</asp:Calendar>
OnDayRender event i have code like this
protected void CldrDemo_DayRender(object sender, DayRenderEventArgs e)
{if (e.Day.Date == Convert.ToDateTime("11/30/2010"))//comparing date
{
DropDownList ddlBlist = new DropDownList();//creating instance of ddl
ddlBlist.AutoPostBack = true;
ddlBlist.Items.Add("Ashrith");//adding values to the ddl
ddlBlist.Items.Add("Nayeem");//adding values to the ddl
ddlBlist.SelectedIndexChanged += new EventHandler(ddlBlist_SelectedIndexChanged);//want to call this
string name = ddlBlist.SelectedItem.Text;
e.Cell.Controls.Add(ddlBlist);//adding dropdownlist to the cell
e.Cell.BorderColor = System.Drawing.Color.Black;
e.Cell.BorderWidth = 1;
e.Cell.BackColor = System.Drawing.Color.LightGray;
}
i want to call the event handler for the dropdownlist - selectedIndexchanged and i have added it also like this
protected void ddlBlist_SelectedIndexChanged(object sender, EventArgs e)
{
}
but this is not getting fire when i am changing the item of the dropdownlist. Please help

try this
ddlBlist.SelectedIndexChanged += new EventHandler("ddlBlist_SelectedIndexChanged");

try putting your calendar control in a Ajax update panel
and put this line before adding items in your combo box:
ddlBlist.SelectedIndexChanged += new EventHandler(ddlBlist_SelectedIndexChanged);
ddlBlist.Items.Add("Ashrith");//adding values to the ddl
ddlBlist.Items.Add("Nayeem");//adding values to the ddl

I believe in order to get this to work you need to have re-added your drop-down list to the controls collection before the SelectedIndexChanged event would normally be fired.
What's happening is, you're adding your control dynamically at render time, but when a post-back happens the control doesn't actually exist any more, or at least it won't until your render method gets called again. And so the event will not fire.
In my experience with adding controls dynamically like this, in order to be able to handle any events they raise you need to be able to re-create your dynamic control tree before the page's Load event occurs. If you can do this, you will probably find that your event will fire as normal.

How and WHEN to save the values of the "Checked" attribute for Dynamic checkboxes

I am adding some checkboxes dynamically during runtime, and I need to know whether they are checked or not when I reload them next time.
I load the checkbox values from a list stored in ViewState.
The question is: when do I save or check for the value of the the Checked?
I tried the event dispose for the check box and the place holder I am adding the checkboxes in, but it wasn't fired. i.e. when I put a break point it didn't stop. So any suggestions?
This is a sample code, but I don't think it is necessary:
void LoadKeywords()
{
bool add = true;
foreach (string s in (ViewState["keywords"] as List<string>))
if (s == ddlKeywords.SelectedItem.Text)
{
add = false;
continue;
}
if (add)
(ViewState["keywords"] as List<string>).Add(ddlKeywords.SelectedItem.Text);
foreach (string s in (ViewState["keywords"] as List<string>))
{
CheckBox kw = new CheckBox();
kw.Disposed += new EventHandler(kw_Disposed);
kw.Text = s;
PlaceHolderKeywords.Controls.Add(kw);
}
}

If you are dynamically adding controls at run time you have to make sure that those controls are populated to the page's Control collection before ViewState is loaded. This is so that the state of each checkbox can be rehydrated from Viewstate. The Page Load event, for example, is too late.
Typically you would dynamically add your CheckBox controls during the Init Event (before view state is loaded) and then Read the values in your Checkbox controls during the Load event (after view state is loaded).
eg:
protected override void OnInit(EventArgs e)
{
//load the controls before ViewState is loaded
base.OnInit(e);
for (int i = 0; i < 3; i++)
{
CheckBox cb = new CheckBox();
cb = new CheckBox();
cb.ID = "KeyWord" + i.ToString();
cb.Text = "Key Word"
MyPlaceHolder.Controls.Add(new CheckBox());
}
}
//this could also be a button click event perhaps?
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
if (Page.IsPostBack)
{
//read the checkbox values
foreach(CheckBox control in MyPlaceHolder.Controls)
{
bool isChecked = control.Checked;
string keyword = control.Text;
//do something with these two values
}
}
}
Hope that helps
****EDIT****
Forgot to mention that this is obviously just demo code - you would need to flesh it out.
For more information on dynaic control rendering in ASP.Net check out this article on 4Guys.
For more information on the page life-cycle in ASP.Net check out MSDN.

How to:
try adding a javascript code, that handles checked(),
u can get the checkboxes by using document.findElementById(ID) , then store the checkboxe's value into a hiddenfield that has a runat="server" property.
When to:
either on pageload , check if page is postback(), and check the hiddenfield(s) value(S). or add a submit button (and place its event in the code behind, runat="server" property).
hope this helps u.