1

I am getting "Not enough storage is available to complete this operation." error while trying to add data (20K records) in jqGrid. This issue is occurring in IE 9.

enter image description here

enter image description here

Code:

//This line adds 20k records to the jqgrid

    $.when(GetDataBySelectedCode())
           .done(function (ResultData) {
                  if (ResultData!= null) {//able to get result here
                      BindDataInGridNoLimit(ResultData);
                    } 

      }).fail(function (xhr, textStatus, errorThrown) {                
         if (textStatus != 'abort') {
        //todo: error message               
     }
  });

function BindDataInGridNoLimit(data)
{
   DataGrid[0].addJSONData(data);//fails while adding data
}

Call Stack

enter image description here

Environment:

  • ASP.NET Web Forms, Visual Studio 2012, jqGrid 4.6.0, IE 9, jquery 1.11.1
  • In jqGrid, I have not enabled paging as it is the requirement from end users.

Observations:

a) The same code with 20K records works fine in Chrome. b) The same code with few hundreds of records works fine in IE 9.

Question:

Is this issue related to jqgrid and IE 9 combination? How to fix this issue?

Any suggestions / solutions are appreciated.

JGV
  • 5,037
  • 9
  • 50
  • 94
  • Which line of **jqGrid** (`jquery.jqgrid.src.js`) code is on the stack which produces the error (click on "Call stack" on the right part of IE debugger)? The picture shows only the error inside of jQuery 1.11.1, but it's unclear where the code will be called. Could you try to replace temporary the URL of `ui.jqgrid.css`, `grid.locale-en.js` and `jquery.jqGrid.src.js` to the URL of [free jqGrid 4.9](https://github.com/free-jqgrid/jqGrid/blob/master/README.md) and try whether the error take place? It seems to me that the problem because one old bug which is fixed already. – Oleg Jun 15 '15 at 19:05
  • Sure, let me try your suggestion. – JGV Jun 15 '15 at 19:12
  • @Oleg, updated question with call stack information. – JGV Jun 15 '15 at 19:22
  • You need to click on "Call stack" window to the method which is from jqGrid (probably `addJSONData`) and you will see the line of the code which will be executed. – Oleg Jun 15 '15 at 19:26
  • @Oleg, updated call stack. Did I capture the necessary information? – JGV Jun 15 '15 at 19:36
  • Sorry, but I asked you to use `jquery.jqgrid.src.js` instead of `jquery.jqgrid.min.js`. In any way I have absolutely another suggestion in my answer. I have to go away, but tomorrow we can continue discussion if you have questions about my answer. – Oleg Jun 15 '15 at 19:43
  • Sure, I will post my observations in the question. – JGV Jun 15 '15 at 19:59
  • My main suggestion would be to change your code and **don't use** `addJSONData` at all. Instead of that you can use `datatype: "jsonstring", datastr: data` and use `rowNum` parameter with is not so large. You will add the data (all 20K) to the grid, but only **one page (`rowNum`)** will be displayed**. The method `addJSONData` will be called internally with `rowNum` rows of data. It will fix the problem and improve performance of the grid in all web browsers. – Oleg Jun 16 '15 at 05:21
  • @Oleg, thanks for the suggestion. I will try that tomorrow morning. – JGV Jun 16 '15 at 07:45
  • 1
    The standard display can show only 25-30 rows of data. So to display 10 pages at once it's enough to use `rowNum: 300, datatype: "jsonstring", datastr: data`. The user can scroll over 300 rows (about 10 pages) using the scroll bar. To see more data the user will have to use pager buttons. One can consider to use `toppager: true` to display the second (or the only) pager on top of the grid. The DOM of grid will hold only 300 rows and the loading, scrolling, hovering, selection of rows and so on will be really quickly. I hope you use `gridview: true` option. You can post the code which you use. – Oleg Jun 16 '15 at 08:27
  • 1
    You should don't forget to use the trick which I used in [the demo](http://www.ok-soft-gmbh.com/jqGrid/performane-90000_20.htm): setting `data` or `datastr` **later** inside of `onInitGrid` only. **It improves the performance of creating the grid essentially**, like shows the demo. See [the answer](http://stackoverflow.com/a/25532422/315935) for more details. If you use jqGrid in version higher as 4.6, like free jqGrid 4.9 for example, you don't need to use the trick because jqGrid do all required steps internally. – Oleg Jun 16 '15 at 08:30
  • @Oleg, I've decided to go with displaying limited records and not all the 20K records all at once. I will include your suggestions in the code. – JGV Jun 16 '15 at 22:34

1 Answers1

1

It seems to me that you try to add a lot of data without local paging. It have not real sense, it's slow and the user will do have to scroll below to see the data. It's much more effective to use small rowNum value, which specify the size of the page and use datatype: "local" or loadonce:true or datatype: "jsonstring". The user will need to click on the "next page" button to see the next portion of data. It's a small disadvantage, but scrolling the grid rows using the scroll bar take time too. The main advantage which one will have: the data will be saved locally as pure JavaScript data. You will have no problem with DOM size (no such error). The most important advantage which you get: much better performance. I suspect that the user will see the first page of data practically immediately, hovering on the rows will be quickly and scrolling of data will be quickly too.

I recommend you to open tree demos which all loads 90000 rows of data in jqGrid. The first demo display 25 rows and you can easy scroll over 4500 pages of data. The second grid displays 1000 from 90000 rows and the user can scroll down to see the 1000 rows and the user can use local paging to go over the 90 pages (1000 rows per page). If you would try to open the last demo which try to display all 90000 rows at once you will wait long time and get probably an error message at the end.

It's clear for me that my suggestion means changing of the code and changing of the user interface. On the other side it should be clear for all that filling thousand of rows in the grid have not much sense. Nobody will scroll and read all the data. 2-5 pages of the data will be absolutely enough. The grid should just have filter toolbar, so that the user could filler the data and to display small subset of the data are really interesting him.

Oleg
  • 220,925
  • 34
  • 403
  • 798