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

Blank line in IE when all controls are not visible

7 Answers 157 Views

Ajax

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

Afonso Mendes asked on 05 Sep 2007, 09:00 AM

Hello,
in my project I have one container that can host several controls but only one is visible at a time.

If all the controls in the container are not visible a blank line persist. This only happens in IE.

It seems to me that the Panel added by the manager adds a blank line that the IE renders.

Best regards.

Here is an example illustrating the problem.

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

<%@ Register Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" TagPrefix="telerik" %> 

<!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> 

    <script type="text/javascript">  

        function ResponseEnd()  

        {  

        }  

    </script> 

    <form id="form1" runat="server">  

        <asp:ScriptManager ID="ScriptManager1" runat="server" /> 

        <telerik:RadAjaxManager ID="RadAjaxManager" runat="server" ClientEvents-OnResponseEnd="ResponseEnd()" /> 

        <div id="MasterDiv" style="height: 200px; width: 200px; border: solid 2px black;">  

            <div id="Div1" runat="server" visible="true" style="width: 200px; height: 200px; background-color: Gray;">  

            </div> 

            <div id="Div2" runat="server" visible="false" style="width: 200px; height: 200px; background-color: Teal;">  

            </div> 

        </div> 

        <asp:Button ID="btn" OnClick="btn_OnClick" runat="server" Text="Toggle Panel" /> 

    </form> 

</body> 

</html>

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_Load(object sender, EventArgs e)  

    {  

        RadAjaxManager.AjaxSettings.AddAjaxSetting(btn, Div1);  

        RadAjaxManager.AjaxSettings.AddAjaxSetting(btn, Div2);  

    }  

    protected void btn_OnClick(Object sender, EventArgs e)  

    {  

        if (Div2.Visible)  

        {  

            Div2.Visible = false;  

            Div1.Visible = true;  

        }  

        else  

        {  

            Div1.Visible = false;  

            Div2.Visible = true;  

        }  

    }  

}

7 Answers, 1 is accepted

answered on 10 Sep 2007, 09:59 AM

Hello Steve, thanks for you answer.
True, this does work in this example. But I only used it to show the blank line.
I'm my project I cannot update the entire panel because I have controls that I don't want to change. The controls have RadGrid and RadTree and for performance reasons I have the viewstate disabled.

I really think this is a bad render issue. Why would a panel with all child controls not visible still render something?

I don't know if you prefer that I open another topic, but I have another question.
I have one callback that doesn't add anything to AjaxSetting, it doesn't update anything in the client, only returns some ResponseScripts.
But if I do this the AjaxManage ceases to run the ClientEvents-OnResponseEnd.
To overcome this problem I have a dummy invisible control that it's always updated.
Is there a better way to do it?

If you want I can send a small example.

Regards.

answered on 12 Sep 2007, 01:20 PM

Hello John,
here is the example.
If you click on the "Show time" button the alert window in the ClientEvents-OnResponseEnd pops as it should. Clicking on the "Alert time" button shows the alert only one time, subsequent clicks in any button doesn't run the ClientEvents-OnResponseEnd script.

Another thing that I find strange is that the ClientEvents-OnResponseEnd script runs first than the OnResponseScripts. That really doesn't make any sense the ClientEvents-OnResponseEnd script should be the last one.

Default.aspx

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

<%@ Register Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" TagPrefix="telerik" %> 

<!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> 

    <script type="text/javascript">  

        function ResponseEnd()  

        {  

            alert("Callback ended");  

        }  

        function DoCallback(arg)  

        {  

            <%= RadAjaxManager.ClientID %>.AjaxRequest(arg);  

            return false;  

        }  

    </script> 

    <form id="form1" runat="server">  

        <asp:ScriptManager ID="ScriptManager1" runat="server" /> 

        <telerik:RadAjaxManager ID="RadAjaxManager" runat="server" ClientEvents-OnResponseEnd="ResponseEnd()" /> 

        <asp:Label ID="label" runat="server" /> 

        <asp:Button ID="alert" runat="server" OnClientClick="DoCallback('alert'); return false;" Text="Alert time" /> 

        <asp:Button ID="show" runat="server" OnClientClick="DoCallback('show'); return false;" Text="Show time" /> 

    </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_Load(object sender, EventArgs e)  

    {  

        if (!Page.IsPostBack)  

        {  

            RadAjaxManager.AjaxSettings.AddAjaxSetting(RadAjaxManager, label);  

        }  

        RadAjaxManager.AjaxRequest += new Telerik.Web.UI.RadAjaxControl.AjaxRequestDelegate(RadAjaxManager_AjaxRequest);  

    }  

    void RadAjaxManager_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)  

    {  

        switch (e.Argument)  

        {  

            case "show":  

                label.Text = DateTime.Now.ToString();  

                RadAjaxManager.AjaxSettings.AddAjaxSetting(RadAjaxManager, label);  

                break;  

            case "alert":  

                RadAjaxManager.ResponseScripts.Add("alert('" + DateTime.Now.ToString() + "');");  

                break;  

        }  

    }  

}

Best regards.

answered on 13 Oct 2008, 10:04 AM

Hi Doug,

RadAjax cannot update invisible controls. This is discussed in the online help article:

http://www.telerik.com/help/aspnet/ajax/ajxmostcommonmistakes.html

The visibility of controls is best controlled during the ajax request if they are placed inside a control on the page that is always visible. Here are the exact steps:

   1. Place the control in an element which is always visible, such as a Panel, an AJAX Panel or a DIV.
   2. Add this visible control to the AJAX pairs where the AJAX initiator control should update the visible control.
   3. Change the Visible property of the control you want to hide/show.

Best wishes,
Plamen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.