How to show wait cursor over grid

[Richard]

I have a 3 level hierarchical Kendo grid with command columns that invoke long-running JavaScript Ajax functions that invoke Controller methods which in turn act on database tables.  I'm trying to show a wait cursor so the user has a visual cue that the system is busy and is waiting for a response from the server.  Kendo grid CSS seems to be overriding my attempt to show and clear the wait cursor.  How can I make this work properly?

My Javascript method is shown below:

function onClickPostBatch(e) {
    var dataItem = this.dataItem($(e.target).closest("tr"));
    //document.body.style.cursor = "wait";
    $("html").css("cursor", "wait");
     $.post('@Url.Action("PostBatch", "Home")', {
         batchId: dataItem.BatchID
     }, function (data) {
         if (data.error) {
           alert('' + data.message);
       } else {
            alert(data.message);
            location.reload();
        }
     });
    //document.body.style.cursor = "default";
    $("html").css("cursor", "default");
 }

Thanks!

Rich

[Kiril Nikolov]

Hi Richard,

You can use the built-in Kendo UI Progress indicator for your grid. Please check the following example and let me know if it helps:

http://trykendoui.telerik.com/@Kiril/ozuv

Regards,
Kiril Nikolov
Telerik

 

 

[Richard]

Thanks!  That did the trick!

[Kiril Nikolov]

Hello Richard,

I am glad that the proposed solution helped.

In case you have any further questions, please do not hesitate to contact us.

Regards,
Kiril Nikolov
Telerik