Usercontrol fails to retain viewstate values for input controls between postbacks in RadAjaxPanel

5 posts, 0 answers
  1. Bryan
    Bryan avatar
    8 posts
    Member since:
    May 2016

    Posted 03 May Link to this post

    Recently I ran into a strange issue where my usercontrols, when there are two or more of them managed by ajaxToolkit:ModalPopupExtender nested in another usercontrol, in RadAjaxPanel would lose input values between postbacks. There is no such issue with any other controls outside or the usercontrol parenting the problematic usercontrols. 

    As a revelation of my debugging attempts setting one of the problematic controls to visible false (and set it back to visible when they are supposed to appear in the modal popup) would solve this issue.

    Here is my code:

    Problematic controls:

    01.<asp:Panel ID="FileDefinitionEdit" CssClass="sbpopup" style="display:none"  runat="server"    >
    02.                                
    03.              
    04.                                         <div class="popupholder" style="width:1000px">
    05.        <uc3:FileDefinitionEdit ID="FileDefinitionEditAscx" runat="server"  visible="false"  />
    06.                                             <div class="popbuttonarea">  <asp:Button ID="Button5"  OnClick="Button5_Click" CssClass="btn btn-primary btn-sm"  runat="server" Text="Insert"  />
    07.                        <asp:Button ID="Button6" CssClass="btn btn-primary btn-sm"   OnClick="Button6_Click"   runat="server" Text="Cancel" /></div>
    08.                                </div>
    09. 
    10.                              
    11.    </asp:Panel>
    12. 
    13. <asp:Panel ID="ConnectionStringEdit" CssClass="sbpopup"  style="display:none"  runat="server"   >
    14.                                
    15.                                     
    16.                                         <div class="popupholder" style="width:1000px">
    17.        <uc2:ConnectionStringEdit ID="ConnectionStringEditAscx" runat="server"   Visible="false"   />
    18.                                             <div class="popbuttonarea">  <asp:Button ID="Button4"  OnClick="Button4_Click" CssClass="btn btn-primary btn-sm"  runat="server" Text="Insert" />
    19.                        <asp:Button ID="Button3" CssClass="btn btn-primary btn-sm"   OnClick="Button6_Click"   runat="server" Text="Cancel" /></div>
    20.                                </div>
    21. 
    22.         
    23.                                         
    24.    </asp:Panel>
    25. 
    26. 
    27.    
    28.    <asp:Button ID="MPECTRL_Button"  CssClass="hiddenControl"   runat="server" Text="Button" />
    29. 
    30.    <ajaxToolkit:ModalPopupExtender  ID="PopupInsert_ModalPopupExtender" runat="server" TargetControlID="MPECTRL_Button"    PopupControlID="ConnectionStringEdit"      /> 
    31.                           

     

    Parent control of the problematic controls:

    1.<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ProcessesControl.ascx.cs"   Inherits="BizData.Perspective.DataGovernor.Controls.ProcessesControl" %>
    2.<%@ Register Src="ParametersControl.ascx" TagName="ParametersControl" TagPrefix="uc1" %>
    3.<%@ Register Src="ConnectionStringEdit.ascx" TagName="ConnectionStringEdit" TagPrefix="uc2" %>
    4.<%@ Register Src="FileDefinitionEdit.ascx" TagName="FileDefinitionEdit" TagPrefix="uc3" %>
    5. 
    6.<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit"  %>
    7. 
    8....

     

    Master Page:

    01.//Header
    02....
    03.<body style="margin: 0px; height: 100%; overflow: hidden;">
    04.    <form id="Form1" runat="server">
    05.        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    06.        </telerik:RadScriptManager>
    07.        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
    08.        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel2">
    09.            <AjaxSettings>
    10.                <telerik:AjaxSetting AjaxControlID="RadAjaxPanel1">
    11.                    <UpdatedControls>
    12.                        <telerik:AjaxUpdatedControl ControlID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel2" />
    13.                    </UpdatedControls>
    14.                </telerik:AjaxSetting>
    15.            </AjaxSettings>
    16.        </telerik:RadAjaxManager>
    17.//Where all contents and controls reside:
    18.        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Width="100%" Height="100%">
    19. <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal" BorderStyle="None"
    20.                BorderSize="0" LiveResize="true" Width="100%" Height="100%" RegisterWithScriptManager="true"
    21.                RenderMode="Lightweight" >
    22. <telerik:RadPane ID="rpHeader" runat="server" BorderStyle="None" BorderWidth="0"
    23.                    Height="45px" CssClass="visibleOverflow">
    24....
    25.   </telerik:RadPane>
    26.            </telerik:RadSplitter>
    27. 
    28.        </telerik:RadAjaxPanel>
    29. 
    30.        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel2" runat="server" Transparency="10">
    31.            <div class="loading" style="text-align: left; padding-top: 45px; padding-left: 98%">
    32.                <asp:Image ID="Image2" runat="server" ImageUrl="images/loading1.gif" AlternateText="loading.."
    33.                    Width="16px" Height="16px" />
    34.            </div>
    35.        </telerik:RadAjaxLoadingPanel>
    36....
    37.//Datasources and footer

    My wild guess would be too many usercontrols would exceed the viewstate capacity of some sort, resulting their input values to be truncated between postbacks.

    Any ideas?

  2. Bryan
    Bryan avatar
    8 posts
    Member since:
    May 2016

    Posted 03 May in reply to Bryan Link to this post

    Forgot to mention I also tried my luck putting the controls in RadAjaxPanel and the issue persisted.

    Couldn't get the native UpdatePanel to work either. Got an error "Could not find UpdatePanel with ID" as everything is already encapsulated in the RadAjaxPanel on the master page which causes an conflict.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 03 May Link to this post

    Hi Bryan,

    You should either use RadAjaxPanel or configure the RadAjaxManager to update something.

    Here is configuration with the manager:
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel2">
      <AjaxSettings>
      <telerik:AjaxSetting AjaxControlID="aspPanel1">
        <UpdatedControls>
          <telerik:AjaxUpdatedControl ControlID="aspPanel1" />
          </UpdatedControls>
        </telerik:AjaxSetting>
      </AjaxSettings>
    </telerik:RadAjaxManager>
    <asp:Panel runat="server" id="aspPanel1">
      your content
    </asp:Panel>

    And here is with the UpdatePanel:
    <telerik:RadAjaxPanel runat="server" id="RadAjaxPanel1">
      your content
    </telerik:RadAjaxPanel>

    At this case the both will behave the same. Buttons inside your content will make ajax calls and the content will update without full post back.

    However this is not valid configuration, even if it will work in most of the cases, it can cause problems in more complex scenarios:

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
      <AjaxSettings>
      <telerik:AjaxSetting AjaxControlID="RadAjaxPanel1">
        <UpdatedControls>
          <telerik:AjaxUpdatedControl ControlID="RadAjaxPanel1"/>
          </UpdatedControls>
        </telerik:AjaxSetting>
      </AjaxSettings>
    </telerik:RadAjaxManager>
     
    <telerik:RadAjaxPanel runat="server" id="RadAjaxPanel1">
      your content
    </telerik:RadAjaxPanel>

    Regards,
    Vasil
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  5. Bryan
    Bryan avatar
    8 posts
    Member since:
    May 2016

    Posted 04 May Link to this post

     

    Hi Vasil,

    Thanks for the quick response. However the problem persists despite configuring the Radajaxmanager to manage the Radajaxpanels. Here is the updated code:

    Master Page:

    ...
    <body style="margin: 0px; height: 100%; overflow: hidden;">
        <form id="Form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            </telerik:RadScriptManager>
            <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel2">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadAjaxPanel1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel2" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="FileDefinitionEdits">
        <UpdatedControls>
          <telerik:AjaxUpdatedControl ControlID="FileDefinitionEdits"/>
          </UpdatedControls>
        </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="ConnectionStringEdits">
        <UpdatedControls>
          <telerik:AjaxUpdatedControl ControlID="ConnectionStringEdits"/>
          </UpdatedControls>
        </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
           
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Width="100%" Height="100%">
    ...

    Parent Control:

    ...
     
    <telerik:RadAjaxPanel ID="FileDefinitionEdits" CssClass="sbpopup" style="display:none"  runat="server"    >
                                    
                  
                                             <div class="popupholder" style="width:1000px">
            <uc3:FileDefinitionEdit ID="FileDefinitionEditAscx" runat="server"    />
                                                 <div class="popbuttonarea">  <asp:Button ID="Button5"  OnClick="Button5_Click" CssClass="btn btn-primary btn-sm"  runat="server" Text="Insert"  />
                            <asp:Button ID="Button6" CssClass="btn btn-primary btn-sm"   OnClick="Button6_Click"   runat="server" Text="Cancel" /></div>
                                    </div>
     
                                  
        </telerik:RadAjaxPanel>
     
     <telerik:RadAjaxPanel ID="ConnectionStringEdits" CssClass="sbpopup"  style="display:none"  runat="server"   >
                                    
                                         
                                             <div class="popupholder" style="width:1000px">
            <uc2:ConnectionStringEdit ID="ConnectionStringEditAscx" runat="server"     />
                                                 <div class="popbuttonarea">  <asp:Button ID="Button4"  OnClick="Button4_Click" CssClass="btn btn-primary btn-sm"  runat="server" Text="Insert" />
                            <asp:Button ID="Button3" CssClass="btn btn-primary btn-sm"   OnClick="Button6_Click"   runat="server" Text="Cancel" /></div>
                                    </div>
     
             
                                             
        </telerik:RadAjaxPanel>
     
    ...

    Input controls in the usercontrols still fail to retain their values between postbacks and the Modalpopupextender disappears after postback so it is even worse... :(

  6. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 09 May Link to this post

    Hi Bryan,

    I believe you get me wrong in my previous post, since your last code is exactly the non-supported example.
    First two options are the valid configurations, and the third is invalid.

    You can test it further using asp:UpdatePanels instead of the RadAjaxPanels and remove the manager, to confirm if the problem is inside the manager itself, or in the PopupExtender.

    Regards,
    Vasil
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017