RadDock exapand collapse Button Position

3 posts, 0 answers
  1. Rashmi
    Rashmi avatar
    4 posts
    Member since:
    Jul 2011

    Posted 16 Sep 2011 Link to this post

    I am using Raddock control in my application where I have an requirement where I need to move the expand collapse button Position to the center of Raddock. Is there any way I can control the position and move it to middle of dock?  Or how I can create custom button which will give me the ability to perform expand and collapse functions?
  2. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 19 Sep 2011 Link to this post

    Hello Rashmi,

    The following code demonstrates how to move the expand/collapse bbuttons to the center of the titlebar. Note that you should not use Dock Title property in that scenario as it will not work properly with these modifications:

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!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">
            div.RadDock .rdCenter .rdCommands
            {
                float: none;
                position: relative;
                left: 45%;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="sm1" runat="server" />
        <telerik:RadDock runat="server" ID="RadDockContent" Title="Dock Title" EnableRoundedCorners="true" Top="20"
            Left="20">
            <ContentTemplate>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget tortor ipsum,
                    tristique vehicula turpis. Fusce adipiscing, neque a elementum vestibulum, neque
                    erat convallis massa, ac tempus urna sapien ut risus. Sed vestibulum fringilla pharetra.
                </p>
            </ContentTemplate>
        </telerik:RadDock>
        </form>
    </body>
    </html>

    If you want to use centered buttons together with Title, you should use the following code:

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!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">
            .rdTitleBar
            {
                position: relative;
            }
            div.RadDock .rdCenter .rdCommands
            {
                float: none;
                position: absolute;
                left: 40%;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="sm1" runat="server" />
        <telerik:RadDock runat="server" ID="RadDockContent" Title="Dock Title" EnableRoundedCorners="true" >
            <ContentTemplate>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget tortor ipsum,
                    tristique vehicula turpis. Fusce adipiscing, neque a elementum vestibulum, neque
                    erat convallis massa, ac tempus urna sapien ut risus. Sed vestibulum fringilla pharetra.
                </p>
            </ContentTemplate>
        </telerik:RadDock>
        </form>
    </body>
    </html>


    Regards,
    Bozhidar
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rashmi
    Rashmi avatar
    4 posts
    Member since:
    Jul 2011

    Posted 19 Sep 2011 Link to this post

    It worked great......Thanks.....
Back to Top