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

radsplitter 100% height on Chrome with AjaxUpdatedControl

4 Answers 188 Views

Splitter

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

CK asked on 15 Mar 2011, 01:31 PM

with-AjaxUpdatedControl.JPG

without-AjaxUpdatedControl.JPG

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

<html xmlns="http://www.w3.org/1999/xhtml">

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

4 Answers, 1 is accepted

answered on 16 Mar 2011, 06:44 PM

RadSplitterInChrome.zip

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!

answered on 28 Mar 2011, 09:01 PM

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

answered on 29 Mar 2011, 04:25 PM

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!