New to Telerik UI for ASP.NET AJAXStart a free 30-day trial

Using RadWindow as a Dialog

RadWindow events and properties provide the support you need to create dialogs that communicate with your Web page.

On the Main Page

  • The OnClientShow event handler sets the argument to the dialog being opened.

  • The OnClientClose event handler receives the result of the dialog and responds.

  • The necessary code - a RadWindow declaration and the event handlers themselves:

ASP.NET
<script type="text/javascript" language="javascript">
	function clientShow(sender, eventArgs)
	{
		var txtInput = document.getElementById("txtInput");
		sender.argument = txtInput.value;
	}
	function clientClose(sender, args)
	{
		if (args.get_argument() != null)
		{
			alert("'" + sender.get_name() + "'" + " was closed and returned the following argument: '" + args.get_argument() + "'");
		}
	}
</script>
<telerik:RadWindow RenderMode="Lightweight" ID="RadWindow1" runat="server" Modal="True" NavigateUrl="Dialog.aspx"
	OpenerElementID="showDialog" OnClientClose="clientClose" OnClientShow="clientShow" ReloadOnShow="true">
</telerik:RadWindow>
Type initial value here:
<br />
<asp:TextBox ID="txtInput" runat="server" /><br />
<asp:Button ID="showDialog" Text="Show Dialog" runat="server" />

On the Dialog Page

  • To get a reference to the RadWindow object that hosts the content, add the following script to the dialog page:
JavaScript
function GetRadWindow()
{
	var oWindow = null;
	if (window.radWindow)
		oWindow = window.radWindow;
	else if (window.frameElement.radWindow)
		oWindow = window.frameElement.radWindow;
	return oWindow;
}
  • Use the ASP.NET AJAX pageLoad() client function to read the argument and use it to initialize the dialog.
JavaScript
//this function is automatically called when all ASP.NET AJAX controls are fully rendered on the page
//and receives the argument passed from the parent page
//IMPORTANT: for pageLoad() to work, you need to have asp:scriptmanager or RadScriptManager controls on the page.
//Setting ReloadOnShow for the RadWindow to true ensures the page will be loaded freshly and that pageLoad() will be called

function pageLoad()
{
	txtInput = document.getElementById('txtUserInput');
	var currentWindow = GetRadWindow();
	txtInput.value = currentWindow.argument;
}	
ASP.NET
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TextBox ID="txtUserInput" runat="server"></asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" Text="Close With Argument" OnClientClick="returnArg(); return false;" />
<asp:Button ID="Button2" runat="server" Text="Cancel" OnClientClick="cancelAndClose(); return false;" />
  • The Cancel button closes the containing window like this:
JavaScript
//return no argument and close the RadWindow
function cancelAndClose()
{
	var oWindow = GetRadWindow();
	oWindow.close(null);
}
  • The Close With Argument button invokes the OnClientClose function and provides it with a return value like this:
JavaScript
//Close the dialog and return the argument to the OnClientClose event handler
function returnArg()
{
	var oWnd = GetRadWindow();
	oWnd.close(txtInput.value);
}

See Also