Bailey Everitt
Top achievements
Rank 1
Rank 1
Bailey Everitt
asked on 20 Dec 2008, 06:40 PM
Hi everyone,
I have a base page, that contains a header, footer, TreeView in the left panel, and a right panel where all the pages are loaded into when the user clicks on a node.
When a page is loaded in the right panel, and I collapse/resize the TreeView panel (to the left), the controls in the right panel (grid mainly) resize fine. However, when I then expand/resize the TreeView panel (to the right), the controls do not get resized back to what they originally were. I've included my base page and the page that I'm loading in the right panel below. Any help is appreciated!
Base Page:
Page I'm loading in the right panel:
I have a base page, that contains a header, footer, TreeView in the left panel, and a right panel where all the pages are loaded into when the user clicks on a node.
When a page is loaded in the right panel, and I collapse/resize the TreeView panel (to the left), the controls in the right panel (grid mainly) resize fine. However, when I then expand/resize the TreeView panel (to the right), the controls do not get resized back to what they originally were. I've included my base page and the page that I'm loading in the right panel below. Any help is appreciated!
Base Page:
| <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TRMS.aspx.cs" Inherits="Web.TRMS" %> |
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
| <link href="UIComponents/TreeView/Web20/TreeView.Web20.css" rel="stylesheet" type="text/css" /> |
| <!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"> |
| <title>ROSS Rewrite</title> |
| <script type="text/javascript" src="JavaScript/LoadPage.js"></script> |
| <style type="text/css"> |
| html, body, form |
| { |
| height: 100%; |
| padding: 0px; |
| margin: 0px; |
| } |
| .header |
| { |
| height: 70px; |
| border-bottom: 1px black; |
| } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <telerik:RadScriptManager ID="uxRadScriptManager" runat="server" /> |
| <telerik:RadFormDecorator ID="uxRadFormDecorator" Runat="server" Skin="Web20" /> |
| <div id="header"> |
| <asp:Image ID="uxImageTLogo" runat="server" ImageUrl="~/UIComponents/Images/T_logo.jpg" /> |
| <asp:Image ID="uxImageMBCRLogo" runat="server" ImageUrl="~/UIComponents/Images/MBCR_logo.jpg" /> |
| </div> |
| <telerik:RadSplitter ID="uxRadSplitter" runat="server" LiveResize="True" Skin="Inox" |
| Height="100%" Width="99.9%" HeightOffset="190" SplitBarsSize="" |
| VisibleDuringInit="False"> |
| <telerik:RadPane ID="uxRadPaneLeft" runat="server" Height="17px" Width="250px" MaxWidth="400" |
| MinWidth="200"> |
| <telerik:RadTreeView ID="uxRadTreeView" runat="server" LoadingMessage="" OnClientNodeClicked="ClientNodeClicked" |
| Skin="Web20" OnNodeExpand="uxRadTreeView_NodeExpand" Font-Size="X-Small" EnableEmbeddedSkins="False" |
| Font-Names="Calibri"> |
| <CollapseAnimation Duration="400" Type="InQuart" /> |
| <ExpandAnimation Duration="400" /> |
| </telerik:RadTreeView> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="uxRadSplitBar" runat="server" CollapseMode="Forward" /> |
| <telerik:RadPane ID="uxRadPaneRight" runat="server" ContentUrl="about:blank" Height="100%"> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| <div id="footer" style="height: 20px; border-top: 1px black;"> |
| </div> |
| </form> |
| </body> |
| </html> |
Page I'm loading in the right panel:
| <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Trips.aspx.cs" Inherits="Web.Trips" %> |
| <%@ 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"> |
| <title>Untitled Page</title> |
| <telerik:RadCodeBlock ID="uxRadCodeBlock" runat="server"> |
| <style type = "text/css"> |
| .RadPicker_WebBlue |
| { |
| vertical-align: middle; |
| } |
| .RadPicker_WebBlue .rcInputCell |
| { |
| padding: 0 4px 0 0; |
| } |
| .RadInput_Default |
| { |
| font: 12px arial,sans-serif; |
| } |
| .RadInput_Default |
| { |
| vertical-align: middle; |
| } |
| .RadPicker_WebBlue .rcCalPopup |
| { |
| background-position: 0 -200px; |
| } |
| .RadPicker_WebBlue td a |
| { |
| display: block; |
| overflow: hidden; |
| position: relative; /*FF*/ |
| outline: none; /*FF*/ |
| z-index: 2; /*Opera*/ |
| width: 16px; |
| height: 16px; |
| margin: 0 2px; |
| background: url( 'mvwres://Telerik.Web.UI, Version=2008.3.1125.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4/Telerik.Web.UI.Skins.WebBlue.Calendar.sprite.gif' ) no-repeat; |
| text-indent: -1111px; |
| text-align: center; |
| text-decoration: none; |
| } |
| .filterControls |
| { |
| font-family: Calibri; |
| font-size: medium; |
| padding: 5px; |
| } |
| .tripDetailsTop |
| { |
| font-family: Calibri; |
| margin-left: auto; |
| margin-right: auto; |
| } |
| .tripDetailsNested |
| { |
| font-family: Calibri; |
| border: 1px solid #333; |
| } |
| html, body, form |
| { |
| height: 100%; |
| padding: 0px; |
| margin: 0px; |
| overflow: hidden; |
| } |
| .filterColumns |
| { |
| width: 1%; |
| white-space: nowrap; |
| } |
| </style> |
| <script type="text/javascript"> |
| function centerUpdatePanel() |
| { |
| centerElementOnScreen(document.getElementById("uxRadAjaxLoadingPanel")); |
| } |
| function centerElementOnScreen(element) |
| { |
| var scrollTop = document.body.scrollTop; |
| var scrollLeft = document.body.scrollLeft; |
| var viewPortHeight = document.body.clientHeight; |
| var viewPortWidth = document.body.clientWidth; |
| if (document.compatMode == "CSS1Compat") |
| { |
| viewPortHeight = document.documentElement.clientHeight; |
| viewPortWidth = document.documentElement.clientWidth; |
| scrollTop = document.documentElement.scrollTop; |
| scrollLeft = document.documentElement.scrollLeft; |
| } |
| var topOffset = Math.ceil(viewPortHeight/2 - element.offsetHeight/2); |
| var leftOffset = Math.ceil(viewPortWidth/2 - element.offsetWidth/2); |
| var top = scrollTop + topOffset - 40; |
| var left = scrollLeft + leftOffset - 70; |
| element.style.position = "absolute"; |
| element.style.top = top + "px"; |
| element.style.left = left + "px"; |
| } |
| function RowSelected(sender, eventArgs) |
| { |
| var dataItem = $get(eventArgs.get_id()); |
| var grid = sender; |
| var MasterTable = grid.get_masterTableView(); |
| var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()]; |
| var cell = MasterTable.getCellByColumnUniqueName(row, "PrimaryKey"); |
| alert(cell); |
| } |
| </script> |
| </telerik:RadCodeBlock> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager" runat="server"> |
| </asp:ScriptManager> |
| <telerik:RadAjaxLoadingPanel IsSticky="true" ID="uxRadAjaxLoadingPanel" runat="server" |
| Height="75px" Width="75px"> |
| <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading1.gif") %>' |
| style="border: 0px;" /> |
| </telerik:RadAjaxLoadingPanel> |
| <telerik:RadFormDecorator ID="uxRadFormDecorator" runat="server" Skin="Web20" /> |
| <telerik:RadWindowManager ID="uxRadWindowManager" runat="server" Skin="Web20"> |
| </telerik:RadWindowManager> |
| <telerik:RadSplitter ID="uxRadSplitter" runat="server" LiveResize="True" Skin="Inox" |
| Height="100%" Width="100%" SplitBarsSize="5px" BorderSize="0" BorderStyle="None" |
| Orientation="Horizontal" FullScreenMode="True" PanesBorderSize="0" |
| VisibleDuringInit="False"> |
| <telerik:RadPane ID="uxRadPaneFilter" runat="server" Height="3%" Width="" MaxWidth="400" |
| MinWidth="200" MaxHeight="0" Scrolling="None" MinHeight="0"> |
| <telerik:RadSlidingZone ID="uxRadSlidingZone" runat="server" ClickToOpen="True"> |
| <telerik:RadSlidingPane ID="uxRadSlidingPanel" runat="server" IconUrl="UIComponents/Images/filter.gif" |
| Title="Filter" CssClass="filterControls" Height="350px" Scrolling="None" BackColor="White"> |
| <div class="filterControls"> |
| <table cellpadding="0" cellspacing="5" width="100%"> |
| <tr> |
| <td class="filterColumns"> |
| Trips Dates: |
| </td> |
| <td class="filterColumns"> |
| <telerik:RadDatePicker ID="uxRadDatePickerFrom" runat="server" Skin="WebBlue" |
| Culture="English (United States)"> |
| <Calendar runat="server" Skin="WebBlue" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" |
| ViewSelectorText="x" ShowRowHeaders="False"> |
| </Calendar> |
| <DatePopupButton HoverImageUrl="" ImageUrl="" /> |
| </telerik:RadDatePicker> |
|   To  |
| <telerik:RadDatePicker ID="uxRadDatePickerTo" runat="server" Skin="WebBlue" |
| Culture="English (United States)"> |
| <Calendar runat="server" Skin="WebBlue" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" |
| ViewSelectorText="x" ShowRowHeaders="False"> |
| </Calendar> |
| <DatePopupButton HoverImageUrl="" ImageUrl="" /> |
| </telerik:RadDatePicker> |
| </td> |
| <td> |
|    |
| </td> |
| </tr> |
| <tr> |
| <td class="filterColumns"> |
| Division: |
| </td> |
| <td> |
| <telerik:RadComboBox ID="uxRadComboBoxDivision" runat="server" Skin="WebBlue" Width="330px"> |
| <CollapseAnimation Duration="200" Type="OutQuint" /> |
| </telerik:RadComboBox> |
| </td> |
| <td> |
| <asp:Button ID="uxButtonClearDivision" runat="server" Text="Clear" /> |
| </td> |
| </tr> |
| <tr> |
| <td class="filterColumns"> |
| Route: |
| </td> |
| <td> |
| <telerik:RadComboBox ID="uxRadComboBoxRoute" runat="server" Skin="WebBlue" Width="330px"> |
| <CollapseAnimation Duration="200" Type="OutQuint" /> |
| </telerik:RadComboBox> |
| </td> |
| <td> |
| <asp:Button ID="uxButtonClearRoute" runat="server" Text="Clear" /> |
| </td> |
| </tr> |
| <tr> |
| <td class="filterColumns"> |
| Direction: |
| </td> |
| <td> |
| <telerik:RadComboBox ID="uxRadComboBoxDirection" runat="server" Skin="WebBlue" Width="330px"> |
| <CollapseAnimation Duration="200" Type="OutQuint" /> |
| </telerik:RadComboBox> |
| </td> |
| <td> |
| <asp:Button ID="uxButtonClearDirection" runat="server" Text="Clear" /> |
| </td> |
| </tr> |
| <tr> |
| <td class="filterColumns"> |
| Trip Status: |
| </td> |
| <td> |
| <telerik:RadComboBox ID="uxRadComboBoxTripStatus" runat="server" Skin="WebBlue" Width="330px"> |
| <CollapseAnimation Duration="200" Type="OutQuint" /> |
| </telerik:RadComboBox> |
| </td> |
| <td> |
| <asp:Button ID="uxButtonClearTripStatus" runat="server" Text="Clear" /> |
| </td> |
| </tr> |
| <tr> |
| <td class="filterColumns"> |
| Origin: |
| </td> |
| <td> |
| <telerik:RadComboBox ID="uxRadComboBoxOrigin" runat="server" Skin="WebBlue" Width="330px"> |
| <CollapseAnimation Duration="200" Type="OutQuint" /> |
| </telerik:RadComboBox> |
| </td> |
| <td> |
| <asp:Button ID="uxButtonClearOrigin" runat="server" Text="Clear" /> |
| </td> |
| </tr> |
| <tr> |
| <td class="filterColumns"> |
| Destination: |
| </td> |
| <td> |
| <telerik:RadComboBox ID="uxRadComboBoxDestination" runat="server" Skin="WebBlue" |
| Width="330px"> |
| <CollapseAnimation Duration="200" Type="OutQuint" /> |
| </telerik:RadComboBox> |
| </td> |
| <td> |
| <asp:Button ID="uxButtonClearDestination" runat="server" Text="Clear" /> |
| </td> |
| </tr> |
| <tr> |
| <td class="filterColumns"> |
| Train #: |
| </td> |
| <td> |
| <telerik:RadComboBox ID="uxRadComboBoxTrainNumber" runat="server" Skin="WebBlue" |
| Width="330px"> |
| <CollapseAnimation Duration="200" Type="OutQuint" /> |
| </telerik:RadComboBox> |
| </td> |
| <td> |
| <asp:Button ID="uxButtonClearTrainNumber" runat="server" Text="Clear" /> |
| </td> |
| </tr> |
| <tr> |
| <td class="filterColumns"> |
|    |
| </td> |
| <td> |
| <asp:RadioButtonList ID="uxOptRevenueType" runat="server" RepeatDirection="Horizontal"> |
| <asp:ListItem Selected="True">Revenue</asp:ListItem> |
| <asp:ListItem>Non-Revenue</asp:ListItem> |
| <asp:ListItem>Both</asp:ListItem> |
| </asp:RadioButtonList> |
| </td> |
| <td> |
|    |
| </td> |
| </tr> |
| <tr> |
| <td class="filterColumns"> |
|   |
| </td> |
| <td> |
|   |
| </td> |
| <td> |
|   |
| </td> |
| </tr> |
| <tr> |
| <td class="filterColumns"> |
|   |
| </td> |
| <td> |
|  <asp:Button ID="uxButtonOK" runat="server" OnClick="uxButtonOK_Click" Text="OK" /> |
|    |
| <asp:Button ID="uxButtonNew" runat="server" Text="New" OnClick="uxButtonNew_Click" /> |
|    |
| <asp:Button ID="uxButtonClearFilter" runat="server" Text="Clear" /> |
| </td> |
| <td> |
|   |
| </td> |
| </tr> |
| </table> |
| </div> |
| </telerik:RadSlidingPane> |
| </telerik:RadSlidingZone></telerik:RadPane> |
| <telerik:RadSplitBar ID="uxRadSplitBarFilter" runat="server" |
| CollapseExpandPaneText="" EnableResize="False" /> |
| <telerik:RadPane ID="uxRadPaneList" runat="server" Height="" |
| BorderStyle="None"> |
| <telerik:RadGrid ID="uxRadGridList" style="border: 0; outline: none" runat="server" GridLines="None" Skin="WebBlue" |
| AllowSorting="True" OnColumnCreated="uxRadGridList_ColumnCreated" OnNeedDataSource="uxRadGridList_NeedDataSource" |
| Height="100%" Width="100%" OnItemCommand="uxRadGridList_ItemCommand"> |
| <HeaderContextMenu EnableTheming="True"> |
| <CollapseAnimation Duration="200" Type="OutQuint" /> |
| </HeaderContextMenu> |
| <MasterTableView> |
| <RowIndicatorColumn> |
| <HeaderStyle Width="20px" /> |
| </RowIndicatorColumn> |
| <ExpandCollapseColumn> |
| <HeaderStyle Width="20px" /> |
| </ExpandCollapseColumn> |
| </MasterTableView><ClientSettings EnablePostBackOnRowClick="True"> |
| <Selecting AllowRowSelect="True" /> |
| <Scrolling AllowScroll="True" /> |
| </ClientSettings> |
| <FilterMenu EnableTheming="True"> |
| <CollapseAnimation Duration="200" Type="OutQuint" /> |
| </FilterMenu> |
| </telerik:RadGrid></telerik:RadPane> |
| <telerik:RadSplitBar ID="uxRadSplitBarListDetail" runat="server" CollapseExpandPaneText="" /> |
| <telerik:RadPane ID="uxRadPaneDetail" runat="server" Height="50%" Scrolling="Y"> |
| <asp:Panel ID="uxAspPanel" runat="server"> |
| <table cellpadding="0" cellspacing="10" class="tripDetailsTop"> |
| <tr> |
| <td> |
| <table cellpadding="0" cellspacing="10" class="tripDetailsNested"> |
| <tr> |
| <td> |
| Train # |
| </td> |
| <td> |
| Date |
| </td> |
| <td> |
| Route |
| </td> |
| <td> |
| Direction |
| </td> |
| <td> |
| Schedule Type |
| </td> |
| <td> |
| Peak Type |
| </td> |
| <td> |
| Non-Revenue |
| </td> |
| </tr> |
| <tr> |
| <td> |
| <telerik:RadTextBox ID="uxRadTextBoxTrainNumberDetails" runat="server" Skin="WebBlue"> |
| </telerik:RadTextBox> |
| </td> |
| <td> |
| <telerik:RadTextBox ID="uxRadTextBoxTripDateDetails" runat="server" Skin="WebBlue"> |
| </telerik:RadTextBox> |
| </td> |
| <td> |
| <telerik:RadComboBox ID="uxRadComboBoxRouteDetails" runat="server" Skin="WebBlue"> |
| <CollapseAnimation Duration="200" Type="OutQuint" /> |
| </telerik:RadComboBox> |
| </td> |
| <td> |
| <telerik:RadComboBox ID="uxRadCombBoxDirectioDetailsn" runat="server" Skin="WebBlue"> |
| <CollapseAnimation Duration="200" Type="OutQuint" /> |
| </telerik:RadComboBox> |
| </td> |
| <td> |
| <telerik:RadComboBox ID="uxRadComboScheduleTypeDetails" runat="server" Skin="WebBlue"> |
| <CollapseAnimation Duration="200" Type="OutQuint" /> |
| </telerik:RadComboBox> |
| </td> |
| <td> |
| <telerik:RadComboBox ID="uxRadComboBoxPeakTypeDetails" runat="server" Skin="WebBlue"> |
| <CollapseAnimation Duration="200" Type="OutQuint" /> |
| </telerik:RadComboBox> |
| </td> |
| <td align="center"> |
| <asp:CheckBox ID="uxChkNonRevenue" runat="server" /> |
| </td> |
| </tr> |
| </table> |
| </td> |
| </tr> |
| </table> |
| </asp:Panel> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| <telerik:RadAjaxManager runat="server" |
| ClientEvents-OnRequestStart="centerUpdatePanel();" ID="uxRadAjaxManager" > |
| <ClientEvents OnRequestStart="centerUpdatePanel();"></ClientEvents> |
| <AjaxSettings> |
| <telerik:AjaxSetting AjaxControlID="uxButtonOK"> |
| <UpdatedControls> |
| <telerik:AjaxUpdatedControl ControlID="uxRadGridList" LoadingPanelID="uxRadAjaxLoadingPanel" /> |
| <telerik:AjaxUpdatedControl ControlID="uxAspPanel" |
| LoadingPanelID="uxRadAjaxLoadingPanel" /> |
| </UpdatedControls> |
| </telerik:AjaxSetting> |
| <telerik:AjaxSetting AjaxControlID="uxButtonNew"> |
| <UpdatedControls> |
| <telerik:AjaxUpdatedControl ControlID="uxAspPanel" |
| LoadingPanelID="uxRadAjaxLoadingPanel" /> |
| </UpdatedControls> |
| </telerik:AjaxSetting> |
| <telerik:AjaxSetting AjaxControlID="uxRadGridList"> |
| <UpdatedControls> |
| <telerik:AjaxUpdatedControl ControlID="uxRadGridList" |
| LoadingPanelID="uxRadAjaxLoadingPanel" /> |
| </UpdatedControls> |
| </telerik:AjaxSetting> |
| </AjaxSettings> |
| </telerik:RadAjaxManager> |
| </form> |
| </body> |
| </html> |
1 Answer, 1 is accepted
0
Accepted
Hi Matthew,
Please add the following style to the HEAD of your Trips page:
, and remove the FullScreenMode property from the definition of your uxRadSplitter control.
I have attached my test pages for your reference.
Greetings,
Tsvetie
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Please add the following style to the HEAD of your Trips page:
| html, body, form |
| { |
| height: 100%; |
| width:100%; |
| padding: 0px; |
| margin: 0px; |
| overflow: hidden; |
| } |
, and remove the FullScreenMode property from the definition of your uxRadSplitter control.
I have attached my test pages for your reference.
Greetings,
Tsvetie
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.