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

Ajaxmanager, Panel Visible

2 Answers 89 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Roger Barnes
Top achievements
Rank 1
Roger Barnes asked on 06 Oct 2008, 02:42 PM

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 Answers, 1 is accepted

Sort by
0
Todd Anglin
Top achievements
Rank 2
answered on 06 Oct 2008, 07:17 PM
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
0
Roger Barnes
Top achievements
Rank 1
answered on 06 Oct 2008, 08:47 PM

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 

Tags
Ajax
Asked by
Roger Barnes
Top achievements
Rank 1
Answers by
Todd Anglin
Top achievements
Rank 2
Roger Barnes
Top achievements
Rank 1
Share this question
or