POSSIBILITIES

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.