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

Can't Change RadWindow Size With Javascript When Direction Is RTL

4 Answers 288 Views

Window

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

Mohammed asked on 08 Jun 2014, 10:05 AM

ltr.png

rtl.png

Hi ,

i am working with VS 2013 update 2 , and 2013 Q3 SP2

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="RadWindowResizeRTL._Default" %>

<!DOCTYPE html>

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

<head runat="server">

<title></title>

</head>

<body onload="PageLoad();" style="direction: rtl;">

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

<div>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function PageLoad() {

$find('<%=me.MainWebFormRadSplitter .ClientID %>').

set_height($telerik.$(window).height() - 50);

window.onresize = function () {

$find('<%=me.MainWebFormRadSplitter .ClientID %>').

set_height($telerik.$(window).height() - 50);

};

var MWindow = $find('<%=Me.MainRadWindow.ClientID %>');

MWindow.set_width($find('<%=Me.MainRadWindowRadPane.ClientID%>').get_width());

MWindow.set_height($find('<%=Me.MainRadWindowRadPane.ClientID %>').get_height());

MWindow.setUrl("http://www.telerik.com/");

MWindow.set_title("MWindow");

MWindow.show();

}

function MainRadWindowRadPane_Resized(sender, args) {

var MWindow = $find('<%=Me.MainRadWindow.ClientID %>');

MWindow.set_width(sender.get_width());

MWindow.set_height(sender.get_height());

}

</script>

</telerik:RadCodeBlock>

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

</telerik:RadScriptManager>

</div>

<telerik:RadAjaxManager ID="MainWebFormRadAjaxManager" runat="server" DefaultLoadingPanelID="MainWebFormRadAjaxLoadingPanel">

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="MainWebFormRadAjaxLoadingPanel" runat="server" Skin="Default">

</telerik:RadAjaxLoadingPanel>

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

<Windows>

<telerik:RadWindow ID="MainRadWindow" runat="server" Behavior="Reload"

Behaviors="Reload" DestroyOnClose="True"

NavigateUrl="http://www.telerik.com/"

ReloadOnShow="True" RestrictionZoneID="MainRadWindowRadPane"

ShowContentDuringLoad="False" ShowOnTopWhenMaximized="False"

Title="MainRadWindow" VisibleStatusbar="False">

</telerik:RadWindow>

</Windows>

</telerik:RadWindowManager>

<telerik:RadSkinManager ID="MainWebFormRadSkinManager" runat="server">

</telerik:RadSkinManager>

<br />

<telerik:RadSplitter ID="MainWebFormRadSplitter" runat="server" Width="100%">

<telerik:RadPane ID="PanelRadPane" runat="server" Width="200px" Index="0">

</telerik:RadPane>

<telerik:RadPane ID="MainRadWindowRadPane" runat="server" OnClientResized="MainRadWindowRadPane_Resized" Index="1"></telerik:RadPane>

</telerik:RadSplitter>

</form>

</body>

</html>

add this aspx code to a new project and then run the project and try to re-size the browser window and see what happened , then remove or change the style added to <body> and run the project .

i attached screen shots to show the difference .

4 Answers, 1 is accepted

answered on 10 Jun 2014, 10:09 AM

wnd-resizing.zip

Hello,

A RestrictionZone implies a static page layout. Usually the restriction zone must be a static element with dimensions set in pixels which must not change. There are many reasons for these requirements, for example:
- HTML elements do not have resizing events, so the RadWindow/RadWindowManager cannot be notified that their dimensions have changed when they are set in percent
- Even if it were possible to follow such events what should be the behavior of the RadWindow - should it re-center itself in the restriction zone, should it move to (0,0), should it try to stay in place and risk the case when there isn't enough room available? All of these cases would change the RadWindow somehow and this change would not be initiated by the user, so it would be seen as buggy behavior.

Thus, what I would advise is that you remove the RestrioctionZoneID property and let the RadWindow be maximized in the entire browser window. Thus it can follow the browser events and resize itself if it is maximized. On the subject of showing a RadWindow with dimensions set in percent I can suggest you examine this KB article and employ its logic in your case.

Nevertheless, I am attaching a sample that improves on the resizing that you can use as base. Note that I am providing this script as-is and I cannot guarantee it will work in all cases. You can extend if further to try to achieve your goal in case it is not sufficient, yet this configuration is not a supported scenario by the control and I cannot guarantee that the desired effect can be achieved.

Regards,

Marin Bratanov
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Accepted

answered on 10 Jun 2014, 11:54 AM

Hi Mohammed,

As I already explained, a dynamic restriction zone is not supported. The API of the control states that "This element must have explicit dimensions in pixels and they must be sufficient to contain the RadWindow." which means it must be a static element. Thus, I cannot guarantee this scenario will work properly. Most likely, there are some calculations that do not pass properly in RTL mode because offsets are inverted, but I cannot say what exactly the case is.

I hope the additional ideas I provided in my previous reply will help you get the RadWindow over the entire screen.

Regards,

Marin Bratanov
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.