Dock Horizontal Orientation (with no wrapping)

2 posts, 0 answers
  1. rjb227s
    rjb227s avatar
    17 posts
    Member since:
    Apr 2009

    Posted 06 Sep 2011 Link to this post

    Hi,

    Question:  How do you prevent a dock zone in horizontal orientation from wrapping the dock zones? 
    Reason:    I need to keep all windows in 1 row and have a scroll bar allow the user to see the windows that go off the page.  This needs to maintain only 1 row of windows even when users resize their browser.

    Why:
    I am building a dashboard that allows users to add as many dock windows to a single horizontal dock zone as they wish.  We offer a setting in the interface that lets the user show N windows in the current screen. We set the window width based on the the current resolution divided by the number of windows the user wants to view in the screen.  All other windows (if any) go off the page to the right and user can view them with the horizontal scroll bar.

    Ex) If the user has 5 windows and they choose to view 3 windows in the screen and our screen width is 1000px... We would make the window width = 1000 / 3 (roughly).  The other 2 windows would be off the page and the scroll bar is needed to view them.
     
    Thank you in advance for your help!

    Ryan
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 08 Sep 2011 Link to this post

    Hi Ryan,

    I believe the best approach to achieve the desired behavior, is by setting a large value for the zone's Width, and then placing it inside a <div/> element whose width and overflow will be set dynamically based on the chosen settings by the user. Here is a simple demonstration:
    <%@ 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 runat="server">
        <title></title>
        <style type="text/css">
            #zone1
            {
                width: 605px;
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="ScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
            <div id="zone1">
                <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="100px" Width="2300px"
                    Orientation="Horizontal">
                    <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock-Title" Width="300px"
                        Height="300px">
                        <ContentTemplate>
                            Dock's Content
                        </ContentTemplate>
                    </telerik:RadDock>
                    <telerik:RadDock ID="RadDock2" runat="server" Title="RadDock-Title" Width="300px"
                        Height="300px">
                        <ContentTemplate>
                            Dock's Content
                        </ContentTemplate>
                    </telerik:RadDock>
                    <telerik:RadDock ID="RadDock3" runat="server" Title="RadDock-Title" Width="300px"
                        Height="300px">
                        <ContentTemplate>
                            Dock's Content
                        </ContentTemplate>
                    </telerik:RadDock>
                    <telerik:RadDock ID="RadDock4" runat="server" Title="RadDock-Title" Width="300px"
                        Height="300px">
                        <ContentTemplate>
                            Dock's Content
                        </ContentTemplate>
                    </telerik:RadDock>
                    <telerik:RadDock ID="RadDock5" runat="server" Title="RadDock-Title" Width="300px"
                        Height="300px">
                        <ContentTemplate>
                            Dock's Content
                        </ContentTemplate>
                    </telerik:RadDock>
                    <telerik:RadDock ID="RadDock6" runat="server" Title="RadDock-Title" Width="300px"
                        Height="300px">
                        <ContentTemplate>
                            Dock's Content
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </div>
        </telerik:RadDockLayout>
        </form>
    </body>
    </html>


    Greetings,
    Pero
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top