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

RadWindow height problem

1 Answer 203 Views
UI for ASP.NET AJAX in ASP.NET MVC
This is a migrated thread and some comments may be shown as answers.
Dayana Maliyakal
Top achievements
Rank 1
Dayana Maliyakal asked on 05 May 2010, 01:00 PM

I need to set the radwindow height as 100% to the form window in IE,Chrome,Mozilla.When I am using the following code the radwindow is displayed as an attached file. Please help me to solve this issue.



Default.aspx page


<%

@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default2" %>

 

<%

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

 

 

 

 

 

<style type="text/css">

 

 

 

 

 

html, body, form

 

 

 

 

{

 

height: 100%;

 

 

width: 100%;

 

 

margin: 0px;

 

 

padding: 0px;

 

 

overflow: hidden;

 

}

 

</style>

 

</

 

head>

 

<

 

body>

 

 

 

 

 

<form id="form1" runat="server">

 

 

 

 

 

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

 

 

 

 

 

</telerik:RadScriptManager>

 

 

 

 

 

<script type="text/javascript">

 

 

 

 

 

function onWindowResize(oWindow)

 

{

setWinSize(oWindow);

}

 

function setWinSize(oWindow) {

 

 

 

var realBounds = $telerik.getBounds(oWindow.get_popupElement()); // The true size ;

 

 

 

 

 

var contentFrame = oWindow.get_contentFrame();

 

contentFrame.style.height = realBounds.height +

"px"; // Set the true height ;

 

 

 

 

 

if (realBounds.height < 150) {

 

contentFrame.style.height = realBounds.height +

"px"; // Set the true height ;

 

 

 

 

 

}

 

else {

 

contentFrame.style.height =

"100%";

 

 

}

}

 

 

function OnClientShow(oWindow, args)

 

{

setWinSize(oWindow);

}

 

</script>

 

 

 

 

 

<div>

 

 

 

 

 

<telerik:RadWindowManager ID="RadWindowManager1" runat="server">

 

 

 

 

 

<Windows>

 

 

 

 

 

<telerik:RadWindow ID="RadWindow1" runat="server" Width="600" Height="800"

 

 

 

 

 

KeepInScreenBounds="true" OnClientShow="OnClientShow" OnClientResize="onWindowResize" VisibleOnPageLoad="true"

 

 

 

 

 

NavigateUrl="Popup.aspx">

 

 

 

 

 

</telerik:RadWindow>

 

 

 

 

 

</Windows>

 

 

 

 

 

</telerik:RadWindowManager>

 

 

 

 

 

 

 

</div>

 

 

 

 

 

</form>

 

</

 

body>

 

</

 

html>

 

1 Answer, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 06 May 2010, 02:31 PM
Hello Dayana,

Please, note that it is not recommended to set the size of the elements of a RadControl one by one - for such cases the controls offer public API which does what you need. In the case of RadWindow you should use set_height or setSize methods which are listed below:

http://www.telerik.com/help/aspnet-ajax/window_programmingradwindowmethods.html

What you should do is to calculate the desired size which is developer's task and not directly related to RadControls and then set the size to the RadWindow. One possible solution is to use the $telerik library e.g as shown below:

<%@ Page Language="C#" %>
  
<%@ 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 runat="server">
    <title></title>
    <style type="text/css">
        html, body, form
        {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="RadScriptManager1" runat="server">
    </asp:ScriptManager>
  
    <script type="text/javascript">
  
        function onWindowResize(oWindow)
        {
            setWinSize(oWindow);
        }
  
        function setWinSize(oWindow)
        {
            var bounds = $telerik.getViewPortSize();
            oWindow.set_height(bounds.height);
        }
        function OnClientShow(oWindow, args)
        {
            setWinSize(oWindow);
        }
  
    </script>
  
    <div>
        <telerik:RadWindowManager ID="RadWindowManager1" runat="server">
            <Windows>
                <telerik:RadWindow ID="RadWindow1" runat="server" Width="600" Height="800" KeepInScreenBounds="true"
                    OnClientShow="OnClientShow" OnClientResize="onWindowResize" VisibleOnPageLoad="true"
                    NavigateUrl="Popup.aspx">
                </telerik:RadWindow>
            </Windows>
        </telerik:RadWindowManager>
    </div>
    </form>
</body>
</html>

If I have not correctly understand you or you need further assistance, please provide more detailed explanations and I will do my best to help.

Best wishes,
Svetlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Tags
UI for ASP.NET AJAX in ASP.NET MVC
Asked by
Dayana Maliyakal
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Share this question
or