Seem to be seeing some unusual behavior with the RadSplitter, I've uploaded a video to demonstrate whats happening. but basically the jist of it is that when i collapse a pane and resize the window.. the RadSplitter no longer occupies 100% of the screen?? i dont think this was a problem before, but appears to be now, I believe we recently changed over from Q1 to Q2, so i dont know if this has anything to do with it, please find the link below to Youtube and the code on the aspx page in question, but this is occuring in another place in our program where we use the RadPane.
http://www.youtube.com/v/-bkJ_sFxTas
<%@ Page Language="C#" AutoEventWireup="true" Inherits="BusinessPort.WebUI.DataViewers.ProcessMapViewerPage"
Codebehind="ProcessMapViewer.aspx.cs" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Reference Page="../DocumentViewer.aspx" %>
<!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>
<title>Agility UserSuite -
<%=WindowTitle%>
</title>
<style type="text/css">
html, body, form
{
height: 100%;
margin: 0px;
padding: 0px;
overflow:inherit
}
</style>
<link rel="stylesheet" type="text/css" href="<%=VirtualDirectory%>BusinessPortProcessMapViewer.css" />
<link rel="stylesheet" type="text/css" href="<%=VirtualDirectory%>DataViewers.css" />
<script type="text/javascript" src="<%=VirtualDirectory%>standard.js"></script>
<script type="text/JavaScript">
function ChangeImageOnRollover(controlName, onOrOff)
{
document.getElementById(controlName + "Left").innerHTML = "<img src=\"<%=VirtualDirectory%>Images/ViewerImages/PMButtonLeft_" + onOrOff + ".gif\" />";
document.getElementById(controlName + "Middle").className = onOrOff == "off"?"PMnotselectedMiddleDown TabTextMedium InnerTabPadding NoWrap":"PMselectedMiddleDown TabTextMedium InnerTabPadding NoWrap";
document.getElementById(controlName + "Right").innerHTML = "<img src=\"<%=VirtualDirectory%>Images/ViewerImages/PMButtonRight_" + onOrOff + ".gif\" />";
}
// Automatically set the height of the TopPane.
function SplitterLoaded(splitter, arg)
{
var pane = splitter.getPaneById('<%= TopPane.ClientID %>');
var height = pane.getContentElement().scrollHeight;
pane.set_height(height);
}
</script>
</head>
<body style="width: 100%; overflow:hidden;" onload="checkBrowserWidth();">
<form id="uiProcessMapViewerMainForm" runat="server" method="post">
<asp:ScriptManager ID="ScriptManager" runat="server" />
<div id="ParentDivElement" style="height: 100%;" class = "ScreenOnly">
<asp:Panel ID="RenderMain" runat="server"/>
<telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%"
Orientation="Horizontal" Skin="Outlook" BorderWidth = "0" OnClientLoaded="SplitterLoaded" OnClientResized = "SplitterLoaded">
<telerik:RadPane ID="TopPane" runat="server" Height="100" MinHeight="85" MaxHeight="150"
Scrolling="none" BorderWidth="0px">
<asp:PlaceHolder ID="uiProcessMapHolderHeader" runat="server" />
</telerik:RadPane>
<telerik:RadSplitBar ID="RadsplitbarTop" runat="server" CollapseMode="Forward" EnableResize = "false" />
<telerik:RadPane ID="MainPane" runat="server" Scrolling="none" MinWidth="500" BorderWidth="0px">
<telerik:RadSplitter ID="NestedSplitter" runat="server" Skin="Outlook" LiveResize="true" Orientation = "horizontal" BorderWidth="0px" >
<telerik:RadPane ID="LeftPane" runat="server" Width="100%" height="40" MaxHeight = "40" MinHeight = "40" Scrolling = "none" BorderWidth="0px">
<asp:PlaceHolder ID="uiActionerColorsPlaceHolder" runat="server" />
</telerik:RadPane>
<telerik:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="none" BorderWidth="0px" EnableResize = "false" />
<telerik:RadPane ID="ContentPane" runat="server" BorderWidth="0px" Scrolling = "Y"/>
</telerik:RadSplitter>
</telerik:RadPane>
</telerik:RadSplitter>
</div>
<%--Placeholder for Printing Process Maps--%>
<asp:PlaceHolder ID="PrintOnly" runat="server"/>
</form>
</body>
</html>
http://www.youtube.com/v/-bkJ_sFxTas
<%@ Page Language="C#" AutoEventWireup="true" Inherits="BusinessPort.WebUI.DataViewers.ProcessMapViewerPage"
Codebehind="ProcessMapViewer.aspx.cs" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Reference Page="../DocumentViewer.aspx" %>
<!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>
<title>Agility UserSuite -
<%=WindowTitle%>
</title>
<style type="text/css">
html, body, form
{
height: 100%;
margin: 0px;
padding: 0px;
overflow:inherit
}
</style>
<link rel="stylesheet" type="text/css" href="<%=VirtualDirectory%>BusinessPortProcessMapViewer.css" />
<link rel="stylesheet" type="text/css" href="<%=VirtualDirectory%>DataViewers.css" />
<script type="text/javascript" src="<%=VirtualDirectory%>standard.js"></script>
<script type="text/JavaScript">
function ChangeImageOnRollover(controlName, onOrOff)
{
document.getElementById(controlName + "Left").innerHTML = "<img src=\"<%=VirtualDirectory%>Images/ViewerImages/PMButtonLeft_" + onOrOff + ".gif\" />";
document.getElementById(controlName + "Middle").className = onOrOff == "off"?"PMnotselectedMiddleDown TabTextMedium InnerTabPadding NoWrap":"PMselectedMiddleDown TabTextMedium InnerTabPadding NoWrap";
document.getElementById(controlName + "Right").innerHTML = "<img src=\"<%=VirtualDirectory%>Images/ViewerImages/PMButtonRight_" + onOrOff + ".gif\" />";
}
// Automatically set the height of the TopPane.
function SplitterLoaded(splitter, arg)
{
var pane = splitter.getPaneById('<%= TopPane.ClientID %>');
var height = pane.getContentElement().scrollHeight;
pane.set_height(height);
}
</script>
</head>
<body style="width: 100%; overflow:hidden;" onload="checkBrowserWidth();">
<form id="uiProcessMapViewerMainForm" runat="server" method="post">
<asp:ScriptManager ID="ScriptManager" runat="server" />
<div id="ParentDivElement" style="height: 100%;" class = "ScreenOnly">
<asp:Panel ID="RenderMain" runat="server"/>
<telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%"
Orientation="Horizontal" Skin="Outlook" BorderWidth = "0" OnClientLoaded="SplitterLoaded" OnClientResized = "SplitterLoaded">
<telerik:RadPane ID="TopPane" runat="server" Height="100" MinHeight="85" MaxHeight="150"
Scrolling="none" BorderWidth="0px">
<asp:PlaceHolder ID="uiProcessMapHolderHeader" runat="server" />
</telerik:RadPane>
<telerik:RadSplitBar ID="RadsplitbarTop" runat="server" CollapseMode="Forward" EnableResize = "false" />
<telerik:RadPane ID="MainPane" runat="server" Scrolling="none" MinWidth="500" BorderWidth="0px">
<telerik:RadSplitter ID="NestedSplitter" runat="server" Skin="Outlook" LiveResize="true" Orientation = "horizontal" BorderWidth="0px" >
<telerik:RadPane ID="LeftPane" runat="server" Width="100%" height="40" MaxHeight = "40" MinHeight = "40" Scrolling = "none" BorderWidth="0px">
<asp:PlaceHolder ID="uiActionerColorsPlaceHolder" runat="server" />
</telerik:RadPane>
<telerik:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="none" BorderWidth="0px" EnableResize = "false" />
<telerik:RadPane ID="ContentPane" runat="server" BorderWidth="0px" Scrolling = "Y"/>
</telerik:RadSplitter>
</telerik:RadPane>
</telerik:RadSplitter>
</div>
<%--Placeholder for Printing Process Maps--%>
<asp:PlaceHolder ID="PrintOnly" runat="server"/>
</form>
</body>
</html>
5 Answers, 1 is accepted
0
Hi Kevin,
I made a few attempts to examine the video capture located on the provided link but unfortunately to no avail. When I try to open the link in IE, I receive two javascript errors and a blank page. Under FF the first shot of the video is displayed but after I click the play arrow, nothing happens.
I also build a test project, based on the provided code after I modified it in order to be able to run it. I tested it with both Q2 2008 (2008.2 1101) and with Q3 2008 (2008.3 1105) but I was not able to reproduce the issue. I attach my test project to the thread - would you please examine it, change it in order to reproduce the problem, open a new support ticket and send it to me along with a video capture? Once I receive it and I am able to examine the problem locally, I will do my best to help.
Kind regards,
Svetlina
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
I made a few attempts to examine the video capture located on the provided link but unfortunately to no avail. When I try to open the link in IE, I receive two javascript errors and a blank page. Under FF the first shot of the video is displayed but after I click the play arrow, nothing happens.
I also build a test project, based on the provided code after I modified it in order to be able to run it. I tested it with both Q2 2008 (2008.2 1101) and with Q3 2008 (2008.3 1105) but I was not able to reproduce the issue. I attach my test project to the thread - would you please examine it, change it in order to reproduce the problem, open a new support ticket and send it to me along with a video capture? Once I receive it and I am able to examine the problem locally, I will do my best to help.
Kind regards,
Svetlina
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Kevin
Top achievements
Rank 2
Rank 2
answered on 19 Nov 2008, 10:17 AM
Svetlina,
if you try the below link.. http://www.youtube.com?v=-bkJ_sFxTas This should work now, sorry slightly different link to the one you tried previous..
I did try that sample project and i am experiencing the same weird behavior when i plug it in over the top of my code... Hopefully this video will heighlight slightly more the problem ive been having with this control
Cheers
Regards
kevin
if you try the below link.. http://www.youtube.com?v=-bkJ_sFxTas This should work now, sorry slightly different link to the one you tried previous..
I did try that sample project and i am experiencing the same weird behavior when i plug it in over the top of my code... Hopefully this video will heighlight slightly more the problem ive been having with this control
Cheers
Regards
kevin
0
Kevin
Top achievements
Rank 2
Rank 2
answered on 19 Nov 2008, 05:19 PM
Upon further investigation i've come to the conclusion the problem is with the script you provided on your website to allow the autosizing of RadPanes, when this is used on resize / load it causes the gap. as when this code is removed the problem is solved, however i require the topPane to be automatically resized in order to furfil the requirements of the system, do you have any solution to this?
Regards
Kevin
Regards
Kevin
0
Kevin
Top achievements
Rank 2
Rank 2
answered on 24 Nov 2008, 01:21 PM
Svetlin,
Did that new link to the video work for you? or do you still want me to open a ticket with a sample project and Video? if you could let me know, that'd be great :)
Cheers
Kindest Regards
Kevin R
Did that new link to the video work for you? or do you still want me to open a ticket with a sample project and Video? if you could let me know, that'd be great :)
Cheers
Kindest Regards
Kevin R
0
Hello kevin,
I was able to reproduce the problem you described - it is caused by the fact the you execute the code that sets the Height of the top RadPane even when it is collapsed. I have modified your code so that it is executed only in case the pane is visible:
I have additionally replaced the set_height with the resize method because in case you use the set_height, you have to modify the height of the adjacent pane as well, with the result delta.
Sincerely yours,
Tsvetie
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
I was able to reproduce the problem you described - it is caused by the fact the you execute the code that sets the Height of the top RadPane even when it is collapsed. I have modified your code so that it is executed only in case the pane is visible:
| function SplitterLoaded(splitter, arg) |
| { |
| var pane = splitter.getPaneById('<%= TopPane.ClientID %>'); |
| if(!pane.get_collapsed()) |
| { |
| var height = pane.getContentElement().scrollHeight; |
| pane.resize(height - pane.get_height()); |
| //pane.set_height(height); |
| } |
| } |
I have additionally replaced the set_height with the resize method because in case you use the set_height, you have to modify the height of the adjacent pane as well, with the result delta.
Sincerely yours,
Tsvetie
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.