radsplitter 100% height on Chrome with AjaxUpdatedControl

5 posts, 0 answers
  1. CK
    CK avatar
    7 posts
    Member since:
    Jul 2009

    Posted 15 Mar 2011 Link to this post

    Hi there,

    I have a radsplitter on 100% height. Everything seems to be working fine until I attach a AjaxUpdatedControl to the radsplitter.

    Once I attach the AjaxUpdatedControl, the height of the radsplitter seems to be fixed at a particular height. You can refer to the 2 files to see the difference.

    Below are my code

    Btw, this only happens in Chrome. It works fine in IE8 and Opera. Haven't tested on FF.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="page_defaultmainpage.aspx.cs" Inherits="TravelBooking.page_defaultmainpage" %>
    <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head id="Head1" runat="server">
        <meta http-equiv="X-UA-Compatible" content="IE=7" />
        <title>ONLINE SYSTEM</title>
        <style type="text/css">
            html, body, form
            {
                margin: 0px;
                padding: 0px;
                height: 100%;
                width: 100%;
                overflow: hidden;
            }
        </style>
    </head>
    <body style="height: 100%; margin: 0px; overflow: hidden;">
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="ExRadScriptManager" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadAjaxManager ID="ExRadAjaxManager" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="LeftPane">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="MainSplitter" LoadingPanelID="LoadingPanelAnimated" UpdatePanelRenderMode="Inline">
                        </telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="LoadingPanelAnimated" runat="server" BackColor="White"
            Transparency="38" MinDisplayTime="3000" Height="800px">
            <table cellpadding="0" cellspacing="0" style="width: 100%; height: 100%;">
                <tr>
                    <td align="center" valign="middle" style="padding-bottom: 100px">
                        <img alt="Loading..." src='images/ajax-loader.gif' style="border: 0;" />
                    </td>
                </tr>
            </table>
        </telerik:RadAjaxLoadingPanel>
        <table style="border-style: solid; border-width: 0px 0px 2px 0px; border-color: #808080;
            width: 100%;">
            <tr>
                <td width="480">
                    <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl=""
                        PostBackUrl="~/management.aspx" Height="110px" />
                </td>
                <td>
                    <asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Names="Verdana" Font-Size="13pt"
                        Text="MAIN MANAGEMENT"></asp:Label>
                </td>
            </tr>
        </table>
        <div runat="server" id="super" style="width: 100%; height: 100%; background-color: #FF0000;">
        <telerik:RadSplitter ID="MainSplitter" runat="server" Skin="Black" Width="100%" Height="100%" HeightOffset="148" VisibleDuringInit="false">
            <telerik:RadPane ID="LeftPane" runat="server" Width="200px" BackColor="Black" BorderStyle="Solid">
                <div style="margin-top: 10px; margin-left: 8px; background-color: #000000;">
                    <telerik:RadTreeView ID="ExLeftNavigator" runat="server" Skin="Black" Font-Bold="True"
                        Font-Names="Tahoma" Font-Size="8pt" >
                        <Nodes>
                            <telerik:RadTreeNode runat="server" Text="Management" Expanded="True">
                                <Nodes>
                                    <telerik:RadTreeNode runat="server" Text="Option One">
                                    </telerik:RadTreeNode>
                                    <telerik:RadTreeNode runat="server" Text="Option Two">
                                    </telerik:RadTreeNode>
                                </Nodes>
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode runat="server" Text="Booking Schedule" Expanded="True">
                                <Nodes>
                                    <telerik:RadTreeNode runat="server" Text="Option Three">
                                    </telerik:RadTreeNode>
                                </Nodes>
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode runat="server" Text="Others">
                            </telerik:RadTreeNode>
                        </Nodes>
                    </telerik:RadTreeView>
                </div>
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitBar1" runat="server" />
            <telerik:RadPane ID="ContentPane" runat="server" BackColor="White">
            </telerik:RadPane>
        </telerik:RadSplitter>
     
        <table style="border: 1px solid #808080; width: 100%; background-color: #000000;
            height: 30px;">
            <tr>
                <td width="480">
                      
                    <asp:Label ID="Label3" runat="server" Text="Current Page:" Font-Bold="True" Font-Names="Tahoma"
                        Font-Size="9pt" ForeColor="White"></asp:Label>
                     <asp:Label ID="lbCurrentPage" runat="server" Font-Bold="True" Font-Names="Tahoma"
                        Font-Size="9pt" ForeColor="White"></asp:Label>
                </td>
                <td>
                </td>
            </tr>
        </table>
            </div>
        </form>
    </body>
    </html>
  2. Niko
    Admin
    Niko avatar
    387 posts

    Posted 16 Mar 2011 Link to this post

    Hello Chen,

    Usually, when having a splitter with height equal to 100% and an AjaxManager that handles it, one can use the UpdatePanelHeight property of the AjaxUpdatedControl with the value of 100%. This will persist the max height for the panes inside the splitter.
    However in your case there is additional content - header and footer, that interfere with this setup. Therefore I advice you to add another splitter with 3 panes - headerPane, mainPane and footerPane. Within each of the panes you can add the corresponding elements. Please, find attached a sample implementation based on the code that you provided.

    Hope this helps.

    Greetings,
    Niko
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. CK
    CK avatar
    7 posts
    Member since:
    Jul 2009

    Posted 17 Mar 2011 Link to this post

    Thanks Niko, it works now!
  5. CK
    CK avatar
    7 posts
    Member since:
    Jul 2009

    Posted 28 Mar 2011 Link to this post

    Hi there,

    Just a follow up question on the same sample.

    Whenever I click on the LeftPanel navigation to load on the content, the UpdatePanel will load, but it will finish even before the page is completely loaded in "ContentPane".

    I've set the MinDisplayTime = 3000, but sometimes the ContentPane will take longer than 3000 ms to load, but the UpdatePanel has already disappear by then.

    Is there anyway to force the UpdatePanel to continue be visible until after ContentPane is completely loaded?

    I'm using the following code-behind inside ExLeftNavigator_NodeClick event:
    - ContentPane.ContentUrl = "page_thecontent.aspx";

    Thanks
  6. Niko
    Admin
    Niko avatar
    387 posts

    Posted 29 Mar 2011 Link to this post

    Hello Chen,

    What you need in this case is set the ShowContentDuringLoad property of the content pane to false. Thus you will have a loading animation throughout the whole loading time of the pane. One drawback is that the loading image is not a RadAjaxLoadingPanel, but rather another image. Still you can override this image by setting the following CSS rule:
    .RadSplitter_Black .rspLoading
    {
        background-image: url('your image url here') !important;
    }

    Hope this helps.

    Kind regards,
    Niko
    the Telerik team
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017