How to add a modal to raddock

4 posts, 0 answers
  1. Boone
    Boone avatar
    47 posts
    Member since:
    May 2008

    Posted 23 Jul 2008 Link to this post

    I have a raddock with DockMode="Floating". When this dock is activated I would like there to be a modal just like you can do with RadWindow.
  2. Sophy
    Sophy avatar
    636 posts

    Posted 25 Jul 2008 Link to this post

    Hi Boone,

    RadDock does not provide the desired  functionality but you could achieve it with some custom code. I have prepared a sample page which demonstrates how to achieve the desired behavior. The sample contains a button which shows a floating dock when clicked and makes it modal. When it is clicked on the Close command of the dock the dock is closed and all other controls on the page become active. Please, note that it is very important to set z-index to the RadDock so that all controls with a z-index less than that of the dock will become inactive when you make the dock modal. You can feel free to modify the provided sample so that it answers the requirements of your scenario.

    Best wishes,
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. DevCraft R3 2016 release webinar banner
  4. Joshua Gates
    Joshua Gates avatar
    72 posts
    Member since:
    Feb 2007

    Posted 08 Oct 2009 Link to this post

    there seems to be an issue with the latest ajax buiild.
    i am using this modal code and with the latest build started betting a stack out of memory error.

    any ideas
  5. Pero
    Pero avatar
    1156 posts

    Posted 09 Oct 2009 Link to this post

    Hello Joshua,

    Try the following code. It does not give any problems with the latest build:

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <head id="Head1" runat="server">
        <script type="text/javascript">
            function ShowRadDock(dockID)
                var dock = $find(dockID);
            function HideRadDock(dock, args)
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
                <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock1" Text="RadDock1" Closed="true"
                    Style="z-index: 5" OnClientInitialize="ClientInitialize">
                        <br />
                        <br />
                        <asp:Button ID="Button1" runat="server" Text="Postback" />
                        <br />
                        <br />
                        <telerik:DockCloseCommand OnClientCommand="HideRadDock" />
            <input type="button" value="Show RadDock1" onclick="ShowRadDock('RadDock1')" />
            <asp:Button ID="Button2" runat="server" Text="Postback" />
        <script type="text/javascript">
            Telerik.Web.UI.RadDock.prototype.enableModalExtender = function()
                if (!this._modalExtender)
                    this._modalExtender = new Telerik.Web.UI.ModalExtender(this.get_element());
            Telerik.Web.UI.RadDock.prototype.disableModalExtender = function()
                if (this._modalExtender)
            Telerik.Web.UI.RadDock.prototype.dispose = function()
                if (this._modalExtender)
                    this._modalExtender = null;
                Telerik.Web.UI.RadDock.callBaseMethod(this, 'dispose');
            function ClientInitialize(dock, args)
                if (dock.get_closed() == false)

    All the best,
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top