Example integrating Splitter and Dock?

3 posts, 1 answers
  1. Chris Trina
    Chris Trina avatar
    86 posts
    Member since:
    Mar 2006

    Posted 16 Feb 2010 Link to this post

    Is there an example of the best practices for integrating the splitter control and dock controls on the same page?  Picture a portal style page where the splitter can basically resize the docking zones and the content, contained in docks resizes based on the zone it is dropped into.

    Seems like a common use case, but I cannot find an existing example.

    Thx

    Chris
  2. Answer
    Pero
    Admin
    Pero avatar
    1156 posts

    Posted 19 Feb 2010 Link to this post

    Hi Chris,

    This can be easily achieved by placing a DockZone into a RadPane and setting its width in percent values. The zone will automatically resize when the Panes are (Splitter is) resized. Here is a simple project demonstrating this:

    <%@ 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">
    <head id="Head1" runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
                <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="700" Width="100%">
                    <telerik:RadPane ID="navigationPane" runat="server" Width="150">
                        <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="95%">
                            <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock-Title">
                                <ContentTemplate>
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                    CONTENT
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                </ContentTemplate>
                            </telerik:RadDock>
                        </telerik:RadDockZone>
                    </telerik:RadPane>
                    <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward" />
                    <telerik:RadPane ID="contentPane" runat="server">
                        <telerik:RadDockZone ID="RadDockZone2" runat="server" MinHeight="300px" Width="95%">
                            <telerik:RadDock ID="RadDock2" runat="server" Width="300px" Title="RadDock-Title">
                                <ContentTemplate>
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                    CONTENT
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                </ContentTemplate>
                            </telerik:RadDock>
                        </telerik:RadDockZone>
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadDockLayout>
        </div>
        </form>
    </body>
    </html>



    Greetings,
    Pero
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Chris Trina
    Chris Trina avatar
    86 posts
    Member since:
    Mar 2006

    Posted 19 Feb 2010 Link to this post

    Thank you very much that was very helpful!
Back to Top