Configure RadSplitter into Sections

2 posts, 1 answers
  1. Robert
    Robert  avatar
    68 posts
    Member since:
    Feb 2009

    Posted 03 Feb 2012 Link to this post

    I am working with the RadSplitter, and I have the following requirement:

    <RadSplitter>
    <RadToolBar> - spans across entire width of RadSplitter
    <RadPane Width="20%" />
    <RadSplitBar />
    <RadPane Width="80%" />
    </RadSplitter>

    Is it possible to have a RadToolBar span the entire length of a RadSplitter at the top, with two RadPanes below the RadToolBar?
     
    - similiar to how an html table can be customized;

    Thanks in advance for any insight;
  2. Answer
    Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 06 Feb 2012 Link to this post

    Hi Robert,

    It is not possible to nest controls different that RadPane or RadSplitBar inside RadSplitter. However, you can achieve the required layout using another (horizontal) splitter to wrap the toolbar in one pane and the other splitter to be nested inside the second pane, e.g.:
    <telerik:RadSplitter ID="wrapperSplitter" runat="server" Orientation="Horizontal" Width="100%" Height="100%">
        <telerik:RadPane ID="toolbarPane" runat="server">
            <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Width="100%">
                <Items>
                    <telerik:RadPanelItem Text="Item1"></telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="Item2"></telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="Item3"></telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelBar>
        </telerik:RadPane>
        <telerik:RadPane ID="contentPane" runat="server">
            <telerik:RadSplitter ID="nestedSplitter" runat="server">
                <telerik:RadPane ID="leftPane" runat="server" Width="20%"></telerik:RadPane>
                <telerik:RadSplitBar ID="RadSplitBar1" runat="server" />
                <telerik:RadPane ID="rightPane" runat="server" Width="80%"></telerik:RadPane>
            </telerik:RadSplitter>
        </telerik:RadPane>
    </telerik:RadSplitter>

    In addition, if you need to dynamically resize pane that contains the PanelBar you can use RadSplitter's client-side API to set the correct height. More detailed information regarding the splitter's client-side API is available in our online documentation.

    Kind regards,
    Dobromir
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top