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

5 posts, 1 answers
  1. Mohammed
    Mohammed avatar
    16 posts
    Member since:
    Nov 2013

    Posted 08 Jun 2014 Link to this post

    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>
     
    <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 .
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3596 posts

    Posted 10 Jun 2014 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mohammed
    Mohammed avatar
    16 posts
    Member since:
    Nov 2013

    Posted 10 Jun 2014 in reply to Marin Bratanov Link to this post

    Marin Bratanov ,
    Thanks For Your Replay.

    As You Can See In The Screenshots The Code Is Working When The Page Direction Set To LTR , And It is Not Working When The Page Direction Set To RTL .
    So What The Relation Between The RestrictionZone And The Page Direction ?
    Why It Causing The Issue ?



  5. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3596 posts

    Posted 10 Jun 2014 Link to this post

    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.

     
  6. Mohammed
    Mohammed avatar
    16 posts
    Member since:
    Nov 2013

    Posted 10 Jun 2014 in reply to Marin Bratanov Link to this post

    Marin Bratanov ,
    Thanks .
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017