Bailey Everitt
Top achievements
Rank 1
Rank 1
Bailey Everitt
asked on 05 Dec 2008, 02:17 AM
Hi Everyone,
I have a Splitter with two RadPanes (left and right.) A TreeView is in the left hand RadPane, and when nodes are clicked, the content pages are loaded into the right hand RadPane. I have one page that gets loaded into the right hand RadPane and all it containts is a Grid with a Master and Detail table. When the Grid expands past the height of the right hand RadPane, vertical AND horizontal scrollbars appear. The vertical one is fine, however, I do not want the horizontal scrollbar. My code is below. Any help is greatly appreciated.
FYI - It seems to work fine in FireFox but not in IE.
Page that contains the Splitter, RadPane:
Page that contains the Grid:
I have a Splitter with two RadPanes (left and right.) A TreeView is in the left hand RadPane, and when nodes are clicked, the content pages are loaded into the right hand RadPane. I have one page that gets loaded into the right hand RadPane and all it containts is a Grid with a Master and Detail table. When the Grid expands past the height of the right hand RadPane, vertical AND horizontal scrollbars appear. The vertical one is fine, however, I do not want the horizontal scrollbar. My code is below. Any help is greatly appreciated.
FYI - It seems to work fine in FireFox but not in IE.
Page that contains the Splitter, RadPane:
| <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TRMS.aspx.cs" Inherits="Web.TRMS" %> |
| <%@ 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>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; |
| } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <telerik:RadScriptManager ID="uxRadScriptManager" runat="server" /> |
| <div id="header" style="height: 40px; border-bottom: 1px black;"></div> |
| <telerik:RadSplitter ID="uxRadSplitter" runat="server" LiveResize="True" Skin="WebBlue" |
| Height="100%" Width="100%" HeightOffset="62" SplitBarsSize="5px"> |
| <telerik:RadPane ID="uxRadPaneLeft" runat="server" Height="17px" Width="250px" MaxWidth="400" |
| MinWidth="200"> |
| <telerik:RadTreeView ID="uxRadTreeView" Runat="server" LoadingMessage="" |
| OnClientNodeClicked="ClientNodeClicked" Skin="Vista" |
| onnodeexpand="uxRadTreeView_NodeExpand" |
| Font-Names="Calibri" Font-Size="Medium"> |
| <CollapseAnimation Duration="400" /> |
| <ExpandAnimation Duration="400" /> |
| </telerik:RadTreeView> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="uxRadSplitBar" runat="server" /> |
| <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 that contains the Grid:
| <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ListDetail.aspx.cs" Inherits="Web.ListDetail" %> |
| <%@ 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 runat="server"> |
| <title>Untitled Page</title> |
| <style type="text/css"> |
| .RadGrid_Default |
| { |
| border: 1px solid #232323; |
| } |
| .RadGrid_Default |
| { |
| font: 11px/1.4 arial,sans-serif; |
| } |
| .RadGrid_Default |
| { |
| background: #d4d0c8; |
| color: #333; |
| } |
| .MasterTable_Default |
| { |
| background: #fff; |
| border-collapse: separate !important; |
| } |
| .MasterTable_Default |
| { |
| font: 11px/1.4 arial,sans-serif; |
| } |
| .GridHeader_Default |
| { |
| color: #fff; |
| text-decoration: none; |
| } |
| .GridHeader_Default |
| { |
| border-bottom: 1px solid #010101; |
| background: url( 'mvwres://Telerik.Web.UI, Version=2008.3.1105.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4/Telerik.Web.UI.Skins.Default.Grid.headers.gif' ) repeat-x #434343; |
| padding: 10px 6px 10px 11px; |
| text-align: left; |
| font-size: 1.3em; |
| font-weight: normal; |
| } |
| html, body, form |
| { |
| width:90%; |
| margin: 0px auto;; |
| padding: 0px; |
| background: #e5ecf3; |
| } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server"> |
| </telerik:RadStyleSheetManager> |
| <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> |
| </telerik:RadScriptManager> |
| <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> |
| <AjaxSettings> |
| <telerik:AjaxSetting AjaxControlID="RadGrid1"> |
| <UpdatedControls> |
| <telerik:AjaxUpdatedControl ControlID="RadGrid1" /> |
| </UpdatedControls> |
| </telerik:AjaxSetting> |
| </AjaxSettings> |
| </telerik:RadAjaxManager> |
| <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" GridLines="None" |
| OnNeedDataSource="RadGrid1_NeedDataSource" Skin="WebBlue" |
| OnDetailTableDataBind="RadGrid1_DetailTableDataBind" |
| oncolumncreated="RadGrid1_ColumnCreated" Font-Bold="False" |
| Font-Italic="False" Font-Names="Calibri" Font-Overline="False" |
| Font-Size="Large" Font-Strikeout="False" Font-Underline="False"> |
| <HeaderContextMenu EnableTheming="True" Skin="Hay"> |
| <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> |
| </HeaderContextMenu> |
| <MasterTableView AutoGenerateColumns="True" font-bold="False" |
| font-italic="False" font-names="Calibri" font-overline="False" |
| font-size="Medium" font-strikeout="False" font-underline="False"> |
| <DetailTables> |
| <telerik:GridTableView runat="server" AutoGenerateColumns="True" |
| BorderWidth="1px" Font-Bold="False" Font-Italic="False" Font-Names="Calibri" |
| Font-Overline="False" Font-Size="Medium" Font-Strikeout="False" |
| Font-Underline="False" GridLines="None"> |
| <RowIndicatorColumn> |
| <HeaderStyle Width="20px" /> |
| </RowIndicatorColumn> |
| <ExpandCollapseColumn> |
| <HeaderStyle Width="20px" /> |
| </ExpandCollapseColumn> |
| </telerik:GridTableView> |
| </DetailTables> |
| <RowIndicatorColumn> |
| <HeaderStyle Width="20px"></HeaderStyle> |
| </RowIndicatorColumn> |
| <ExpandCollapseColumn Visible="True"> |
| <HeaderStyle Width="20px"></HeaderStyle> |
| </ExpandCollapseColumn> |
| <EditFormSettings> |
| <EditColumn UniqueName="EditCommandColumn1"></EditColumn> |
| </EditFormSettings> |
| </MasterTableView> |
| <FilterMenu EnableTheming="True" Skin="Hay"> |
| <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> |
| </FilterMenu> |
| </telerik:RadGrid> |
| </form> |
| </body> |
| </html> |
1 Answer, 1 is accepted
0
Accepted
Vyrban
Top achievements
Rank 1
Rank 1
answered on 05 Dec 2008, 09:41 AM
Hi Matthew !
Keep on mind that the different browsers render height and width (using %) by different ways. So, to fix this problem, use fixed height and width in pixels. Of course the grid must be smaller then the pane. :)
P.S: your project is too similar to the new Telerik control "FileExplorer". Can it helps you?
Keep on mind that the different browsers render height and width (using %) by different ways. So, to fix this problem, use fixed height and width in pixels. Of course the grid must be smaller then the pane. :)
P.S: your project is too similar to the new Telerik control "FileExplorer". Can it helps you?