RadToolbar inside RadDock

5 posts, 0 answers
  1. USI
    USI avatar
    26 posts
    Member since:
    Oct 2009

    Posted 16 Mar 2011 Link to this post

    Hi,

    I am using a RadToolBar inside a RadDock. I would like to know if is possible to fit perfectly the toolbar inside the raddock. The image in attachment shows the problem I want to solve.

    Thanks in advance,

    Michael Pinheiro
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 17 Mar 2011 Link to this post

    Hello Michael,

    The left and right spacing of the dock is left, so you could easily make the dock resizable on the client (they are used as resizing handles). To remove it we need to use custom CSS code, and JavaScript. For your convenience I have implemented a sample project that does this. Here is the full source code:

    <%@ 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>
        <style type="text/css">
            .rdMiddle .rdLeft, .rdMiddle .rdRight, .rdBottom
            {
                display: none !important;
            }
            .rdContent
            {
                border: 1px solid #a7bac5 !important;
                border-top:none;
                width: auto !important;
            }
        </style>
        <script type="text/javascript">
            function DockInit(dock, args)
            {
                var middleTableCell = dock.get_contentContainer().parentNode;
                middleTableCell.setAttribute("colSpan", 3);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <table id="table" cellspacing="3">
        </table>
        <div>
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
                <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px">
                    <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock-Title"
                        Skin="Vista" EnableRoundedCorners="true" OnClientInitialize="DockInit" Height="300px">
                        <ContentTemplate>
                            <div style="height: 100px; background: red;">
                            </div>
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </telerik:RadDockLayout>
        </div>
        </form>
    </body>
    </html>

    Let me know if you have questions, or need further clarification.

    Greetings,
    Pero
    the Telerik team
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. USI
    USI avatar
    26 posts
    Member since:
    Oct 2009

    Posted 17 Mar 2011 Link to this post

    Hi,

    Thanks for the fast answer. It works. The problem is that I want to keep the resize functionality.

    Is it possible to make only the toolbar fit perfectly in the dock and let the content with the left and right spacing in order to keep the resize funcionality? Or maybe adding a statusbar that could be the resize handler?


    Michael Pinheiro
  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 21 Mar 2011 Link to this post

    Hello Michael,

    I modified my code from the previous post, and it turns out, we can keep the bottom border (i.e. statusbar) of the dock, so it can be resized. Here is the modified code:
    <%@ 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>
        <style type="text/css">
            .rdMiddle .rdLeft, .rdMiddle .rdRight
            {
                display: none !important;
            }
            .rdContent
            {
                border: 1px solid #a7bac5 !important;
                border-top: 0px !important;
                border-bottom: 0px !important;
                width: auto !important;
            }
        </style>
        <script type="text/javascript">
            function DockInit(dock, args)
            {
                var middleTableCell = dock.get_contentContainer().parentNode;
                middleTableCell.setAttribute("colSpan", 3);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <table id="table" cellspacing="3">
        </table>
        <div>
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
                <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px">
                    <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock-Title"
                        Resizable="true" Skin="Vista" EnableRoundedCorners="true" OnClientInitialize="DockInit"
                        Height="300px">
                        <ContentTemplate>
                            <div style="height: 100px; background: red;">
                            </div>
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </telerik:RadDockLayout>
        </div>
        </form>
    </body>
    </html>

    Note that, depending on the skin used you might need to change the color of the border (highlighted in yellow). In this example I have used the color for the Vista skin.

    Kind regards,
    Pero
    the Telerik team
  6. USI
    USI avatar
    26 posts
    Member since:
    Oct 2009

    Posted 21 Mar 2011 Link to this post

    Hi,

    That's exactly what I was looking for.

    Thank you.

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