Modal view fails to open and close

3 posts, 1 answers
  1. ruchin
    ruchin avatar
    33 posts
    Member since:
    Jun 2015

    Posted 22 Feb Link to this post

    Hi,

    I am making use of a kendo modal view to display various alert messages in my app.The modal fails to open and close in some cases ,not always .It is important to note that the modal opens but is not visible, one has to tap on the screen for the modal to be visible.I dont know what is really causing the modal to behave in such an unusual manner.The problem arises on the device and not on the simulator.

    I have also tried using a timeout to open and close the modal.

    My HTML code is as follows which defined in the index.html :-

         <div data-role="modalview" id="modalview-dialog" data-width="250" data-height="150" style="text-align: center;">
                <div data-role="header" style="border-bottom: #E95B5B 2px solid;height:25px;line-height: 25px;">
                    <b><span id="msgModalHeader"></span></b>
                </div>
                <div data-role="content" id="msgPopUp">
                </div>
                <div data-role="footer" style="background-color: #E95B5B; color: White; width: 100%;height:30px;">
                    <a  type="button" data-role="button" data-align="right" style="width: 45%;height:30px;line-height: 25px;" id="ModelCancel" class="activeBtn">
                    </a><a  type="button" data-role="button" data-align="right" style="width: 45%;height:30px;line-height: 25px;" id="ModelOk" class="activeBtn"></a>
                </div>
            </div>

    The modal view is called on various views using the following :-

    showModalDialog(DelMsgItem, "Delete Tag", "Ok", function (e) { DelAddressOkClicked(e, args); }, "Cancel", CancelAddbtnclicked);

     

    The modal is defined in a separate js file using the following code:-

     

    function showModalDialog(dialogMessage, dialogHeader,okBtnText, okBtnMethod, cancelBtnText, cancelBtnMethod) {
        if (typeof cancelBtnText !== "undefined") {
            debugger;
            $("#ModelCancel").show();
            $('#msgModalHeader').text(dialogHeader);
            $('#msgPopUp').text(dialogMessage);
            $('#ModelOk').text(okBtnText);
            $('#ModelCancel').text(cancelBtnText);
            setTimeout(function () {
         
                $('#modalview-dialog').getKendoMobileModalView().open();
            }, 1000);
            $('#ModelOk').unbind();
            $('#ModelCancel').unbind();

            $("#ModelCancel").bind("click", function () {
                debugger;
                setTimeout(function () {
                 
                    $('#modalview-dialog').getKendoMobileModalView().close();
                }, 200);
       
                cancelBtnMethod();
                
            });
            $("#ModelOk").bind("click", function () {
                debugger;
                 setTimeout(function () {
               
                     $('#modalview-dialog').getKendoMobileModalView().close();
            }, 200);
     
                okBtnMethod();
              
                  });

        }
        else {
            debugger;
            $("#ModelCancel").hide();
             setTimeout(function () {
     
                 $('#modalview-dialog').getKendoMobileModalView().open();
        }, 1000);
            $('#msgModalHeader').text(dialogHeader);
            $('#msgPopUp').text(dialogMessage);
            $('#ModelOk').text(okBtnText);
            $('#ModelOk').unbind();
    $("#ModelOk").bind("click", function () {
    okBtnMethod();
      $('#modalview-dialog').getKendoMobileModalView().close();
             
            });

        }
    }

    Is anything wrong in my code or am I missing something?

    How can I solve this issue????

    Thanks,

    Ruchin Dayal

     

     

  2. Answer
    Tsvetina
    Admin
    Tsvetina avatar
    1876 posts

    Posted 25 Feb Link to this post

    Hi Ruchin,

    Does this issue occur on Android? If so, you can try updating your Cordova version to 4.0 and/or enable Hardware acceleration in Properties -> Android -> General. The problem is most probably related to transitions not working correctly in your project.

    Regards,
    Tsvetina
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  3. ruchin
    ruchin avatar
    33 posts
    Member since:
    Jun 2015

    Posted 29 Feb in reply to Tsvetina Link to this post

    Hi Tsvetina

    Yes I am using android Mi 4i phone.Updating Cordova version to 4.0 and enabling Hardware acceleration does solve my issue.

    It also improves the overall performance of the app.

    Thank you very much .

    Ruchin Dayal.

Back to Top