Ajaxmanager, Panel Visible

3 posts, 0 answers
  1. Roger Barnes
    Roger Barnes avatar
    38 posts
    Member since:
    May 2008

    Posted 06 Oct 2008 Link to this post


    When you have a panel with a style of absolute, and set the panel visible to false, the div tags are left, leaving a blank line on your page.  This only happens if your using AjaxManager.

    Per the visible tag, the control shouldn't be rendered at all.

    This is a major issue with the way we have our application structured, as we use allot of overlays (absolute positioned) panels.

    Sample aspx

    <

     

    telerik:RadScriptManager ID="RadScriptManager1" runat="server">

     

     

    </telerik:RadScriptManager>

     

     

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

     

     

    <AjaxSettings>

     

     

    <telerik:AjaxSetting AjaxControlID="btnShow">

     

     

    <UpdatedControls>

     

     

    <telerik:AjaxUpdatedControl ControlID="PanelTest" />

     

     

    </UpdatedControls>

     

     

    </telerik:AjaxSetting>

     

     

    <telerik:AjaxSetting AjaxControlID="btnHide">

     

     

    <UpdatedControls>

     

     

    <telerik:AjaxUpdatedControl ControlID="PanelTest" />

     

     

    </UpdatedControls>

     

     

    </telerik:AjaxSetting>

     

     

    </AjaxSettings>

     

     

    </telerik:RadAjaxManager>

     

     

     

    <asp:Button ID="btnShow" runat="server" Text="Show Panel" />

     

     

    <asp:Button ID="btnHide" runat="server" Text="Hide Panel"/>

     

     

    <br />

     

    Just before the Panel

     

     

    <

     

    asp:Panel ID="PanelTest" runat="server" style="position:absolute; background-color: WhiteSmoke;border-color:LightGrey;border-width:3px;border-style:Ridge;" Visible="true">

     

     

     

     

     

    This is a test area that is to be shown absolute positioned

     

     

    </asp:Panel>

     

    Just After the Panel

    CodeBehind

     

    Protected

     

    Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

     

     

    If Not IsPostBack Then

     

     

     

     Me.PanelTest.Visible = False

     

     

     

     End If

     

     

     

     End Sub

     

     

     

     

     

     

    Private Sub btnShow_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnShow.Click

     

     

    Me.PanelTest.Visible = True

     

     

     

    End Sub

     

     

     

    Private Sub btnHide_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnHide.Click

     

    Me.PanelTest.Visible = False

     

     

     

    End Sub

     

  2. Todd Anglin
    Todd Anglin avatar
    2040 posts
    Member since:
    Aug 2005

    Posted 06 Oct 2008 Link to this post

    Hello Roger-

    The key here is that Ajax (as a technology) relies on the concept of asynchronously updating HTML elements on page. That is, when a change is made on the server, JavaScript is responsible for finding the old element on the page and then updating it with the new HTML. For this to work, the HTML element must always be there for updating.

    Setting a ASPNET panel's visibility to false causes it to not render to the page, thus it cannot be updated by Ajax. The most common way to workaround this is to wrap your ASPNET panels in an "always visibile" panel and then make that "container panel" the target of your Ajax operations. You can see an example of this here:


    The other workaround is to not use the Visible property of ASPNET panels and instead rely on setting the CSS attribute "Display" to "None," but that requires a few code changes (not hard changes, but changes nonetheless).

    Hope that helps.

    -Todd
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Roger Barnes
    Roger Barnes avatar
    38 posts
    Member since:
    May 2008

    Posted 06 Oct 2008 Link to this post


    But why if I create a panel set it's visible to false the intitial post of the page doesn't have a blank line, but if I do a couple postbacks and set the panel to visible then back to false, I get a blank line, when it wasn't there on the initial page load.

    I had already found that wrapping it in wrapper panel, is a work around, but this doesn't work if the contents is a user control, you still get a blank line.  Even if you have the wrapper panel, and wire up a  button in the user control to fire an ajax request on the wrapper panel.

    Suggestions

     

    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
            </telerik:RadScriptManager> 
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">  
                <AjaxSettings> 
                    <telerik:AjaxSetting AjaxControlID="btnShow">  
                        <UpdatedControls> 
                            <telerik:AjaxUpdatedControl ControlID="PanelTest" /> 
                            <telerik:AjaxUpdatedControl ControlID="PanelContext" /> 
                              
                        </UpdatedControls> 
                    </telerik:AjaxSetting> 
                </AjaxSettings> 
            </telerik:RadAjaxManager> 
            <asp:Button ID="btnShow" runat="server" Text="Show Panel" /> 
            <br /> 
           Before User Control  
            <asp:Panel ID="PanelContext" runat="server">  
                <asp:Panel ID="PanelUserControl" runat="server" CssClass="Context">  
                    <uc1:UserControl ID="UserControl1" runat="server"></uc1:UserControl> 
                </asp:Panel> 
            </asp:Panel> 
            After User Control 

    CodeBehind
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load  
     
            If Not IsPostBack Then  
                Me.PanelUserControl.Visible = False 
            End If  
     
        End Sub  
     
        Private Sub btnShow_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnShow.Click  
            Me.PanelUserControl.Visible = True 
        End Sub  
     
     
        Private Sub UserControl1_Cancel() Handles UserControl1.Cancel  
     
            Dim MyControl As UserControl = CType(Me.UserControl1, UserControl)  
            Dim MyButton As Button = CType(MyControl.FindControl("btnCancel"), Button)  
            Me.RadAjaxManager1.AjaxSettings.AddAjaxSetting(MyButton, Me.PanelContext, Nothing)  
     
            Me.PanelUserControl.Visible = False 
     
        End Sub 

    UserControl ASPX
    User Control<br /> 
    <asp:Button ID="btnCancel" runat="server" Text="Cancel" /> 

    UserControl CodeBehind
     Event Cancel()  
     
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load  
     
        End Sub  
     
     
        Private Sub btnCancel_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnCancel.Click  
            RaiseEvent Cancel()  
        End Sub 

Back to Top