0

I am getting one issue when i am trying to load about 10000 records of data into JQGrid using JSON as datasource.

Browser got freeze or not responded for about 5 min at that point. My customized loader is also hanging with browser and progress of the page is not shown.

It is ok if the rendering of the JQgrid is taking time, but I want to atleast show my loader spinning for the progress.

Tried all these ways to make loader spin.. But nothing is working.

Can anyone help me to show loader when Jqgrid is being rendered.

loadui : "disable",
        loadtext: "Loading...",
        beforeRequest : function () {
                $("#testGrid").block();

                $('.loading').show();

                $("#testGrid").closest(".ui-jqgrid").find('.loading').show();

            $(".loading").css("display", "block");

            $(this).block({
                message: '<img src="/images/loader.gif" />',
            });            },

Thanks,

Sandy
  • 313
  • 1
  • 8
  • 23
  • Which version of jqGrid and from which fork ([free jqGrid](https://github.com/free-jqgrid/jqGrid), [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334) or an old jqGrid in version <=4.7) you use? Where is your code? Which page size (`rowNum`) you use? Do you have `loadComplete` or `gridComplete` callback (it's frequently the bottleneck)? How many columns have the grid? ... Pure processing of data in jqGrid should be so quickly like on [the demo](http://www.ok-soft-gmbh.com/jqGrid/OK/performane-13-40000-20-free-jqgrid.htm) (13 columns, 40000 rows, 20 rows in a page). – Oleg Mar 15 '16 at 17:15
  • @Oleg gridComplete is taking horrible amount of time to render the rows as we have lot of design validations for each row.I have 20 columns and 10,000 records . – Sandy Mar 15 '16 at 17:17
  • @Oleg I am not using pagination king of thing all the data have to be processed in single shot. or is there any way to show loader in ggridcomplete event ? – Sandy Mar 15 '16 at 17:18
  • One should never do something in the loop for every row inside of `loadComplete` and `gridComplete`. One should never modify the grid inside of `loadComplete` and `gridComplete`. One should use `rowattr`, `cellattr` and custom formatters to generate the content which you need *directly*. One should always use local paging of data. I recommend to set `rowNum` to 10-25. It should be not more as the number of rows could be displayed on the monitor. If you would follow the rules you will get good performance of jqGrid. *Could you include the code which you use (`loadComplete` and `gridComplete`)?* – Oleg Mar 15 '16 at 17:25
  • @Oleg this is the code I am actually using in gridcomplete.. – Sandy Mar 15 '16 at 17:33
  • Could you append the text of your question with code the code (just click "edit" link below your question). One can't read the code in unformatted form in comments. I still don't know **which version of jqGrid and from which fork of jqGrid you use (and can use)**. – Oleg Mar 15 '16 at 17:36
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/106410/discussion-between-sandy-and-oleg). – Sandy Mar 16 '16 at 00:41

1 Answers1

1

I recommend you to do the following:

  1. use local paging of data: just use rowNum: 20 for example and height: "auto"
  2. one should never ever modify the data of the grid in the loop inside of loadComplete or gridComplete. Instead of that one should use rowattr to set CSS style (assign classes) of rows (see the answer) and cellattr to set CSS style (assign classes) of cells of some column (see the answer) for the code example.
  3. upgrade to the latest version of free jqGrid (it's 4.13.1 now)

If you fill more rows on the page as the user can see then you just force to do unneeded work. It makes the page slowly. If you modify one element of the page with 10000 elements then web browser have to recalculate the style and the position of all other 9999 elements. If you make such modification in the loop, then you make you page very very slow.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798