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

asp.net, gridview, javascript, jquery, vb.net

Solution

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.

Problem

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 ```

Original source

Related problems