Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Splitter > radsplitter 100% height on Chrome with AjaxUpdatedControl

Not answered radsplitter 100% height on Chrome with AjaxUpdatedControl

Feed from this thread
  • Chen Khang avatar

    Posted on Mar 15, 2011 (permalink)

    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>

    Reply

  • Niko Niko admin's avatar

    Posted on Mar 16, 2011 (permalink)

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

    Reply

    • Say Hello to Telerik's PivotGrid for ASP.NET AJAX, Silverlight, WPF and WinForms. Now packed with OLAP support.
  • Chen Khang avatar

    Posted on Mar 17, 2011 (permalink)

    Thanks Niko, it works now!

    Reply

  • Chen Khang avatar

    Posted on Mar 28, 2011 (permalink)

    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

    Reply

  • Niko Niko admin's avatar

    Posted on Mar 29, 2011 (permalink)

    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
    Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!

    Reply

    • Say Hello to Telerik's PivotGrid for ASP.NET AJAX, Silverlight, WPF and WinForms. Now packed with OLAP support.

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Splitter > radsplitter 100% height on Chrome with AjaxUpdatedControl
Related resources for "radsplitter 100% height on Chrome with AjaxUpdatedControl"

[  ASP.NET Splitter Features   |  Documentation   |  Demos |  Step-by-step Tutorial  ]