Problem with disappearing SplitBar on rollover.

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

    Posted 07 Apr 2010 Link to this post

    Guys,

    Have a most bizarre problem with my RadSplitBar, to explain, i have a page called "processmapviewer" which has 2 splitters (main splitter with a 2 radpanes, and another splitter with 2 radpanes inside the bottom pane of the first splitter). (this page is horizontally).

    this all works fine, we have 1 visible RadSplitBar here. however we've recently implimented another page "TaskViewer" which allows us to view process map viewer in a RadPane but also chat about the document on the left handside panel (this page is vertically).

    so when the we view the document in this instance in here, we get the following results (see before and after scrolling over the RadSplitBar images attached).

    and the code for both pages...

    the problem i think is in the code behind, we are injecting in javascript into the processMapViewer to control the width of the body and panels (there is a minimum width otherwise our images get distorted etc.). I have narrowed this down to the problem line of code below. see the Code block for a bit of a bigger picture of whats going on.

    Any help would be fantastic!

    Problem Line of Code :

                javaScript.Text += "            document.getElementById('ProcessMapViewerBody').style.width = \"" + (widthBeforeScrollsKickIn) + "px\";\n"; 
     

    Problem Code Block:

                // KJR - Add 16px for scrollbar width 
                int rightScroll = 16
     
                Literal javaScript = new Literal(); 
     
                javaScript.Text += "<script type=\"text/javascript\">\n"; 
                javaScript.Text += "<!--\n"; 
                javaScript.Text += "    window.onresize = checkBrowserWidth;\n"; 
                javaScript.Text += "    function checkBrowserWidth()\n"; 
                javaScript.Text += "    {\n"; 
                javaScript.Text += "        if(document.documentElement.clientWidth <= " + widthBeforeScrollsKickIn + ")\n"; 
                javaScript.Text += "        {\n"; 
                javaScript.Text += "            document.getElementById('uiColorMainBody').style.width = \"" + (widthBeforeScrollsKickIn) + "px\";\n"; 
                javaScript.Text += "            document.getElementById('uiMapHeaderBody').style.width = \"" + (widthBeforeScrollsKickIn) + "px\";\n"; 
                javaScript.Text += "            document.getElementById('ProcessMapViewerBody').style.width = \"" + (widthBeforeScrollsKickIn) + "px\";\n"; 
                javaScript.Text += "        }\n"; 
                javaScript.Text += "        else\n"; 
                javaScript.Text += "        {\n"; 
                javaScript.Text += "            document.getElementById('uiColorMainBody').style.width = \"100%\";\n"; 
                javaScript.Text += "            document.getElementById('uiMapHeaderBody').style.width = \"100%\";\n"; 
                javaScript.Text += "            document.getElementById('ProcessMapViewerBody').style.width = \"100%\";\n"; 
                javaScript.Text += "        }\n"; 
                javaScript.Text += "    }\n"; 
                javaScript.Text += "-->\n"; 
                javaScript.Text += "</SCRIPT>"; 
     
                PlaceHolder mainPlaceHolder = new PlaceHolder(); 
                mainPlaceHolder.Controls.Add(javaScript); 


    ProcessMapViewer
    <%@ 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"
                body, form 
                { 
                height: 100%; 
                margin: 0px; 
                padding: 0px; 
                overflow:hidden; 
                } 
                 
                html 
                { 
                height: 100%; 
                margin: 0px; 
                padding: 0px; 
                overflow-y: hidden; 
                overflow-x: auto; 
                } 
        </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\" />"; 
                }    
                 
                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);    
                    } 
                } 
                 
                function pageLoad(sender, e)  
                { 
                    checkBrowserWidth(); 
                } 
             
        </script> 
     
    </head> 
    <body id="ProcessMapViewerBody"
        <form id="uiProcessMapViewerMainForm" runat="server" method="post"
            <asp:ScriptManager ID="ScriptManager" runat="server" /> 
            <div id="ParentDivElement" style="height: 100%;" class="ScreenOnly"
                <telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%" 
                    Orientation="Horizontal" Skin="Default" PanesBorderSize="0" BorderSize="0" OnClientLoaded="SplitterLoaded" 
                    OnClientBeforeResize="SplitterLoaded" OnClientResized="SplitterLoaded" VisibleDuringInit="false" ResizeWithBrowserWindow="true"
                    <telerik:RadPane ID="TopPane" runat="server" Height="100" MinHeight="85" MaxHeight="450" 
                        Scrolling="none"
                        <asp:PlaceHolder ID="uiProcessMapHolderHeader" runat="server" /> 
                    </telerik:RadPane> 
                    <telerik:RadSplitBar ID="RadsplitbarTop" runat="server" CollapseMode="Forward" EnableResize="false" Visible="true"  /> 
                    <telerik:RadPane ID="MainPane" runat="server" Scrolling="none" MinWidth="500"
                        <telerik:RadSplitter ID="NestedSplitter" runat="server" EnableEmbeddedSkins="false" 
                            LiveResize="true" Orientation="horizontal" PanesBorderSize="1" BorderSize="0" 
                            VisibleDuringInit="false"
                            <telerik:RadPane ID="LeftPane" runat="server" Width="100%" Height="40" MaxHeight="40" 
                                MinHeight="40" Scrolling="none"
                                <asp:PlaceHolder ID="uiActionerColorsPlaceHolder" runat="server" /> 
                            </telerik:RadPane> 
                            <telerik:RadPane ID="ContentPane" runat="server" Scrolling="Y" /> 
                        </telerik:RadSplitter> 
                    </telerik:RadPane> 
                </telerik:RadSplitter> 
            </div> 
            <%--Placeholder for Printing Process Maps--%> 
            <asp:PlaceHolder ID="PrintOnly" runat="server" /> 
        </form> 
    </body> 
    </html> 
     



    TaskViewer.aspx page
    <%@ Page Language="C#" AutoEventWireup="true" Inherits="BusinessPort.WebUI.DataViewers.TaskViewer" 
        CodeBehind="TaskViewer.aspx.cs" %> 
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head runat="server"
        <title>Agility User Suite - Task Viewer</title> 
        <link href="../../BusinessPort.css" type="text/css" rel="stylesheet" /> 
        <style type="text/css"
            html, body, form 
            { 
                margin: 0px; 
                padding: 0px; 
                height: 100%; 
            } 
            chatPanelStyle 
            { 
                vertical-align: top; 
            } 
        </style> 
    </head> 
    <body id="uiTaskPaneBody"
        <div id="ParentDivElement" style="height: 100%;"
            <form id="taskViewerForm" runat="server"
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RefreshPage" /> 
            <telerik:RadCodeBlock runat="server"
     
                <script type="text/javascript"
     
            function openWin(id) { 
                var oWnd = radopen("AuthorisersEdit/AuthorisersEditControl.aspx?DetailsID=" + id, "RadWindow1"); 
            } 
     
            function radWindowCallbackEvent()  
            { 
                //call AJAX event here to refresh chat... 
                var ajaxManager = <%= RadAjaxManager1.ClientID %>
                 
                var arguments = ''
             
                ajaxManager.ajaxRequest(arguments); 
            } 
         
            function EnableProceedComment() 
            { 
                var commentBox = document.getElementById('RadPanelBar1$i1$i0$uiChatComment'); 
                  
                var disableProceed = (commentBox.value.trim() == ""); 
                 
                document.getElementById("RadPanelBar1_i1_i0_sendMessage").disabled = disableProceed
            } 
             
            function EnableProceed() 
            { 
                var currentDecision = document.getElementById("uiUsersCurrentDecision").value; 
                 
                var commentBox = document.getElementById('RadPanelBar1$i2$i0$uiComment'); 
                 
                var disableProceed = (commentBox.value.trim() == ""); 
                 
     
                if(!disableProceed) 
                { 
                    if(currentDecision != "Fail") 
                    {            
                        document.getElementById("RadPanelBar1_i2_i0_uiFailRadioButton").disabled = false
                    } 
                    else 
                    { 
                        document.getElementById("RadPanelBar1_i2_i0_uiFailRadioButton").disabled = true
                    } 
                } 
                else 
                { 
                    document.getElementById("RadPanelBar1_i2_i0_uiFailRadioButton").disabled = true
                } 
            } 
             
            function scrollPositionBottom(sender, args) 
            { 
                var pane = sender.getPaneById('RadPanelBar1_i1_i0_uiChatPaneRadPane');   
                var scrollHeight = pane.getContentElement().scrollHeight; 
                pane.setScrollPos(0, scrollHeight - pane.get_height());  
            } 
                </script> 
     
            </telerik:RadCodeBlock> 
            <telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%" 
                Orientation="Vertical" EnableEmbeddedSkins="false" PanesBorderSize="0" BorderSize="0" 
                VisibleDuringInit="false" ResizeWithParentPane="true"
                <telerik:RadPane ID="TopPane" runat="server" MinWidth="400" Width="400" MaxWidth="400" 
                    Scrolling="none" Height="100%"
                    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="100%" Width="100" 
                        RenderMode="Inline"
                        <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%" 
                            Orientation="Horizontal" EnableEmbeddedSkins="false" PanesBorderSize="0" BorderSize="0" 
                            VisibleDuringInit="false" ResizeWithParentPane="true"
                            <telerik:RadPane ID="RadPane1" runat="server" MinWidth="400" Width="400" MaxWidth="400" 
                                Scrolling="none" Height="46"
                                <asp:PlaceHolder ID="uiVotingSummaryTable" runat="server" /> 
                                <table style="width: 100%;" cellpadding="0" cellspacing="0"
                                    <tr> 
                                        <td style="width: 150px;"
                                            Your Vote : 
                                        </td> 
                                        <td> 
                                            <asp:Label ID="uiMyCurrentDecision" runat="server"></asp:Label> 
                                        </td> 
                                    </tr> 
                                    <tr> 
                                        <td style="width: 150px;"
                                            Document Status : 
                                        </td> 
                                        <td> 
                                            <asp:Label ID="uiDocumentsCurrentDescion" runat="server"></asp:Label> 
                                        </td> 
                                    </tr> 
                                </table> 
                            </telerik:RadPane> 
                            <telerik:RadSplitBar ID="Radsplitbar1" runat="server" CollapseMode="None" EnableResize="false" 
                                Visible="false" /> 
                            <telerik:RadPane ID="RadPane2" runat="server" MinWidth="400" Width="400" MaxWidth="400" 
                                Scrolling="none" Height="100%"
                                <asp:HiddenField ID="uiUsersCurrentDecision" runat="server" /> 
                                <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Outlook" Width="100%" 
                                    Height="100%" ExpandMode="FullExpandedItem" CssClass="TaskViewerText PanelBarTitleText"
                                    <Items> 
                                        <telerik:RadPanelItem Text="Summary" Font-Bold="true" Height="32px" Expanded="true" 
                                            runat="server"
                                            <Items> 
                                                <telerik:RadPanelItem id="uiSummaryPanel" runat="server"
                                                    <ItemTemplate> 
                                                        <asp:Panel ID="Panel1" runat="server"
                                                            <div style="margin-left: 3px; margin-right: 3px; width: 400px;"
                                                                <table class="TaskViewerText"
                                                                    <tr> 
                                                                        <td> 
                                                                            Document Number : 
                                                                        </td> 
                                                                        <td> 
                                                                            <asp:Label ID="uiDocumentNumberLabelText" Text="[insert text here]" runat="server" /> 
                                                                        </td> 
                                                                    </tr> 
                                                                    <tr> 
                                                                        <td> 
                                                                            Document Title : 
                                                                        </td> 
                                                                        <td> 
                                                                            <asp:Label ID="uiDocumentTitleLabelText" Text="[insert text here]" runat="server" /> 
                                                                        </td> 
                                                                    </tr> 
                                                                    <tr> 
                                                                        <td> 
                                                                            Owner : 
                                                                        </td> 
                                                                        <td> 
                                                                            <asp:HyperLink ID="uiDocOwnerLabelText" Text="[insert text here]" runat="server" /> 
                                                                        </td> 
                                                                    </tr> 
                                                                    </tr> 
                                                                    <tr> 
                                                                        <td> 
                                                                            Admin Owner : 
                                                                        </td> 
                                                                        <td> 
                                                                            <asp:HyperLink ID="uiDocAdminOwnerLabelText" Text="[insert text here]" runat="server" /> 
                                                                        </td> 
                                                                    </tr> 
                                                                    <tr> 
                                                                        <td> 
                                                                            Due Date : 
                                                                        </td> 
                                                                        <td> 
                                                                            <asp:Label ID="uiDueDateLabelText" Text="[insert text here]" runat="server" /> 
                                                                        </td> 
                                                                    </tr> 
                                                                </table> 
                                                                Administrator Comments : 
                                                                <asp:TextBox ID="uiAdministratorComments" ReadOnly="true" TextMode="multiline" Height="125" 
                                                                    Width="350" runat="server"/> 
                                                                <br /> 
                                                                Document History Notes : 
                                                                <asp:TextBox ID="uiAuditTrailNotes" ReadOnly="true" TextMode="multiline" Height="125" 
                                                                    Width="350" runat="server"/> 
                                                                <asp:Label ID="uiApproverText" Text="[insert text here]" runat="server" /> 
                                                                <div style="overflow-x: auto; overflow-y: scroll; height: 125px; width: 350px; padding-left: 2px; 
                                                                    margin-left: 5px; border: solid 1px #7F9DB9;"> 
                                                                    <asp:PlaceHolder ID="uiSummaryHeader" runat="server" /> 
                                                                </div> 
                                                            </div> 
                                                        </asp:Panel> 
                                                    </ItemTemplate> 
                                                </telerik:RadPanelItem> 
                                            </Items> 
                                        </telerik:RadPanelItem> 
                                        <telerik:RadPanelItem Text="Comment History" Height="32px" Font-Bold="true" runat="server"
                                            <Items> 
                                                <telerik:RadPanelItem id="uiChatPanel" runat="server"
                                                    <ItemTemplate> 
                                                        <telerik:RadSplitter ID="ChatSplitter" runat="server" Height="97%" Width="398" Orientation="Horizontal" 
                                                            ResizeWithParentPane="false" PanesBorderSize="0" BorderSize="0" OnClientLoaded = "scrollPositionBottom" 
                                                            OnClientResized="scrollPositionBottom"
                                                            <telerik:RadPane ID="uiChatPaneRadPane" runat="server" Scrolling="Y"
                                                                <asp:PlaceHolder ID="uiChatConsole" runat="server" /> 
                                                            </telerik:RadPane> 
                                                            <telerik:RadSplitBar ID="uiTaskViewerSplitBar1" runat="server" CollapseMode="None" 
                                                                EnableResize="false" /> 
                                                            <telerik:RadPane Height="180" MinHeight="180" MaxHeight="180" ID="TopPane" runat="server" 
                                                                Scrolling="none"
                                                                <div class="TaskViewerText"
                                                                    <div style="text-align: left; margin-top: 5px; margin-left: 10px;"
                                                                        Comment : 
                                                                    </div> 
                                                                    <div style="text-align: left; margin-top: 3px; margin-left: 10px;"
                                                                        <asp:TextBox ID="uiChatComment" runat="server" TextMode="multiline" Style="height: 125px; 
                                                                            width: 350px;">  
                                                                        </asp:TextBox> 
                                                                    </div> 
                                                                    <div style="text-align: right; margin-top: 10px; margin-right: 10px;"
                                                                        <asp:Button Text="Submit" OnClick="sendMessage_Click" runat="server" Enabled="false" 
                                                                            ID="sendMessage" Style="width: 100px;"></asp:Button> 
                                                                    </div> 
                                                                </div> 
                                                            </telerik:RadPane> 
                                                        </telerik:RadSplitter> 
                                                    </ItemTemplate> 
                                                </telerik:RadPanelItem> 
                                            </Items> 
                                        </telerik:RadPanelItem> 
                                        <telerik:RadPanelItem Text="Voting Summary" Height="32px" Font-Bold="true" runat="server"
                                            <Items> 
                                                <telerik:RadPanelItem id="uiVotingPanel" runat="server"
                                                    <ItemTemplate> 
                                                        <telerik:RadSplitter ID="VotingSplitter" runat="server" Height="98%" Width="398" 
                                                            Orientation="Horizontal" ResizeWithParentPane="false" PanesBorderSize="0" BorderSize="0"
                                                            <telerik:RadPane ID="uiDocumentPreviewPane" runat="server" Scrolling="Y"
                                                                <asp:PlaceHolder ID="uiVotingSummary" runat="server" /> 
                                                            </telerik:RadPane> 
                                                            <telerik:RadSplitBar ID="uiTaskViewerSplitBar2" runat="server" CollapseMode="None" 
                                                                EnableResize="false" /> 
                                                            <telerik:RadPane Height="200" MinHeight="200" MaxHeight="200" ID="TopPane" runat="server" 
                                                                Scrolling="none"
                                                                <div class="TaskViewerText"
                                                                    <div style="text-align: left; margin-top: 1px; margin-left: 10px;"
                                                                        Vote : 
                                                                    </div> 
                                                                    <div style="text-align: left; margin-top: 1px; margin-left: 10px;"
                                                                        <asp:TextBox ID="uiComment" runat="server" TextMode="multiline" Style="height: 140px; 
                                                                            width: 350px;">  
                                                                        </asp:TextBox> 
                                                                    </div> 
                                                                    <table style="width: 100%"
                                                                        <tr style="width: 100%"
                                                                            <td style="width: 50%"
                                                                            </td> 
                                                                            <td style="width: 50%"
                                                                                <div style="text-align: right; margin-top: 10px; margin-bottom: 20px; margin-right: 10px;"
                                                                                    <asp:Button Text="Pass" OnClick="sendVotePass_Click" runat="server" ID="uiPassRadioButton" 
                                                                                        Style="width: 75px;"></asp:Button> 
                                                                                    <asp:Button Text="Fail" OnClick="sendVoteFail_Click" runat="server" ID="uiFailRadioButton" 
                                                                                        Style="width: 75px;" Enabled="false"></asp:Button> 
                                                                                </div> 
                                                                            </td> 
                                                                        </tr> 
                                                                    </table> 
                                                                </div> 
                                                            </telerik:RadPane> 
                                                        </telerik:RadSplitter> 
                                                    </ItemTemplate> 
                                                </telerik:RadPanelItem> 
                                            </Items> 
                                        </telerik:RadPanelItem> 
                                    </Items> 
                                </telerik:RadPanelBar> 
                            </telerik:RadPane> 
                        </telerik:RadSplitter> 
                    </telerik:RadAjaxPanel> 
                </telerik:RadPane> 
                <telerik:RadSplitBar ID="uiTaskViewerSplitBar3" runat="server" CollapseMode="None" 
                    EnableResize="false" Visible="false" /> 
                <telerik:RadPane ID="uiDocumentPreviewPane" runat="server" Scrolling="Both" Width="100%"
                </telerik:RadPane> 
            </telerik:RadSplitter> 
            <telerik:RadWindowManager ID="RadWindowManager1" ShowContentDuringLoad="false" VisibleStatusbar="false" 
                ReloadOnShow="true" runat="server" Skin="Outlook"
                <Windows> 
                    <telerik:RadWindow runat="server" ID="RadWindow1" Behaviors="Close" NavigateUrl="AuthorisersEditControl/AuthorisersEditControl.aspx" 
                        Width="400px" Height="210px"
                    </telerik:RadWindow> 
                </Windows> 
            </telerik:RadWindowManager> 
            </form> 
        </div> 
    </body> 
    </html> 
     

  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 12 Apr 2010 Link to this post

    Hi kevin,

    I tried to built up a test demo based on your code but unfortunately to no avail - to make it runnable I had to remove some code and the result was very different from the one shown on the screenshots and also the problem could not be reproduced. In order to be able to help I will really need to examine a fully runnable demo - please prepare such and open a new support ticket and send it to us along with detailed reproduction steps. For your convenience I attached the pages built upon your code so that you can directly modify them accordingly. Note, that it is not needed to put your custom logic, databases, etc, just reproduce the issue with as simple code as possible. Once I am able to debug the issue locally I will do my best to help.

    Sincerely yours,
    Svetlina
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kevin
    Kevin avatar
    83 posts
    Member since:
    Sep 2008

    Posted 20 May 2010 Link to this post

    Svetlina,

    Sorry for the delay in getting back to you.. I'm just about to raise a support ticket for this. have managed to put this into a simple project with the problem replicated.
Back to Top