I have a function that adds dynamic controls to an RadAjaxPanel. The dynamic controls are RadComboBox and some others. Everything is working as expected. On page postbacks, the values for these controls are properly set.
Outside of the panel is a button. If the user selects this button, the contents of the RadAjaxPanel are modified. The update panel looks great at the end of this postback, as it has the new control and data. The problem happens on a subsequent postback. During the next postback the update panel is recreated with the correct controls however the data/viewstate for the controls is gone. I can only assume that the controls that were added during a postback client event to the update panel did not save the viewstate.
The subsequent postback does not contain the state for the control that was added. My sample code is below. Here is how to see the problem:
1. The page displays with two comboboxes.
2. Select an item in the first combobox and the second one repopulates. This is working as expected.
3. Press the button on the page and the update panel is created with a single combobox and a new set of values. This is working as expected.
4. Press the button again, as this time it just implements a standard postback with no changes. THe combobox no longer has its values.
Since the viewstate of the objects happens after the PreRender event, there is no reason why the state should not be saved. What is happening?
Outside of the panel is a button. If the user selects this button, the contents of the RadAjaxPanel are modified. The update panel looks great at the end of this postback, as it has the new control and data. The problem happens on a subsequent postback. During the next postback the update panel is recreated with the correct controls however the data/viewstate for the controls is gone. I can only assume that the controls that were added during a postback client event to the update panel did not save the viewstate.
The subsequent postback does not contain the state for the control that was added. My sample code is below. Here is how to see the problem:
1. The page displays with two comboboxes.
2. Select an item in the first combobox and the second one repopulates. This is working as expected.
3. Press the button on the page and the update panel is created with a single combobox and a new set of values. This is working as expected.
4. Press the button again, as this time it just implements a standard postback with no changes. THe combobox no longer has its values.
Since the viewstate of the objects happens after the PreRender event, there is no reason why the state should not be saved. What is happening?
<%@ Page Title="" Language="C#" AutoEventWireup="true" CodeFile="Trials.aspx.cs" Inherits="Reporteratti.Trials" %> |
<html> |
<head runat="server"> |
</head> |
<body> |
<form id="form1" runat="server"> |
<asp:ScriptManager runat="server" ID="ScriptManager1"> |
<Scripts> |
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> |
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> |
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" /> |
</Scripts></asp:ScriptManager> |
This page is for trying stuff |
<telerik:RadAjaxPanel ID="updatePanel" runat="server" |
HorizontalAlign="NotSet" > |
</telerik:RadAjaxPanel> |
<asp:Button ID="Button2" runat="server" |
Text="Cause a Postback changing the update panel contents" onclick="Button2_Click" /> |
</form> |
</body> |
</html> |
namespace Reporteratti |
{ |
using System; |
using System.Collections.Generic; |
using System.Linq; |
using System.Web; |
using System.Web.UI; |
using System.Web.UI.WebControls; |
using Telerik.Web.UI; |
using System.Collections.Specialized; |
public partial class Trials : System.Web.UI.Page |
{ |
protected void Page_Load(object sender, EventArgs e) |
{ |
RadComboBox cmb1; |
RadComboBox cmb2; |
RadComboBox cmbX; |
// Rebuild the dynamic controls based on which should be shown |
if (Session["page"] == null) |
{ |
cmb1 = new RadComboBox(); |
cmb1.ID = "first"; |
updatePanel.Controls.Add(cmb1); |
cmb1.AutoPostBack = true; |
cmb1.SelectedIndexChanged += new RadComboBoxSelectedIndexChangedEventHandler(cmb1_SelectedIndexChanged); |
cmb2 = new RadComboBox(); |
cmb2.ID = "second"; |
cmb2.AutoPostBack = true; |
cmb2.SelectedIndexChanged += new RadComboBoxSelectedIndexChangedEventHandler(cmb1_SelectedIndexChanged); |
updatePanel.Controls.Add(cmb2); |
if (!this.IsPostBack) |
{ |
cmb1.Items.Add(new RadComboBoxItem("Item A", "1")); |
cmb1.Items.Add(new RadComboBoxItem("Item B", "2")); |
cmb1.Items.Add(new RadComboBoxItem("Item C", "3")); |
cmb2.Items.Add(new RadComboBoxItem("Item M", "1")); |
cmb2.Items.Add(new RadComboBoxItem("Item N", "2")); |
cmb2.Items.Add(new RadComboBoxItem("Item O", "3")); |
} |
} |
else |
{ |
cmbX = new RadComboBox(); |
cmbX.ID = "NewPage"; |
updatePanel.Controls.Add(cmbX); |
// This combobox is only filled in the selected event |
} |
} |
void cmb1_SelectedIndexChanged(object o, RadComboBoxSelectedIndexChangedEventArgs e) |
{ |
string sSelect = e.Text; |
string sValue = e.Value; |
RadComboBox dd = (RadComboBox)o; |
if (dd.ID == "first") |
{ |
RadComboBox cmb2 = updatePanel.FindControl("second") as RadComboBox; |
if (cmb2 != null) |
{ |
cmb2.Items.Clear(); |
cmb2.Items.Add(new RadComboBoxItem("Item P", "5")); |
cmb2.Items.Add(new RadComboBoxItem("Item Q", "6")); |
cmb2.Items.Add(new RadComboBoxItem("Item R", "7")); |
} |
} |
} |
protected void Button2_Click(object sender, EventArgs e) |
{ |
// If the second page is not showing, show it. |
// If the page is already showing, do nothing and act like a single postback |
if (Session["page"] == null) |
{ |
// Clear the update panel |
// Create the single combobox |
// Fill the combobox |
updatePanel.Controls.Clear(); |
RadComboBox cmbX = new RadComboBox(); |
cmbX.ID = "NewPage"; |
updatePanel.Controls.Add(cmbX); |
cmbX.Items.Clear(); |
cmbX.Items.Add(new RadComboBoxItem("Item XXX", "14")); |
cmbX.Items.Add(new RadComboBoxItem("Item YYY", "32")); |
cmbX.Items.Add(new RadComboBoxItem("Item ZZZ", "23")); |
Button2.Text = "Cause a postback"; |
Session["page"] = 2; |
} |
} |
} |
} |