This is a migrated thread and some comments may be shown as answers.

Delay in closing window and no loading panel shows either

1 Answer 96 Views
Window
This is a migrated thread and some comments may be shown as answers.
Shuja
Top achievements
Rank 1
Shuja asked on 21 Jan 2014, 10:32 AM
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*/
 
    }
}

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 23 Jan 2014, 07:04 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Window
Asked by
Shuja
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or