This is a migrated thread and some comments may be shown as answers.

Splitter, RadPane, and Grid

1 Answer 93 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Bailey Everitt
Top achievements
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 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=neutralPublicKeyToken=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

Sort by
0
Accepted
Vyrban
Top achievements
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?
Tags
Splitter
Asked by
Bailey Everitt
Top achievements
Rank 1
Answers by
Vyrban
Top achievements
Rank 1
Share this question
or