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>

Tariqulazam · Accepted Answer · 2019-10-23 20:43:41Z

9

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.

edited Oct 23, 2019 at 20:43

answered Oct 22, 2012 at 3:09

Tariqulazam

4,5831 gold badge38 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rob Carroll Over a year ago

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?

Tariqulazam Over a year ago

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.

Sandeep Sachan · Accepted Answer · 2012-10-22 04:26:49Z

1

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.

answered Oct 22, 2012 at 4:26

Sandeep Sachan

111 bronze badge

1 Comment

Rob Carroll Over a year ago

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?

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related