Problem During Resize of window after collapse

6 posts, 0 answers
  1. Kevin
    Kevin avatar
    83 posts
    Member since:
    Sep 2008

    Posted 12 Nov 2008 Link to this post

    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>
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 17 Nov 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kevin
    Kevin avatar
    83 posts
    Member since:
    Sep 2008

    Posted 19 Nov 2008 Link to this post

    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
  5. Kevin
    Kevin avatar
    83 posts
    Member since:
    Sep 2008

    Posted 19 Nov 2008 Link to this post

    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
  6. Kevin
    Kevin avatar
    83 posts
    Member since:
    Sep 2008

    Posted 24 Nov 2008 Link to this post

    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
  7. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 24 Nov 2008 Link to this post

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