Delay in closing window and no loading panel shows either

[Shuja]

Hi,

I am using a partial view to open as a pop-up editor window from my Index view.
I have custom edit & submit buttons in this window.
I use the $(".k-grid-update").trigger('click'); code to update and close the window after the custom code has completed but there is a substantial delay before closing the window and no activity or loading panel appears to show the form is being processed. It simply hangs for a couple of seconds and then completes the process by closing.
I've tried to force a custom 'Busy Indicator' once the form has been submitted but even this appears and disappears yet the window still remains open and closes after a delay.

My code for the custom button is below.
 
can you please let me know why there is such a long delay (2-3 seconds delay before closing)?
If this is normal then is there any way to show an indicator so the user knows the form is being processed and the window will be closed. So the users does not attempt to re-submit their form?

Regards,

Shuja

!function ($) {
    $.extend($.fn, {
        busyIndicator: function (c) {
            b = $(this);
            var d = b.find(".k-loading-mask");
            c ? d.length || (d = $("<div class='k-loading-mask'><span class='k-loading-text'>Loading...</span><div class='k-loading-image'/><div class='k-loading-color'/></div>").width(b.outerWidth()).height(b.outerHeight()).prependTo(b)) : d && d.remove()
        }
    });
}(jQuery);


function ApprovalSubmit() {
    var r = confirm("Are you sure you want to submit your approval selection?");
    if (r == false) {
        alert('Form NOT submitted');
        return;
    }

    ErrorMsgClear();

    var qiaComments = $('#QiaStatusComments').val();
    var mainDiv = $("#MainDiv").closest("div.k-window");

    mainDiv.busyIndicator(true); // show

    if (qiaComments == '') {
        mainDiv.busyIndicator(false); // hide
        ErrorMsg('Please complete the \'Approver Comments\' before submitting!');
        /*mainDiv.data("kendoWindow").close();
        win.kendoWindow({
            refresh: function () { this.center(); }
        }).data("kendoWindow")*/
        return;
    }

    var qiaId = $('#Id').val();
    var qiaControl = $('#Id');
    /*var dropdownlist = $("#cmbApprovalSelection");

    var dataItem = $('#cmbApprovalSelection option:selected').val();*/
    var dataItem = $("#cmbApprovalSelection");

        /*$('#cmbApprovalSelection').val();*/
    var approvalSelection = dataItem.val();
    /*alert(approvalSelection + '-' + dataItem.dataTextField + '-' + dataItem.dataValueField + '-' + dataItem.val());*/

    if (approvalSelection == null || approvalSelection == '') {
        mainDiv.busyIndicator(false); // hide
        ErrorMsg('Please select approval value from drop down list below!');
        /*mainDiv.data("kendoWindow").close();
        mainDiv.kendoWindow({

            visible: false

        }).data("kendoWindow").center().open();*/
        return;
    }
    else {
        $('#btnApproverSelection').hide();

        $.ajax({
            type: "POST",
            async: true,
            contentType: "application/json;charset=utf-8",
            url: "@Url.Action("ApproverSelection", "Home")",
            data: '{ "id":' + qiaId + ', "approverSelection":"' + approvalSelection + '", "comments":"' + qiaComments + '" }',
            dataType: "json",
            success: function (data) {
                if (data.Success == true) {

                    ErrorMsg2(data.Message);
                    $('#btnApproverSelection').hide();
                    /* close form by calling kendo grid update */
                    $(".k-grid-update").trigger('click');
                    /*qiaControl.closest(".k-window-content").data("kendoWindow").close();*/
                    $('#Grid1').data('kendoGrid').dataSource.read();
                    $('#Grid2').data('kendoGrid').dataSource.read();
                    mainDiv.busyIndicator(false); // hide
                }
                else {
                    ErrorMsg(data.Message);
                    mainDiv.busyIndicator(false); // hide
                }

            },
            error: function () {
                ErrorMsg('An error has occurred.\n' + data.Error + '\n' + data.Message);
                mainDiv.busyIndicator(false); // hide
                /*$('#btnApproverSelection').show();*/

            }
        });
        /*mainDiv.busyIndicator(false); // hide*/

    }
}

[Dimo]

Hi Shuja,

Judging by what you said, the delay occurs after the AJAX request's success handler is executed, but there is no information what happens at that point. Have you tried debugging?

In case your research does not reveal anything and you need further assistance, please provide a standalone runnable example.

On a side note, you can now use kendo.ui.progress() instead of hard-coding the Kendo UI animated loading template and adding it to the DOM manually.

http://docs.kendoui.com/api/web/ui#methods-progress

Regards,
Dimo
Telerik