Delay in closing window and no loading panel shows either

2 posts, 0 answers
  1. Shuja
    Shuja avatar
    30 posts
    Member since:
    Mar 2011

    Posted 21 Jan 2014 Link to this post


    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?



    !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()
    function ApprovalSubmit() {
        var r = confirm("Are you sure you want to submit your approval selection?");
        if (r == false) {
            alert('Form NOT submitted');
        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!');
                refresh: function () {; }
        var qiaId = $('#Id').val();
        var qiaControl = $('#Id');
        /*var dropdownlist = $("#cmbApprovalSelection");
        var dataItem = $('#cmbApprovalSelection option:selected').val();*/
        var dataItem = $("#cmbApprovalSelection");
        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!');
                visible: false
        else {
                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) {
                        /* close form by calling kendo grid update */
                        mainDiv.busyIndicator(false); // hide
                    else {
                        mainDiv.busyIndicator(false); // hide
                error: function () {
                    ErrorMsg('An error has occurred.\n' + data.Error + '\n' + data.Message);
                    mainDiv.busyIndicator(false); // hide
            /*mainDiv.busyIndicator(false); // hide*/
  2. Dimo
    Dimo avatar
    8407 posts

    Posted 23 Jan 2014 Link to this post

    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.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top