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 load. There must be a simple solution to detect when gridview is loading/loaded so a simple toggle between load image and gridview visibility can be achieved.

Please do not suggest using any of the Ajax toolkit methods unless the desired code can be isolated and used standalone. I have found the toolkit to be easy on implementation but bloated and slow on performance. I do not wish to include any scripts, files or code in my release package that is not going to be used.

ASP.NET

      <img src="~/Loading.gif"></img>

      <asp:GridView ID="gv" runat="Server" AutoGenerateColumns="False" EnableModelValidation="False">
        'content...
      </asp:GridView>

VB

  Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    'connection info

    If Not IsPostBack Then
      Me.Bindgv()
    End If
  End Sub


  Private Sub Bindgv()
    'Load gridview
  End Sub

---

POSSIBILITIES

I am open to any suggestions however I was attemting to implement a solution using jquery page methods but need assistance to follow through.

JAVASCRIPT

$(function() {
  $.ajax({
    type: "POST",
    url: "Default.aspx/UpdateGV",
    data: "{}",
    contentType: "application/json",
    dataType: "json",
    success: function() {
      // Run return method.
    }
  });
});

VB.NET

Imports System.Web.Services

Public Partial Class _Default
    Inherits System.Web.UI.Page

    <WebMethod(EnableSession := False)> _
    Public Shared Function UpdateGV() As String
         Return 
         Me.Bindgv()
    End Function
End Class

Answer 1

You can achieve this using jquery, there is a jquery block UI project on github and you could just use that one to block the grid view without using ajax.

here is the code you will need to do this, and it' tested and works fine like below:

Step 1 add these two lines in your page head

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="http://malsup.github.io/jquery.blockUI.js"></script>

Step 2 an extension jquery after the codes above:

<script type="text/javascript">
    $(document).ready(function () {
        $('#Button1').click(function () {
            $('.blockMe').block({
                message: 'Please wait...<br /><img src="Images/loadingBar.gif" />',
                css: { padding: '10px' }
            });
        });
    });
</script>

Step 3 in my case I bind my grid view using a button , but you could always use any other controls as well:

<asp:Button ID="Button1" runat="server" Text="Bind Grid View" 
            ClientIDMode="Static" OnClick="Button1_Click" />
    <div class="blockMe">
        <asp:GridView ID="GridView1" runat="server" Width="100%">
        </asp:GridView>
    </div>

Step 4 bind the grid view on button clicked

    protected void Button1_Click(object sender, EventArgs e)
    {
        DataTable tblCourse = myAccount.GetEnroledCourse("arpl4113");

        //Bind courses
        GridView1.DataSource = tblCourse;
        GridView1.DataBind();
    }

and that's it, NO AJAX Toolkit (only jQuery) so the result will be look like this:

---

A trick to do the above solution at the page load

First of all this is NOT a function on Page_Load event on server side but on the client side ;-)

So to achieve this you need to have a hidden control to keep a value on page view-state and also make the same button hidden to trigger it on page load. and a little changes on the extension jQuery above. Done!

Step 1. Add the css below to your page header:

 <style> .hidden { display: none; } </style>

Step 2. Add a hidden field plus make your button hidden like this:

    <asp:HiddenField ID="hidTrigger" runat="server" ClientIDMode="Static" Value="" />
    <asp:Button ID="btnHidden" runat="server" ClientIDMode="Static" 
                OnClick="btnHidden_Click" CssClass="hidden" />
    <div class="blockMe">
        <asp:GridView ID="GridView1" runat="server"></asp:GridView>
    </div>

Step 3. Make this changes on your extension script like below:

  <script type="text/javascript">
    $(document).ready(function () {

        //check whether the gridview has loaded
        if ($("#hidTrigger").val() != "fired") {

            //set the hidden field as fired to prevent multiple loading
            $("#hidTrigger").val("fired");

            //block the gridview area
            $('.blockMe').block({
                message: 'Please wait...<br /><img src="Images/loadingBar.gif" />',
                css: { padding: '10px' }
            });

            //fire the hidden button trigger
            $('#btnHidden').click();
        }
    });
</script>

That's it! and your button click on the code behind remains the same as before, in this example I only change the name of the button. no code on Page_Load event though.

    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void btnHidden_Click(object sender, EventArgs e)
    {
        DataTable tblCourse = myAccount.GetEnroledCourse("arpl4113");

        //Bind courses
        GridView1.DataSource = tblCourse;
        GridView1.DataBind();
    }

I hope it helps you.

Answer 2

As you are not willing to use the ASP.NET Update panel which is designed to handle the kind of requirement you have. Using jquery AJAX and using the web method to update the Grid will not work as you expect because you need to update the viewstate and other information. One of the solution that you can apply is showing the modal dialog box till your page is completed loaded its html which includes your Grid data.

              <script type = "javascript/text">
              $(document).ready(function() { // show modal dialog });
              $(window).load(function() {// hide the dialog box});
              </script>