This is a migrated thread and some comments may be shown as answers.

[Solved] Combobox doesn't work anymore after postback

6 Answers 490 Views

ComboBox

This is a migrated thread and some comments may be shown as answers.

Philippe asked on 18 Jan 2008, 04:04 PM

Hi, I'm facing a really weird problem and I need some help. Here's what I'm trying to do: I have a main page containing user controls. On my main page, when I click a button I display the content of one of my user control that contains a king of popup window with a combobox in it (combo box populated by a call to a distant server). Until then everything works fine. In this same popup, I have a button that is once clicked, a call to a web service is done so I retrieve the selected item in the combobox and I do some operations on it. Again, until then everything's fine.

The problem is that after the call to the server, the combo box stops working. I do not reload the page, I use a RadAjaxManager in my main page to manage what is supposed to be updated in the page, so the main page and the user controls are not reloaded after the server call. My popup window remains displayed and absolutely nothing happens when I click on the combobox. I tried to use the ComboBox from RadControls for ASP.NET (not Prometheus), and it seems to be working. The problem is that I cannot use it because of a bug with safari (reported by mathieu last monday).

Here's some code example to help understand the problem:

MainPage.aspx

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Bidon</title>
        <link rel="stylesheet" type="text/css" href="css/main.css" media="all" />
        <link rel="stylesheet" type="text/css" href="css/input.css" media="all" />
        <link rel="stylesheet" type="text/css" href="Prometheus/Vista/ComboBox.Vista.css" />
        <script src="js/input.js" type="text/javascript"></script>
        <script src="js/validation.js" type="text/javascript"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <radA:RadAjaxManager ID="RadAjaxManager1" runat="server">
            </radA:RadAjaxManager>
            <div>
                <button id="Button1" onclick="document.getElementById('healthQuestionnaire_mhContainer').style.display='block'; return false;" >Button</button>
                <div id="divHQ" runat="server" ><questionnaire id="healthQuestionnaire" runat="server"></questionnaire></div>
            </div>
        </form>
    </body>
</html>

MainPage.aspx.cs (I initilialize the radajaxmanager dynamicaly)

protected void Page_Load(object sender, EventArgs e)
        {
                //Get the WebUserControl
                UserControl MyControl = (UserControl)Page.FindControl("healthQuestionnaire");

                //Get user control's button and label
                Button MyButton = (Button)MyControl.FindControl("btnOk");
                HtmlGenericControl MyDiv = (HtmlGenericControl)MyControl.FindControl("mhContainer");

                //Add the necessary AJAX setting programmatically
                RadAjaxManager1.AjaxSettings.AddAjaxSetting(MyButton, MyDiv);

        }

UserControl.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="healthQuestionnaire.ascx.cs" Inherits="doctorPhone.signup.healthQuestionnaire" %>
<%@ Register Assembly="RadGrid.Net2" Namespace="Telerik.WebControls" TagPrefix="radG" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %>

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div id="mhContainer" runat="server" class="entireErrMsg" style="display: none;" >
    <div id="mhBox" runat="server" class="errorMsgBox" style="height: 150px;">
        <img src="images/messageBox/CornerLeft.png" alt="img" />
        <div runat="server" id="mhTitleBar" class="msgBorderTop" ></div>
        <img src="images/messageBox/CornerRight.png" alt="img" />
        <div class="msgBorderLeft" ></div>
        <div class="msgBoxContentArea" >
            <table style="width: 100%; height: 100%;">
                <tr>
                    <td style="width: 25%;">
                        <div class="text13_383838" style="float: right; margin-top: 15px;">Condition</div>
                    </td>
                    <td style="width: 75%;" >
                        <div style="float: right; margin-top:15px;">
                            <img style="margin-left:10px;" src="Prometheus/Vista/ComboBox/dropBoxLeftOFF.gif" id="imgPatientConditions_Input" />
                            <telerik:RadComboBox Width="239px" EnableEmbeddedSkins="False" Skin="Vista" ID="patientConditions"
                                runat="server" DataTextField="name" DataValueField="code" EnableLoadOnDemand="true" MarkFirstMatch="True" OnItemsRequested="patientConditions_ItemsRequested" >
                                <CollapseAnimation Duration="200" Type="OutQuint" />
                                <ExpandAnimation Type="OutQuart" />
                            </telerik:RadComboBox>
                        </div>
                    </td>
                </tr>
                <tr style="height: 40px;">
                    <td colspan="2" style="width: 395px; height: 40px; vertical-align:middle;" >
                        <div style="float: right;">
                            <div style="padding-right: 8px;" onmousedown="dpButtonMouseDown('btnCancelLeft','btnCancel','btnCancelRight')" onmouseup="dpButtonMouseUp('btnCancelLeft','btnCancel','btnCancelRight')" onmouseout="dpButtonMouseUp('btnCancelLeft','btnCancel','btnCancelRight')">
                                <img id="btnCancelLeft" src="images/buttons/btnLeftUp.png" alt="img" />
                                <button id="btnCancel" onclick="document.getElementById('healthQuestionnaire_mhContainer').style.display='none'; return false;" class="dpButton">Cancel</button>
                                <img id="btnCancelRight" src="images/buttons/btnRightUp.png" alt="img" />
                            </div>
                            <div onmousedown="dpButtonMouseDown('healthQuestionnaire_btnOkLeft','healthQuestionnaire_btnOk','healthQuestionnaire_btnOkRight')" onmouseup="dpButtonMouseUp('healthQuestionnaire_btnOkLeft','healthQuestionnaire_btnOk','healthQuestionnaire_btnOkRight')" onmouseout="dpButtonMouseUp('healthQuestionnaire_btnOkLeft','healthQuestionnaire_btnOk','healthQuestionnaire_btnOkRight')">
                                <img id="healthQuestionnaire_btnOkLeft" src="images/buttons/btnLeftUp.png" alt="img" />
                                <asp:Button id="btnOk" runat="server" CssClass="dpButton" Text="OK" OnClick="btnOk_Click" ></asp:Button>
                                <img id="healthQuestionnaire_btnOkRight" src="images/buttons/btnRightUp.png" alt="img" />
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <div class="msgBorderRight" ></div>
        <img src="images/messageBox/FooterLeft.png" alt="img" />
        <div class="msgBorderBottom" ></div>
        <img src="images/messageBox/FooterRight.png" alt="img" />
    </div>
</div>

UserControl.ascx.cs

public partial class healthQuestionnaire : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
                conditionDTO[] dtos = searchConditions(null);

                //Bind to datagrid
                patientConditions.DataSource = dtos;
                patientConditions.DataBind();
        }

        public conditionDTO[] searchConditions(String searchCriteria)
        {
            //Bind to webservice
            HealthServiceWS myService = new HealthServiceWS();
            conditionDTO[] dtos = myService.getConditions(new appSessionDTO(), searchCriteria);

            return dtos;
        }

        protected void patientConditions_ItemsRequested(object o, Telerik.Web.UI.RadComboBoxItemsRequestedEventArgs e)
        {
            RadComboBox combo = (RadComboBox)o;
            combo.Items.Clear();
            conditionDTO[] dtos = searchConditions(e.Text);

            foreach (conditionDTO dto in dtos)
            {
                RadComboBoxItem item = new RadComboBoxItem(dto.name);
                item.Value = dto.code.ToString();
                combo.Items.Add(item);
            }
        }

        protected void btnOk_Click(object sender, EventArgs e)
        {
            HttpCookie authCookie = Request.Cookies[CookieAttributes.COOKIE_NAME];
            HealthServiceWS myService = new HealthServiceWS();
            patientConditionDTO patientCondition = new patientConditionDTO();
            patientCondition.patientId = Int32.Parse(authCookie.Values.Get(CookieAttributes.ATT_PATIENT_ID));
            patientCondition.conditionId = Int32.Parse(patientConditions.SelectedItem.Value);
            myService.addPatientCondition(new appSessionDTO(), patientCondition);
            mhContainer.Style["display"] = "block";


        }
    }

Thx for the help
Phil

6 Answers, 1 is accepted

answered on 21 Jan 2008, 04:42 PM

AJAXEnabledWebSite14.zip

Hello Philippe,

Thank you for the provided code.

I suggest that you try to use RadAjaxManager "Prometheus".
Please find attached a project based on your approach. This sample worked as expected at our side.

Hope this helps.

Regards,
Rosi
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 24 Jan 2008, 06:59 PM

Hi,

I have modified the Promethues sample code posted by Telerik to reproduce the issue originally reported by Philippe on 1/18/2008. I can't find a way to upload the project zip so here is the code:

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Panel ID="Panel1" runat="server"></asp:Panel>
    </form>
</body>
</html>

Default.aspx.cs

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Init(object sender, EventArgs e)
    {
        UserControl MyControl = (UserControl)Page.LoadControl("DynamicContainer.ascx");
        MyControl.ID = "Container1";

        Panel1.Controls.Add(MyControl);

    }

    protected void Page_Load(object sender, EventArgs e)
    {
        UserControl MyControl = (UserControl)Page.FindControl("Container1");

        if (MyControl != null)
            MyControl.Visible = true;

    }

}

DynamicContainer.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="DynamicContainer.ascx.cs" Inherits="DynamicContainer" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:ScriptManager id="ScriptManager1" runat="server" />
<telerik:RadAjaxManager ID="RadAjaxManager" runat="server" />
<asp:Panel ID="MyPanel1" runat="server" />

DynamicContainer.ascx.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Telerik.Web.UI;

public partial class DynamicContainer : System.Web.UI.UserControl
{
    protected void Page_Init(object sender, EventArgs e)
    {

        Table MyTable = new Table();
        TableRow MyRow = new TableRow();
        TableCell ButtonCell = new TableCell();
        TableCell MyCell = new TableCell();

        UserControl MyControl = (UserControl)Page.LoadControl("WebUserControl.ascx");
        UserControl MyButton = (UserControl)Page.LoadControl("Button.ascx");

        MyControl.ID = "WebUserControl1";
        MyButton.ID = "MyButton1";
        MyTable.ID = "MyTable";
        MyRow.ID = "MyRow";
        ButtonCell.ID = "MyButtonCell";
        MyCell.ID = "MyCell";

        ButtonCell.Controls.Add(MyButton);
        MyCell.Controls.Add(MyControl);
        MyRow.Cells.Add(MyCell);
        MyRow.Cells.Add(ButtonCell);
        MyTable.Rows.Add(MyRow);
        MyPanel1.Controls.Add(MyTable);

        AjaxSetting setting = new AjaxSetting(MyButton.ID);
        AjaxUpdatedControl updated = new AjaxUpdatedControl();

        updated.ControlID = MyControl.ID;
        setting.UpdatedControls.Add(updated);
        RadAjaxManager.AjaxSettings.Add(setting);

    }
}

Button.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Button.ascx.cs" Inherits="Button" %>
<asp:Button ID="btnOk" runat="server" Text="Button" OnClick="btnOk_Click" />

Button.ascx.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Button : System.Web.UI.UserControl
{
    protected void Page_Init(object sender, EventArgs e)
    {

    }

    protected void btnOk_Click(object sender, EventArgs e)
    {

    }

}

WebUserControl.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<telerik:RadComboBox ID="RadComboBox1" runat="server" EnableLoadOnDemand=true OnItemsRequested="RadComboBox1_ItemsRequested" />

WebUserControl.ascx.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Telerik.Web.UI;

public partial class WebUserControl : System.Web.UI.UserControl
{
    protected void Page_Init(object sender, EventArgs e)
    {

    }
    protected void RadComboBox1_ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)
    {
        RadComboBox1.Items.Add(new RadComboBoxItem("test"));

    }
}

answered on 25 Jan 2008, 10:57 AM

WebSite74.zip

Hi Tim,

My suggesting is to find the button by the following way and give it as a parameter of AjaxSetting constructor:

    
                System.Web.UI.WebControls.Button btn = (System.Web.UI.WebControls.Button)MyPanel1.FindControl("MyButton1").FindControl("btnOk");  
        
                    AjaxSetting setting = new AjaxSetting(btn.ID);  
        
                    AjaxUpdatedControl updated = new AjaxUpdatedControl();  
        
                    updated.ControlID = MyControl.ID;  
        
                    setting.UpdatedControls.Add(updated);  
        
                    RadAjaxManager1.AjaxSettings.Add(setting);

Then it can be the control which will update the user control containing RadComboBox.

Please see the attached project for a reference.

Regards,
Rosi
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 25 Jan 2008, 10:41 PM

Thanks for the response and sample code. Unfortunately, this approach doesn't work if multiple instances of the same user control are dynamically loaded into the page. What happens is that the first instance is "Ajaxified" but all others cause a full postback.

The following snippet demonstrates what I mean. "MyButton1" will be Ajaxified but "MyButton2" will cause a full postback.

UserControl MyControl = (UserControl)Page.LoadControl("WebUserControl.ascx");

UserControl MyControl2 = (UserControl)Page.LoadControl("WebUserControl.ascx");

UserControl MyButton = (UserControl)Page.LoadControl("Button.ascx");

UserControl MyButton2 = (UserControl)Page.LoadControl("Button.ascx");

MyControl.ID =

"WebUserControl1";

MyControl2.ID =

"WebUserControl2";

MyButton.ID =

"MyButton1";

MyButton2.ID =

"MyButton2";

MyPanel1.Controls.Add(MyControl);

MyPanel1.Controls.Add(MyButton);

MyPanel1.Controls.Add(MyControl2);

MyPanel1.Controls.Add(MyButton2);

System.Web.UI.WebControls.

Button btn = (System.Web.UI.WebControls.Button)MyPanel1.FindControl("MyButton1").FindControl("btnOk");

AjaxSetting setting = new AjaxSetting(btn.ID);

AjaxUpdatedControl updated = new AjaxUpdatedControl();

Telerik.Web.UI.

RadComboBox cmb = (Telerik.Web.UI.RadComboBox)MyPanel1.FindControl("WebUserControl1").FindControl("RadComboBox1");

updated.ControlID = cmb.ID;

setting.UpdatedControls.Add(updated);

RadAjaxManager1.AjaxSettings.Add(setting);

System.Web.UI.WebControls.

Button btn2 = (System.Web.UI.WebControls.Button)MyPanel1.FindControl("MyButton2").FindControl("btnOk");

AjaxSetting setting2 = new AjaxSetting(btn2.ID);

AjaxUpdatedControl updated2 = new AjaxUpdatedControl();

Telerik.Web.UI.

RadComboBox cmb2 = (Telerik.Web.UI.RadComboBox)MyPanel1.FindControl("WebUserControl2").FindControl("RadComboBox1");

updated2.ControlID = cmb2.ID;

setting2.UpdatedControls.Add(updated2);

RadAjaxManager1.AjaxSettings.Add(setting2);

answered on 30 Jan 2008, 12:30 PM

WebSite74.zip

Hi Tim,

Find attached your modified project that works as expected. Note that you should add the AjaxSettings in Page_Load instead of Init() due to RadAjax specifics. Also when you have AjaxSettings for all controls within a container, it is a better approach to ajaxify the whole container, instead of single controls one by one. The latter causes numerous DOM recalculations and to the contrary of what is expected is slower. Give it a spin and let us know how it goes.

All the best,
Steve
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 30 Jan 2008, 03:50 PM

Thanks Steve!

fyi, we had previously tried Ajaxifying the whole container and that definitely worked. However, in our case the container holds 60+ user controls and only a handful are Ajaxified. We ultimately solved our issue by assigning unique control ids to controls inside our user controls and using those unique ids for both the AjaxSetting and AjaxUpdatedControl (we exposed the unique id through a common interface that all our controls implement). Right now everything seems to be working (we are stilll adding the AjaxSettings in Init rather than Load but it doesn't seem to be hurting us but we'll keep an eye on it). The lesson learned for us was not to use the UserControl ID for the AjaxSetting and AjaxUpdatedControl - this caused issues (for us) with the RadCombo disabling after postback and also the loading panel never worked.

Thanks to the telerik team for all your help and for being responsive.

Tim Ward