RadWindow issue on iOS, can't click button

2 posts, 0 answers
  1. Francis
    Francis avatar
    2 posts
    Member since:
    Aug 2015

    Posted 28 Feb Link to this post

    We are having problems with the RadWindow on iPhone. First is if we use RadAsyncUpload on the page the popup window/RadWindow it loses its responsiveness. We use bootstrap, I've attached screenshot of how it looks like. The controls overflows on the right.

    Next is within the Radwindow we have a panel which is visible=false by default and is ajaxified to show when a checkbox is ticked. When those panels are shown, it won’t let you click on the button. Meaning whenever you click on the button the page jumps up and focuses on the other fields above it. And sometimes it wont let you scroll up or down within the RadWindow

    Below is the html code. How can we get around this issue?

    <telerik:RadAjaxLoadingPanel ID="loadingInjured" runat="server"></telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxPanel ID="ajxInjured" runat="server" LoadingPanelID="loadingInjured">
        
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                <div class="form-group">
                    <label>What was damaged?</label>
                    <p>
                        Select equipment that was damaged.
                    </p>
                    <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel2">
                        <telerik:RadComboBox ID="ddEquipment" runat="server" DataSourceID="SqlAssets" DataTextField="OrganisationName" DataValueField="OUID" Width="100%" Filter="Contains">
                            <DefaultItem Text=" - select - " Value="" />
                        </telerik:RadComboBox>
                        <asp:SqlDataSource ID="SqlEquionentInvolved" runat="server" ConnectionString="<%$ ConnectionStrings:SiteSqlServer %>" SelectCommand="SELECT ListID, ItemName FROM [_FFList] WHERE (([TenantID] = @TenantID) AND ItemTypeID = 87) ORDER BY ItemName">
                            <SelectParameters>
                                <asp:SessionParameter DefaultValue="0" Name="TenantID" SessionField="TenantID" Type="Int32" />
                            </SelectParameters>
                        </asp:SqlDataSource>
                        <asp:SqlDataSource ID="SqlAssets" runat="server" ConnectionString="<%$ ConnectionStrings:SiteSqlServer %>" SelectCommandType="StoredProcedure"
                            SelectCommand="_FFLocationSelectAssets">
                            <SelectParameters>
                                <asp:SessionParameter Name="TenantID" SessionField="TenantID" Type="Int32" />
                            </SelectParameters>
                        </asp:SqlDataSource>
                    </telerik:RadAjaxPanel>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                <div class="form-group">
                    <label style="width:100%">&nbsp</label>
                    <p>
                        or input what was damaged.
                    </p>
                    <asp:TextBox ID="txtOtherDamage" runat="server"  Width="100%" CssClass="form-control" placeholder="others"></asp:TextBox>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                <div class="form-group">
                    <label>Property Damage Type</label>
                    <telerik:RadComboBox ID="ddPropertyType" Width="100%" runat="server" required="" MarkFirstMatch="true" AllowCustomText="false" DataSourceID="SqlPropertyDamage" DataTextField="ItemName" DataValueField="ListID">
                        <DefaultItem Text="Select an option..." Value="0" />
                    </telerik:RadComboBox>
                    <asp:SqlDataSource ID="SqlPropertyDamage" runat="server" ConnectionString="<%$ ConnectionStrings:SiteSqlServer %>" SelectCommand="SELECT ListID, ItemName FROM [_FFList] WHERE (([TenantID] = @TenantID) AND ItemTypeID = 124) ORDER BY ItemName">
                        <SelectParameters>
                            <asp:SessionParameter DefaultValue="0" Name="TenantID" SessionField="TenantID" Type="Int32" />
                        </SelectParameters>
                    </asp:SqlDataSource>

                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                <div class="form-group">
                    <label>Cost</label>
                    <asp:TextBox ID="txtCost" runat="server" TextMode="Number" Width="100%" CssClass="form-control"></asp:TextBox>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="form-group">
                    <label>Description</label>
                    <asp:TextBox ID="txtDescription" runat="server" TextMode="MultiLine" Rows="4" Width="100%" CssClass="form-control" MaxLength="500"></asp:TextBox>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="form-group">
                    <asp:CheckBox ID="chkIsInsurance" runat="server" Text="&nbsp;Insurance?" AutoPostBack="true" OnCheckedChanged="chkIsInsurance_OnCheckedChanged" />
                </div>
            </div>
        </div>

        <asp:Panel ID="pnlInsurance" runat="server" Visible="false">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <div class="form-group">
                        <label>Company Insurer Name</label>
                        <asp:TextBox ID="txtInsuranceName" runat="server" Width="100%" CssClass="form-control"></asp:TextBox>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <div class="form-group">
                        <label>Company Insurance Claim Number</label>
                        <asp:TextBox ID="txtInsuranceClaimNumber" runat="server" Width="100%" CssClass="form-control"></asp:TextBox>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <div class="form-group">
                        <label>3rd Party Insurer Name</label>
                        <asp:TextBox ID="txtThirdPartyInsurerName" runat="server" Width="100%" CssClass="form-control"></asp:TextBox>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <div class="form-group">
                        <label>3rd Party Insurance Claim Number</label>
                        <asp:TextBox ID="txtThirdInsurerClaimNumber" runat="server" Width="100%" CssClass="form-control"></asp:TextBox>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <div class="form-group">
                        <asp:CheckBox ID="chkIsRecoverable" runat="server" Text="&nbsp;Recoverable?" AutoPostBack="true" OnCheckedChanged="chkIsRecoverable_OnCheckedChanged"/>
                    </div>
                </div>
                <asp:Panel ID="pnlRecoverableAmount" runat="server" Visible="false">
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <div class="form-group">
                            <label>Recoverable Amount</label>
                            <asp:TextBox ID="txtRecoverableAmount" runat="server" TextMode="Number" Width="100%" CssClass="form-control"></asp:TextBox>
                        </div>
                    </div>
                </asp:Panel>
            </div>
        </asp:Panel>


        <div class="row">
            <hr />
            <div id="pnlDropZone">
            <asp:Panel ID="pnlFiles" runat="server">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <div class="form-group">
                        <label>Files</label>
                        <div class="dropzone" onclick="OpenUploadDialogPopup();">                                    
                            <div class="dz-default dz-message" style="margin: 2em 0;text-align:center;">
                                <span>
                                    <strong>Drop files here or click to upload. </strong>
                                </span>
                            </div>
                        </div>
                        <telerik:RadAsyncUpload ID="uplFiles" runat="server" MultipleFileSelection="Automatic" DropZones=".dropzone" HideFileInput="true" CssClass="radasyncAttachment"></telerik:RadAsyncUpload>
                    </div>
                </div>
            </asp:Panel>
                </div>

            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" id="simpleUpload" style="display:none;">
                <div class="form-group">
                    <label>Files</label>
                    <telerik:RadAsyncUpload ID="btnUploadSimple" runat="server" MultipleFileSelection="Automatic"></telerik:RadAsyncUpload>
                </div>
            </div>

            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <uc1:uFiles runat="server" ID="uFiles" />
            </div>
        </div>


        <asp:Panel runat="server" ID="pnlError" Visible="false">
            <div class="alert alert-danger">
                <button aria-hidden="true" data-dismiss="alert" class="close" type="button">&#215</button>
                <asp:Literal ID="lblError" runat="server"></asp:Literal>
            </div>
        </asp:Panel>
        <div class="row" id="pnlSave">
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6">
                <asp:Button ID="btnSave" runat="server" Text="Save" CssClass="btn btn-success btn-block" OnClick="btnSave_Click"/>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6">
                <asp:Button ID="btnCancel" runat="server" Text="Cancel" CssClass="btn btn-default btn-block" OnClick="btnCancel_Click"/>
            </div>
        </div>
        <div class="row"><!-- need the spaces below for ios safari, the panel disapears when no spaces below not sure why -->
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                &nbsp;
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                &nbsp;
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                &nbsp;
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                &nbsp;
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                &nbsp;
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                &nbsp;
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                &nbsp;
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                &nbsp;
            </div>
        </div>
            
    </telerik:RadAjaxPanel>

    to open the radwindow, we use this code to resize the window, so it will be responsive:

        function SetWindowWidth() {
            var winWidth = $(window).width();
            if (winWidth < 900) {
                console.log("Window width: " + $(window).width());
                var radWindowId = '<%=RadWindowAddPropertyDamage.ClientID%>';
                $find(radWindowId).set_maxWidth(winWidth - 50);
            }

        $find(radWindowId).show();
        }

     

     

     

     

  2. Eric R
    Admin
    Eric R avatar
    47 posts

    Posted 05 Mar Link to this post

    Hi Francis,

    Thank you for providing the markup for your page. There are a couple of items that could be causing this issue and they are below.


    First Item

    The client-side code for displaying your RadWindow explicitly sets the width and as a result constrains the responsiveness. Try removing the explicit size and use the maximize method as show in the below code sample. Please review the RadWindow Responsive, Adaptive and Elastic Capabilities for more information.

    function DeviceCheck()
    {
        // checks if touch-enabled device and if width is less than 900
        return Telerik.Web.BroserFeatures.touchEvents && $telerik.$(window).width() < 900;
    }
     
    function OnClientShow(sender,args) {
        if(DeviceCheck()){
            /*  sets up behaviors and
                leaves only the close button
            */
            sender.set_behaviors(Telerik.Web.UI.WindowBehaviors.Close);
            sender.set_visibileStatusBar(false);
     
            // maximize so it takes up the entire viewport and reacts to size changes
            sender.maximize();
        }
    }


    Second Item

    The meta viewport tag in the head section of the page. I am sure this is already known but libraries like Bootstrap have built-in support for mobile responsiveness. By ensuring this tag is present should help this. 

    <meta name="viewport" content="width=device-width,initial-scale=1">


    I hope this helps and please post a reply if you have any additional questions. Thank  you for using the Telerik Forums.


    Regards,

    Eric
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top