How to display a loading image until a gridview is fully loaded without Ajax Toolkit?

Question

QUESTION

Can anyone suggest how a loading image can be displayed until a gridview is fully loaded?

This gridview is to be rendered on page

Answer 1

I would implement this by using a web api controller that returns the appropriate data and then simply try to load the data on document.ready with jquery. Something along the lines of this (Will be posting the answer in c# but it should be simple enough to translate):

 public class TableDataController : ApiController
  {
     public IEnumerable Get()
     {
        var tableData = GetTableDataFromSomewhere();

        return tableData;
     }
  }

To learn more about how to setup a WebApiController in a web forms project, please refer to this article.

I would implement the HTML something like this:

And the jquery to load the data and present it in the table would look something like this:

To tidy the string concatenation of the jQuery up a bit you could use a template like handlebars, but it's not strictly necessary.