Blank line in IE when all controls are not visible

8 posts, 0 answers
  1. Afonso Mendes
    Afonso Mendes avatar
    5 posts
    Member since:
    Jan 2006

    Posted 05 Sep 2007 Link to this post

    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;  
            }  
        }  
  2. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 06 Sep 2007 Link to this post

    Hello Afonso,

    Firefox and Opera do not respect the background-color for the divs and that is why the issue is not visible there. It comes from the fact that you have 2 AjaxSettings for the same initiator and controls nested in the same container. Try adding runat="server" to your MasterDiv and add it to the AjaxSettings instead of the inner divs.

    Kind regards,
    Steve
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Afonso Mendes
    Afonso Mendes avatar
    5 posts
    Member since:
    Jan 2006

    Posted 10 Sep 2007 Link to this post

    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.
  5. John
    John avatar
    416 posts
    Member since:
    Oct 2006

    Posted 12 Sep 2007 Link to this post



    Please post the code of the problematic page and I will advise you.


    Thank you...
    [John Peel]
  6. Afonso Mendes
    Afonso Mendes avatar
    5 posts
    Member since:
    Jan 2006

    Posted 12 Sep 2007 Link to this post

    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.
  7. Plamen Peshev
    Admin
    Plamen Peshev avatar
    886 posts

    Posted 14 Sep 2007 Link to this post

    Hello Afonso and John,


    Afonso , thank you very much for pointing this issue, it will be fixed for the next release. Your Telerik points have been updated for the report.


    Greetings,
    Plamen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  8. Doug Bass
    Doug Bass avatar
    2 posts
    Member since:
    Sep 2008

    Posted 09 Oct 2008 Link to this post

    Was this problem ever resolved?  We are using "RadControls for ASPNET AJAX Q2 2008".  I have an <asp:Panel> control on my page that is being output to the page, even when its Visible property is set to False.  If I remove the Panel control from the UpdatedControls collection of my AjaxSetting in the RadAjaxManager, the Panel is no longer rendered and the problem goes away, but obviously I can no longer update my Panel contents via AJAX.  Sometimes I want to update it, and sometimes I want it to be invisible.  When I make it invisible, a blank line is being rendered instead.
  9. Plamen Peshev
    Admin
    Plamen Peshev avatar
    886 posts

    Posted 13 Oct 2008 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017