RadControls version |
Up to 2008.3.1125.35
|
.NET version |
2.0, 3.0, 3.5
|
Visual Studio version |
2005, 2008
|
programming language |
VB, Javascript
|
browser support |
all browsers supported by RadControls
|
PROJECT DESCRIPTION
Shows how to create a properly sized RadWindow.
Summary
It can be quite difficult to correctly size a RadWindow without testing dozens of width/height combinations this is not the controls fault, this is due to the fact that the actual size of the content does not amount to the required size of the window. In order to solve this some simple javascript can be used to help you identify the perfect size for your RadWindow using the integrated telerik window functions.
Steps
1. Add a new "Web Form" to your solution and drag a RadWindow object from your toolbox onto the designer.
2a. Designer (Set In Properties Window)
Behavior
- Behaviors - Close, Move, Maximize, Resize
Client-side events
- OnClientResize = GetDimensions
2b Source
<telerik:RadWindow Skin="Telerik" ID="RadWindow1" runat="server" Modal="true" Behaviors="Close, Move, Maximize, Resize" OnClientResize="GetDimensions" /> |
3. In the source for your .ASPX page add the following javascript function.
function GetDimensions(sender, args) |
{ |
var bounds = sender.getWindowBounds(); |
alert(new String("Width:" + bounds.width + " " + "Height: " + bounds.height));
return; |
} |
|
4. Add another javascript function in the .ASPX source to open the window. There are numerous ways to do this, this is just one option.
function OpenResizableWindow() |
{ |
var oWnd = $find("<%=RadWindow1.ClientID %>"); |
oWnd.set_Url("WebForm2.aspx"); |
oWnd.set_title("Testing Window Resize"); |
oWnd.show(); |
return; |
} |
In the
oWnd.set_Url braces, change the url to a website of your choosing or an existing webform within your project.
In this example a second form called WebForm2.aspx has been added to the solution, however a URL will work the same.
5. Add a standard input button to your form.
<input type="button" onclick="OpenResizableWindow()" value="Test" id="btnTest" name="btnTest" type="button" /> |
6. Your source .ASPX file should now look something like this.
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm2.aspx.vb" Inherits="Website1.WebForm1" %> |
|
<%@ 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 runat="server"> |
<title>Testing Window Resize</title> |
</head> |
<body> |
<telerik:RadCodeBlock ID="rCBL1" runat="server"> |
|
<script type="text/javascript"> |
|
function GetDimensions(sender, args) |
{ |
var bounds = sender.getWindowBounds(); |
alert(new String("Width:" + bounds.width + " " + "Height: " + bounds.height));
return; |
} |
|
function OpenResizableWindow() |
{ |
var oWnd = $find("<%=RadWindow1.ClientID %>"); |
oWnd.setUrl("Default.aspx"); |
oWnd.set_title("Testing Window Resize"); |
oWnd.show(); |
return; |
} |
|
</script> |
|
</telerik:RadCodeBlock> |
<form id="form1" runat="server"> |
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"> |
</telerik:RadScriptManager> |
<telerik:RadWindow Skin="Telerik" ID="RadWindow1" runat="server" Modal="true" Behaviors="Close, Move, Maximize, Resize" |
OnClientResize="GetDimensions" /> |
<div> |
<input type="button" onclick="OpenResizableWindow()" value="Test" id="btnTest" name="btnTest" /> |
</div> |
</form> |
</body> |
</html> |
7. Finally, Run the project and click on the button. When the window appears, resize it to the desired size and then release the mouse.
An alert will popup giving details of the width/height.