Conflict between GridViewScroll and Loading image in ASP.NET WebForms


I currently develop in c# , html5 , javascript , css .

I'm honestly not very good at javascript and I try to resolve issues by researching.

Well, I have an aspx page, which shows a grid, but this grid has frozen the first column and the first row. all this works perfectly well, the example takes it from:

This is the script that I use in my project link

On the other hand, I wanted to implement a loading image which works but interrupts the grid, breaks it, appears without the freeze and out of frame. I have tried many ways, in which I concluded that these two gentlemen generate a conflict, this is a jquery which helps me in the loading image .


There is some way in which you can help me, maybe selecting the right and necessary javascript to load the loading image , the example of loading image take it from here:


asked by N'oel C'alero 28.01.2016 в 17:00

3 answers


The problem is that you are using jquery together with events, that combination never got along. If the idea is to use events, it could help you with the ajax toolkit controls, such as UpdateProgress

[How Do I:] Use the ASP.NET AJAX UpdateProgress Control?

I must tell you that jquery and with their events do not get along, you should evaluate avoid using events and perform operations using ajax, if you use jquery you could implement $.ajax to invoke some webmethod defined in aspx


answered by 28.01.2016 / 17:18

I've done a little test (I was intrigued by the GridViewScroll library because I did not know it) and it worked for me correctly.

I think the problem is not in an incompatibility between GridViewScroll and the loading image. It may be the latter that causes problems with your design.

Here I leave a fragment of my code (you have it complete in this GitHub Gist)

<asp:GridView ID="GridView1" runat="server"></asp:GridView>
<div class="loading" align="center">
    Loading. Please wait.<br /><br />
    <img src="Content/Images/loader.gif" alt="" />
<script type="text/javascript" src=""></script> 
<script type="text/javascript" src=""></script> 
<script type="text/javascript" src=""></script> 
<script type="text/javascript"> 
    $(document).ready(function () { 

        $('form').live("submit", function () {
    function gridviewScroll() { 
            width: 400, 
            height: 200, 
            freezesize: 1 
    function ShowProgress() {
        setTimeout(function () {
            var modal = $('<div />');
            var loading = $(".loading");
            var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
            var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
            loading.css({ top: top, left: left });
        }, 200);
answered by 29.01.2016 в 21:06

The first thing I recommend is that you check if a javascript error is being generated, in which case it would be good if you would place it here in order to better identify the case.

On the other hand, I recommend you an excellent jQuery library that I have used in several projects to show a "loading" while doing processes on a page: link in the examples you can see that you can put the loading at the level of the whole page or at the level of an element according to your needs.


answered by 28.01.2016 в 17:15