Modal view fails to open and close

[ruchin]

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

 

 

[Tsvetina]

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

 

 

[ruchin]

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.