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 :
Problem Code Block:
ProcessMapViewer
TaskViewer.aspx page
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> |