RadWindow and RadPageLayout

19 posts, 0 answers
  1. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 13 May Link to this post

    What is the proper way to make a window 'responsive'. We are revamping our application to use the RadPageLayout on all our pages and that has been going well thus far. The only issue is the RadWindows we use for our 'popups'. When I use the same technique as for our main pages the boxes in the rad window are all about 2 pixels wide. What is the proper way to accomplish things so the popup will be size appropriate as well?

     

    Thanks!!

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 16 May Link to this post

    Hello Stephanie,

    RadWindow does not affect the content and you can define any CSS rules you like in it.

    • When using the ContentTemplate, you will have to write your own CSS
    • When using an entire content page, you can use RadPageLayout in it

    In either case, I would suggest you review and comment on the following idea: http://feedback.telerik.com/Project/108/Feedback/Details/143807-adaptive-radwindow. My first comment shows a basic example of how you can make a RadWindow adaptive based on the screen size (in this case, just maximize it, but you can also use set_behaviors() according to your preferences). When the RadWindow is maximized, your CSS rules can make more accurate use of the available real estate (max/min-width rules in the @media query).

    Regards,

    Marin Bratanov
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 01 Jun in reply to Marin Bratanov Link to this post

    Sorry for the long delay I have been working on a million other projects as well...

    Okay so what is the 'proper' way to make a RadWindow responsive then? If I use the PageLayout and do not have a size on the RadWindow then everything shows as attached. If I put in a width. Then what width do I use to make sure it fits properly like all the other pages regardless of the screensize/device they are using?

  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 02 Jun Link to this post

    Hi Stephanie,

    There is no silver bullet and this should be implemented according to the concrete scenario and needs.

    From the screenshot, it seems that RadPageLayout is used in the content and RadWindow has AutoSize=true, which is an invalid scenario: http://docs.telerik.com/devtools/aspnet-ajax/controls/window/troubleshooting/autosizing-issues#content-dimensions.

    This means you have two options:

     

    Note that this is not about a RadWindow being responsive anymore, but about its content being responsive. RadWindow does not control or change its content and it is up to the developer to create the desired layout. Thus, you may also find interesting the following topic that can help get you started with responsive design: http://docs.telerik.com/devtools/aspnet-ajax/mobile-support/mobile-support-and-responsiveness.

    Regards,

    Marin Bratanov
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  6. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 14 Jun in reply to Marin Bratanov Link to this post

    Thank you for all that info, but I guess I am still confused....

    I just need a way to have the RadWindow and it contents show appropriately sized based on the size of the screen, device, browser. I have tried a few of these ideas but I cannot get things to work the way I want.

    I basically want a popup (RadWindow) to be centered and set a max width for it on larger screens so it does not take up the entire window. If on a smaller screen obviously the window should not be as wide. Since i am using the RadPageLayout for the content in the RadWindow the content then should size appropriately correct?

    So, what is the best way to appropriately do that. I am playing around with the Javacript that opens the RadWindows in our application.

     

    function openRadWindow(url, name, w, h) {

        if (w > document.documentElement.offsetHeight)
            w = document.documentElement.offsetHeight;

        var left = (screen.width / 2) - (w / 2);
        var top = (screen.height / 2) - (h / 2);
        var oWnd = radopen(url, name, w, h, left, top);

        oWnd.setSize(w, h);

        oWnd.center();
    }

     

  7. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 15 Jun Link to this post

    Hello Stephanie,

    Such a JS approach is the correct way to set dimensions according to the browser viewport. You may want to add more conditions and checks to accommodate different scenarios.

    As for the RadWindow contents - RadPageLayout is the easiest option but it is applicable only if you load an entire content page in the RadWindow.

    Regards,

    Marin Bratanov
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  8. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 28 Jun in reply to Marin Bratanov Link to this post

    Thanks. This seems to be working fairly for us. One other question....

    Is there a way to have things auto-size vertically but not horizontally? We want to have the ability to open the radwindow used for the popup using this JavaScript approach, but then there is a ton of white space below the fields which looks bad. 

  9. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 29 Jun Link to this post

    Hi Stephanie,

    You can use the AutoSizeBehaviors property and set it to HeightProportional. Here is a basic example that showcases how this feature works. Play around with the values and see the different results:

    <telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="true" AutoSize="true" AutoSizeBehaviors="HeightProportional">
        <ContentTemplate>
            <div style="width: 600px; height: 600px; background: yellow;"></div>
        </ContentTemplate>
    </telerik:RadWindow>

    compared to

    <telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="true" AutoSize="true" AutoSizeBehaviors="Height">

    or to

    <telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="true" AutoSize="true" AutoSizeBehaviors="Default">

    note that you must be careful when using both the AutoSize feature and the setSize method together, because you may end up again in the self-contradicting scenario where the RadWindow's size should determine its contents layout (setSize is called) but the RadWindow should resize according to its contents (AutoSize==true). Also, when resizing such a RadWindow, you may find useful the AutoSizeEnd event.

    Regards,

    Marin Bratanov
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  10. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 30 Jun in reply to Marin Bratanov Link to this post

    Thanks. I will definitely look into that. Now my new issue is the actual page layout itself.... I have been building all our new pages and when minimizing the browser to mimic the small, medium, large, etc things look great BUT now that I have released things to be tested and have checked on my phone they are not 'responsive' like I would expect. 

    I would expect things to be much bigger and not so small. That was the entire point of this project...UGH...

  11. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 01 Jul Link to this post

    Hi Stephanie,

    You should look into using @media queries to increase the font-size for small resolutions so you can take advantage of the elastic capabilities our controls offer: http://docs.telerik.com/devtools/aspnet-ajax/mobile-support/responsive,-adaptive-and-elastic-capabilities.

    As for the grid, you should look into using its Mobile RenderMode: http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/mobile-support/render-modes.

    Regards,

    Marin Bratanov
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  12. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 01 Jul in reply to Marin Bratanov Link to this post

    Thanks but I am not using a RadGrid.

    Like I mentioned everything works/looks fine on the pc browsers, android phone/tablet, but the medium on the iPad mini is NOT displaying correctly. Can I send a screenshot?

  13. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 04 Jul Link to this post

    Hi Stephanie,

    You can send a screenshot, but it is not likely to be of much help. It is usually the code that leads to the problem that helps in the resolution.

    What I can suggest is that you review the pixels this iPad provides so you can see in which category it falls into and adjust the grid settings of the RadPageLayout accordingly.

    The following article shows how you can use RadDeviceDetectionFramework to get the screen size it calculates and to apply some custom logic: http://docs.telerik.com/devtools/aspnet-ajax/controls/raddevicedetectionframework.

    Regards,

    Marin Bratanov
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  14. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 04 Jul in reply to Marin Bratanov Link to this post

    Thank you for that info. That seems to help on some of the popus, but others are not resizing height-wise....What is interesting is that they are all popups loaded from the same main page. Any ideas on what else to look into?
  15. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 05 Jul Link to this post

    You should compare the ones that work as expected to the ones that don't in terms of:

    • server properties and client-side configuration
    • render mode
    • content - HTML validation, dimensions being provided, CSS applied to the content


    Regards,

    Marin Bratanov
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  16. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 05 Jul in reply to Marin Bratanov Link to this post

    Thanks for that. I have pretty much checked everything.....

    For example here is one that does not resize the height:

    RadWindow:

    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

        <telerik:RadPageLayout runat="server" GridType="Fluid" ShowGrid="true" HtmlTag="None">
            <telerik:LayoutRow RowType="Container">
                <Rows>
                    <telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
                        <Columns>
                            <telerik:LayoutColumn Span="12">
                                <asp:ValidationSummary runat="server" ID="vldSum" CssClass="err" DisplayMode="BulletList" ShowMessageBox="true" ShowSummary="false" ValidationGroup="NewFamilyMember" />            
                            </telerik:LayoutColumn>
                        </Columns>
                    </telerik:LayoutRow>
                    <telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
                        <Columns>
                            <telerik:LayoutColumn Span="1" SpanSm="2" SpanXs="12">
                                Client:
                            </telerik:LayoutColumn>
                            <telerik:LayoutColumn Span="11" SpanSm="10" SpanXs="12">
                                <asp:TextBox runat="server" ID="txtClient" MaxLength="250" Width="100%" TabIndex="-1" Enabled="false" />
                                <asp:Literal runat="server" ID="litClient" Visible="false" />
                            </telerik:LayoutColumn>
                        </Columns>
                    </telerik:LayoutRow>
                    <telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
                        <Columns>
                            <telerik:LayoutColumn Span="1" SpanSm="2" SpanXs="12">
                                Name: <asp:RequiredFieldValidator runat="server" ID="reqName" ControlToValidate="txtName" Text="*" ErrorMessage="Enter Name" Display="None" ValidationGroup="NewFamilyMember" />
                            </telerik:LayoutColumn>
                            <telerik:LayoutColumn Span="5" SpanSm="4" SpanXs="12">
                                <asp:TextBox runat="server" ID="txtName" CssClass="req" MaxLength="45" Width="100%" TabIndex="2" />
                            </telerik:LayoutColumn>
                            <telerik:LayoutColumn Span="1" SpanSm="2" SpanXs="12">
                                Type: <asp:RequiredFieldValidator runat="server" ID="reqType" ControlToValidate="ddlType" Text="*" ErrorMessage="Select Type" Display="None" ValidationGroup="NewFamilyMember" />
                            </telerik:LayoutColumn>
                            <telerik:LayoutColumn Span="5" SpanSm="4" SpanXs="12">
                                <asp:DropDownList runat="server" ID="ddlType" CssClass="req" Width="100%" TabIndex="3" />
                            </telerik:LayoutColumn>
                        </Columns>
                    </telerik:LayoutRow>
                    <telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
                        <Columns>
                            <telerik:LayoutColumn Span="1" SpanSm="2" SpanXs="12">
                                Age: 
                            </telerik:LayoutColumn>
                            <telerik:LayoutColumn Span="5" SpanSm="4" SpanXs="12">
                                <asp:TextBox runat="server" ID="txtAge" MaxLength="25" Width="100%" TabIndex="4" />
                            </telerik:LayoutColumn>
                            <telerik:LayoutColumn Span="1" SpanSm="2" SpanXs="12">
                                Gender: <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1" ControlToValidate="ddlGender" Text="*" ErrorMessage="Select Gender" Display="None" ValidationGroup="NewFamilyMember" />
                            </telerik:LayoutColumn>
                            <telerik:LayoutColumn Span="5" SpanSm="4" SpanXs="12">
                                <asp:DropDownList runat="server" ID="ddlGender" Width="100%" CssClass="req" TabIndex="5">
                                    <asp:ListItem Text="Male" Value="M" />
                                    <asp:ListItem Text="Female" Value="F" />
                                </asp:DropDownList> 
                            </telerik:LayoutColumn>
                        </Columns>
                    </telerik:LayoutRow>
                    <telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
                        <Columns>
                            <telerik:LayoutColumn Span="12">
                                <div style="float:right;">
                                    <telerik:RadButton SingleClick="true" SingleClickText="Deleting..." ButtonType="LinkButton" runat="server" ID="btnDelete" Width="90" CssClass="btnN" Visible="false" ToolTip="Delete" Text="Delete" OnClick="btnDelete_Click" TabIndex="7" CausesValidation="false" OnClientClicking="ConfirmDelete" />                                
                                    <telerik:RadButton SingleClick="true" SingleClickText="Saving..." ButtonType="LinkButton" runat="server" ID="btnSave" Width="90" ToolTip="Save" CssClass="btnY" Text="Save" OnClick="btnSave_Click" TabIndex="6" ValidationGroup="NewFamilyMember" CommandArgument="0" />
                                </div>
                            </telerik:LayoutColumn>
                        </Columns>
                    </telerik:LayoutRow>
                </Rows>
            </telerik:LayoutRow>
        </telerik:RadPageLayout>

    </asp:Content>

     

    Opening Code: 

    lnkFamily.Attributes.Add("onclick", "openRadWindow('" + Constants.DIALOG_FAMILY + "?client=" + c.ID.ToString() + "'); return false;");

     

    RadWindow that does resize:

    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

        <telerik:RadPageLayout runat="server" GridType="Fluid" ShowGrid="true" HtmlTag="None">
            <telerik:LayoutRow RowType="Container">
                <Rows>
                    <telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
                        <Columns>
                            <telerik:LayoutColumn Span="12">
                                <asp:ValidationSummary runat="server" ID="vldSum" CssClass="err" DisplayMode="BulletList" ShowMessageBox="true" ShowSummary="false" ValidationGroup="ClientWaiver" />
                            </telerik:LayoutColumn>
                        </Columns>
                    </telerik:LayoutRow>
                    <telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
                        <Columns>
                            <telerik:LayoutColumn Span="2">
                                Client:
                            </telerik:LayoutColumn>
                            <telerik:LayoutColumn Span="10">
                                <asp:TextBox runat="server" ID="txtClient" MaxLength="250" Width="100%" TabIndex="-1" Enabled="false" />
                                <asp:Literal runat="server" ID="litClient" Visible="false" />
                            </telerik:LayoutColumn>
                        </Columns>
                    </telerik:LayoutRow>
                    <telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
                        <Columns>
                            <telerik:LayoutColumn Span="2">
                                Waiver: <asp:RequiredFieldValidator runat="server" ID="reqWaiver" ControlToValidate="ddlWaiver" Text="*" ErrorMessage="Select Waiver" Display="None" ValidationGroup="ClientWaiver" />
                            </telerik:LayoutColumn>
                            <telerik:LayoutColumn Span="4">
                                <asp:DropDownList runat="server" ID="ddlWaiver" CssClass="req" Width="100%" TabIndex="2" AppendDataBoundItems="true" OnSelectedIndexChanged="ddlWaiver_SelectedIndexChanged" AutoPostBack="true" />
                            </telerik:LayoutColumn>
                            <telerik:LayoutColumn Span="2">
                                Name:
                            </telerik:LayoutColumn>
                            <telerik:LayoutColumn Span="4">
                                <asp:TextBox runat="server" ID="txtName" Width="100%" MaxLength="45" TabIndex="3" />
                            </telerik:LayoutColumn>    
                        </Columns>
                    </telerik:LayoutRow>
                    <telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
                        <Columns>
                            <telerik:LayoutColumn Span="2">
                                Type:
                            </telerik:LayoutColumn>
                            <telerik:LayoutColumn Span="4">
                                <asp:DropDownList runat="server" ID="ddlType" CssClass="req" Width="100%" TabIndex="4">
                                    <asp:ListItem Text="Online" Value="1" />
                                    <asp:ListItem Text="Paper" Value="2" />
                                    <asp:ListItem Text="Other" Value="3" />
                                </asp:DropDownList>
                                <asp:RequiredFieldValidator runat="server" ID="reqType" ControlToValidate="ddlType" Text="*" ErrorMessage="Choose the waiver type" Display="None" ValidationGroup="ClientWaiver" />                            
                            </telerik:LayoutColumn>    
                        </Columns>
                        <Columns>
                            <telerik:LayoutColumn Span="2">
                                Date:
                            </telerik:LayoutColumn>
                            <telerik:LayoutColumn Span="4">
                                <asp:TextBox runat="server" ID="txtDate" CssClass="req" MaxLength="25" Width="100%" TabIndex="5" onblur="javascript:formatDate(this);" />
                                <asp:RangeValidator runat="server" ID="rngDate" ControlToValidate="txtDate" Text="*" ErrorMessage="Enter valid Date" Type="Date" MinimumValue="1900/01/01" MaximumValue="9999/12/31" Display="None" ValidationGroup="ClientWaiver" />
                                <asp:RequiredFieldValidator runat="server" ID="reqDate" ControlToValidate="txtDate" Display="None" Text="*" ErrorMessage="Enter date the waiver was completed" ValidationGroup="ClientWaiver" />
                                <ajaxToolkit:CalendarExtender ID="calDate" runat="server" TargetControlID="txtDate" CssClass="calPopup" PopupPosition="TopLeft" />                                                    
                            </telerik:LayoutColumn>    
                        </Columns>
                    </telerik:LayoutRow>                 
                    <telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
                        <Columns>
                            <telerik:LayoutColumn Span="12">
                                <div style="float:right;">
                                    <telerik:RadButton SingleClick="true" SingleClickText="Deleting..." ButtonType="LinkButton" runat="server" ID="btnDelete" CssClass="btnN" Visible="false" Width="90" Text="Delete" OnClick="lnbDelete_Click" ToolTip="Delete Client Waiver" CommandArgument='<%#Eval("ID")%>' OnClientClick="ConfirmDelete" /> 
                                    <telerik:RadButton SingleClick="true" SingleClickText="Saving..." ButtonType="LinkButton" runat="server" ID="btnSave" CssClass="btnY" Width="90" ToolTip="Save" Text="Save" OnClick="btnSave_Click" TabIndex="6" ValidationGroup="ClientWaiver" CommandArgument="0" />
                                </div>
                            </telerik:LayoutColumn>
                        </Columns>
                    </telerik:LayoutRow>
                </Rows>
            </telerik:LayoutRow>
        </telerik:RadPageLayout>                      
               
    </asp:Content>

     

    Opening Code:

    lnkWaiver.Attributes.Add("onclick", "openRadWindow('" + Constants.DIALOG_WAIVER + "?client=" + c.ID.ToString() + "'); return false;");

     

    Both of these are in the EXACT same main page. 

  17. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 06 Jul Link to this post

    Hi Stephanie,

    Please do review my previous responses for insights on how to setup dimensions in RadWindow.

    The first step would be to fix the dimensions calculations in the openRadWindow function. I am attaching a small sample with comments I built that works fine for me without those calculations that break the dimensions. I suggest you use it as base for your further development.

    Once again, do NOT mix AutoSize with responsive design in the content page. They contradict each other. If something works as you want it in such a case, that would be a fluke.

    Regards,

    Marin Bratanov
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  18. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 06 Jul in reply to Marin Bratanov Link to this post

    Okay, so if you cannot mix AutoSize and Responsive, how do you get a popup that shows in the correct size based on the device and screen size?
  19. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 07 Jul Link to this post

    Hello Stephanie,

    The developer must define the size of the RadWindow in such cases, which brings us back to the start of this thread. My advise is to review the function that calculates the desired dimensions and ensure it works properly. If you set proper dimensions according to the viewport, you will still be able to use responsive CSS in the content.

    The other option is to simply maximize the RadWindow so it takes all the available viewport if the viewport is smaller than a certain threshold. This will let you use responsive layout CSS in the content easily.

    If you want to use AutoSizing, you must define static dimensions in the content and you cannot use responsive CSS in it. Also, in such a scenario the RadWindow will respond to the content, not to the viewport size (even though it will not go out of the viewport).

    I hope this explains the situation.

    Regards,

    Marin Bratanov
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  20. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 07 Jul in reply to Marin Bratanov Link to this post

    I guess we can not accomplish what we want to then. Thanks anyway.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017