Splitter, RadPane, and Grid

2 posts, 1 answers
  1. Bailey Everitt
    Bailey Everitt avatar
    18 posts
    Member since:
    May 2008

    Posted 04 Dec 2008 Link to this post

    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> 
     

  2. Answer
    Vyrban
    Vyrban avatar
    31 posts
    Member since:
    Nov 2008

    Posted 05 Dec 2008 Link to this post

    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?
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top