This is a migrated thread and some comments may be shown as answers.

How to add a modal to raddock

3 Answers 250 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Boone
Top achievements
Rank 2
Boone asked on 23 Jul 2008, 07:13 PM
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.

3 Answers, 1 is accepted

Sort by
0
Sophy
Telerik team
answered on 25 Jul 2008, 01:31 PM
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,
Sophy
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Joshua Gates
Top achievements
Rank 1
answered on 08 Oct 2009, 03:15 PM
there seems to be an issue with the latest asp.net ajax buiild.
i am using this modal code and with the latest build started betting a stack out of memory error.


any ideas
0
Pero
Telerik team
answered on 09 Oct 2009, 08:06 AM
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head id="Head1" runat="server">
    <title></title>
 
    <script type="text/javascript">
        function ShowRadDock(dockID)
        {
            var dock = $find(dockID);
            dock.enableModalExtender();
 
        }
        function HideRadDock(dock, args)
        {
            dock.disableModalExtender();
        }
    </script>
 
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
            <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock1" Text="RadDock1" Closed="true"
                Style="z-index: 5" OnClientInitialize="ClientInitialize">
                <ContentTemplate>
                    <br />
                    <br />
                    <asp:Button ID="Button1" runat="server" Text="Postback" />
                    <br />
                    <br />
                </ContentTemplate>
                <Commands>
                    <telerik:DockCloseCommand OnClientCommand="HideRadDock" />
                </Commands>
            </telerik:RadDock>
        </telerik:RadDockLayout>
        <input type="button" value="Show RadDock1" onclick="ShowRadDock('RadDock1')" />
        <asp:Button ID="Button2" runat="server" Text="Postback" />
    </div>
 
    <script type="text/javascript">
 
        Telerik.Web.UI.RadDock.prototype.enableModalExtender = function()
        {
            this.set_closed(false);
            if (!this._modalExtender)
            {
                this._modalExtender = new Telerik.Web.UI.ModalExtender(this.get_element());
            }
            this._modalExtender.show();
            this.repaint();
            this.updateClientState();
 
        };
        Telerik.Web.UI.RadDock.prototype.disableModalExtender = function()
        {
            if (this._modalExtender)
            {
                this._modalExtender.hide();
            }
        };
 
        Telerik.Web.UI.RadDock.prototype.dispose = function()
        {
            if (this._modalExtender)
            {
                this._modalExtender.dispose();
                this._modalExtender = null;
            }
            Telerik.Web.UI.RadDock.callBaseMethod(this, 'dispose');
        };
        function ClientInitialize(dock, args)
        {
            if (dock.get_closed() == false)
            {
                dock.enableModalExtender()
            }
        }
    </script>
 
    </form>
</body>
</html>





All the best,
Pero
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.
Tags
Dock
Asked by
Boone
Top achievements
Rank 2
Answers by
Sophy
Telerik team
Joshua Gates
Top achievements
Rank 1
Pero
Telerik team
Share this question
or