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

How to add a modal to raddock

3 Answers 283 Views

Dock

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

3 Answers, 1 is accepted

answered on 25 Jul 2008, 01:31 PM

FloatingModalDock.zip

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.

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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 />

<asp:Button ID="Button1" runat="server" Text="Postback" />

<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.