Show Ajax Loading Indicator when sorting or paging ASP.net MVC Webgrid

Question

I can easily hookup a webgrid and add ajax to it using the default settings. But one thing I have been struggling to figure out is how to add a loading indicator when the grid is sorting or paging via ajax.

There is a built in callback function which is great to turn off the ajax loading indicator but how can I easily turn one on?

Below is the code I have currently for my webgrid.

@{
    var grid = new WebGrid(rowsPerPage: Model.CountPerPage, ajaxUpdateContainerId: "GridArea");
    grid.Bind(Model.Users,
              autoSortAndPage: false,
              rowCount: Model.TotalCount
            );
    grid.Pager(WebGridPagerModes.All);
}
<div id="GridArea">
    @grid.GetHtml(htmlAttributes: new {id ="UserGrid"},
        columns: new [] {
        grid.Column("ID", canSort: false),
        grid.Column("FirstName"),
        grid.Column("LastName"),
        grid.Column("Email"),
        grid.Column("FullName", canSort: false)
        }
    )
</div>

I've tried using the following but neither of these have worked.

<script>
    $(function () {
        $("#UserGrid").live("ajaxStart", function () {
            alert("start");
        });
    });
</script>

This one works the first time but won't work after the grid does its first ajax refresh.

<script>
    $(function () {
        $('#UserGrid').ajaxStart(function () {
            alert("start");
        });
    });
</script>

Elburr

Answer 1

This should work.

$(document).ajaxStart(function(){
     //Show your progressbar here
}).ajaxStop(function(){
     //Hide your progressbar here
});

Your second approach is not working because after the first ajax response, the DOM is re created and the .ajaxStart event binding is lost. Tied it with the global document object and it will always be there.

Iolenta

How can I accomplish this if I want other ajax driven parts of the page and I need to distinguish the call directly from the Webgrid? – Elburr

You need to rebind the ajax event handler of the webgrid everytime the DOM of the webgrid is replaced by ajax call. So, no matter what you do, you need some global ajax handler where you can rebind all of them. If you want to distinguish the call, you can use hidden fields to keep track of the control that originates the ajax call. – Iolenta

Answer 2

Yes the above answer should help you. Basically there is a Jquery API which will take care of any ajax request made from client to server. So when you do any ajax operation it will call trigger the function. You can put your custom css/images or some function which you can call as indicator on ajax operation.

Horseshoes

How can I accomplish this if I want other ajax driven parts of the page and I need to distinguish the call directly from the Webgrid? – Elburr