Add a "loading" indicator in a MVC webgrid?

Question

I am using MVC3 and displaying my data in a webgrid. I would like to display loading indicator (loading image) displayed when I filter/search. What is the best approach?

My search filter (code):

@using (Html.BeginForm())
{
     <fieldset  id="fieldset1" class="coolfieldset">

        <legend>Search for Towers Watson Subscribers/Contacts</legend>
        <div class="div-table">
        <div class="div-table-row">
            <div class="div-table-col">Reg Date:</div>
            <div class="div-table-col"><input id="regDateFrom" class="datepicker" name="regDateFrom" value="@regDateFrom" type="text" /> to <input id="regDateEnd" class="datepicker" value="@regDateEnd" name="regDateEnd" type="text" /></div>
        </div>
        <div class="div-table-row">
            <div class="div-table-col">Profile Mod Date:</div>
            <div class="div-table-col"><input type="text" id="profileModDateFrom" class="datepicker" value="@profileModDateFrom"  name="profileModDateFrom" /> to <input id="profileModDateEnd" class="datepicker" value="@profileModDateEnd" name="profileModDateEnd" type="text" /></div>
        </div>
        <div class="div-table-row">
            <div class="div-table-col">Last Name:</div>
            <div class="div-table-col"><input type="text" id="lastName" name="lastName" value="@lastName" /></div>
        </div>
          <div class="div-table-row">
            <div class="div-table-col"><input id="search" name="search" type="submit" value="Search" /></div>
            <div class="div-table-col"></div>
        </div>
        </div>      
    </fieldset>
}
{@Html.Partial("List_Ajax", Model)}

Ryan Amies · Accepted Answer · 2011-11-28 14:24:32Z

6

http://www.ajaxload.info/ lets you create a nice loading gif. Create an image, and place it in a div as below. Then bind the search button with jQuery to display the hidden div when clicked.

Place the following div where you would like the loading icon to appear.

<div id="loadingDiv" style="display:none"><img src="loading.gif"></div>

Then this in your Javascript file

$(document).ready(){
    $('#search').click(function(){
        $('#loadingDiv').show();
    });
});

Then when you're done loading, simply:

function SomeCallBackEvent(){
    $('#loadingDiv').hide();
};

edited Nov 28, 2011 at 14:24

answered Nov 28, 2011 at 14:14

Ryan Amies

4,9421 gold badge25 silver badges36 bronze badges

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

3 Comments

Chaka Over a year ago

Thank you, exactly what I needed!

Rachael Over a year ago

@RyanAmies For us n00bs here, how does one generally know when loading is complete given that items are being added to the grid? Could you provide a simple example to extend this answer? Thank you.

Ryan Amies Over a year ago

It really depends on your code. If you're loading it with jQuery/Ajax then you will have a callback for Complete which you can leverage. If you're stuck I'd suggest posting a new question specific to your situation.

Collectives™ on Stack Overflow

Add a "loading" indicator in a MVC webgrid?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related