jqGrid: Load JSON data after local data already in table

Question

I have a very specific problem: I have a small form with four options. You may fill them out or not, and when you click 'Ok', I load a jqGrid with data depending on those options. But since I do not know what my columns look like, I let my servlet generate the column model and column name; thus I have to make an AJAX request to load the data and then fill it in jqGrid as "local" data. I would like to use pagination though.

Thus my question: How may I load more data into a jqGrid after it is already established through local data?

here's the code:

$.ajax({
    type : 'GET',
    url : 'data.jsp',
    data : reqData,
    dataType : 'json',
    error: function() {
        $("#dialog-message").dialog("open");
        $("#ajax-loader").css("display", "none");
    },
    success : function(result) {
        jQuery("#results").jqGrid({
            data : result.rows,
            datatype : "local",
            colNames : result.columnNames,
            colModel : result.columnModel,
            pager : $('#pager'),
            rowNum : 1000,
            scroll : true,
            viewrecords : true,
            sortname : 'TITEL',
            width : window.innerWidth - 30,
            height : window.innerHeight - 190,
            altRows : true,
            loadError: function() {
                $("#dialog-message").dialog("open");
                $("#ajax-loader").css("display", "none");
            },
            loadComplete: function() {
                $("#ajax-loader").css("display", "none");
            }
        }).jqGrid("navGrid", "#pager", {
            edit: false,
            add: false,
            del: false,
            search: true,
            refresh: false
        }).jqGrid("gridResize");

    }
});

/edit: I've tried to do the following, but that still doesn't solve the problem that the grid doesn't know how many total pages there actually are (actually, at that point, I don't even know), and also, after loading, it thinks it only gets local data. Is there maybe an onScroll event or something? I haven't found one.

datatype : !json ? "local" : function(postdata) {
                $.ajax({
                    type: 'GET',
                    url: 'data.jsp',
                    data: $.merge(postdata, reqData),
                    dataType: 'json',
                    success: function(data, status, jqXHR) {
                        var mygrid = jQuery("#results")[0];
                        var myjsongrid = eval("("+jqXHR.responseText+")");
                        mygrid.addJSONData(myjsongrid); 
                    }
                });
            },

Do you load **all** data in one Ajax request or you need to append the data to existing grid? Is it not better to remove `scroll: true` option and use standard paging? If you add `gridview: true` you will be able quickly create grid with many rows of data at once. If you would set additionally `rowNum` to the value which more corresponds the height of the page which you need to have the user will be able to use pager. — Oleg, May 31 '12 at 19:37
I load only the first 1000 rows of the data in the first ajax request. In total, there _can_ be more than 80 000 lines, and the servlet in the background doesn't have enough memory when I load all of them at once (the table also happens to have approximately 40 columns). Even if I remove `scroll: true`, I still have the issue that jqGrid does not know how many pages there are and thus one will only be able to choose page one. — hugelgupf, Jun 01 '12 at 05:52
If you can have more than 80000 lines then you can use standard paging of data *on the server side* without usage of `scroll`. In the case you will need to load only first 20-30 rows of data. You can load `columnModel` in one Ajax request and then use `datatype: 'json'`. In the case jqGrid will show the number of pages and the number of records in the pager exactly what you place in the server response. — Oleg, Jun 01 '12 at 06:01
So you're saying I should make the first ajax request only about the model and names, and then let jqGrid call for the data in a second request? (and after that, let it go its way?) — hugelgupf, Jun 01 '12 at 06:37
Yes! I find it better in case of grid with many thousand rows. Moreover you should understand, that what the user really need is the way to *filter* or search of data. No user will read the 80000 rows of data. The user need to have possibility to display *small subset* of the data based on some additional filter rules. — Oleg, Jun 01 '12 at 07:00
I understand that perfectly ;) That's what the reqData var is about. Nobody will actually try to use the 80000 rows - but it has to be a possibility. — hugelgupf, Jun 01 '12 at 16:25
Exactly for the case you can implement *standard server side paging*, sorting and filtering. [Here](http://stackoverflow.com/a/5501644/315935) for example you can download project which implement all the features. — Oleg, Jun 01 '12 at 16:34

score 1 · Answer 1 · answered Sep 07 '12 at 19:35

Can you not do something like this...get the grid, clear the data, define the url to get the data from (it may change depending on what option your user selected) and then change the dataformat to json instead of local.

var grid = $('#TargetGridID');
    grid.clearGridData();
    grid.setGridParam({ url: '../controller/action?datatype=Option1' });
    grid.setGridParam({ datatype: 'json' });
    grid.trigger('reloadGrid');

We use this methodology and it works great...use this with stored procedures capable of paging and the grids are blazing fast! I know a 20,000 row grid takes us roughly 700ms with a page count of 500 rows.

If you are using SQL for your data I can upload a sample on how to support paging in a SQL Stored Proc, very useful stuff.

Thanks! I hadn't thought of that. I don't actually work at the company that I used to do this for anymore, so I don't need code for a stored proc, thanks :) — hugelgupf, Sep 19 '12 at 04:44

jqGrid: Load JSON data after local data already in table

1 Answers1