jqGrid—Reloading Data

Question

I'm trying to add an item to my data source, and then re-load the grid based on this answer. The grid loads fine. The addItemToGrid gets called a few times, and I'm verifying that the underlying tableSrc object is getting added to, but the grid remains unchanged.

    var tableSrc = { "rows": [
        { "title": "Title1", "subtitle": "subTitle", "authors": ["a1", "a2", "a3"] },
        { "title": "Title2", "subtitle": "subtitle", "authors": ["X", "Y"] },
        { "title": "Title3", "subtitle": "subTitle", "authors": ["1", "2", "3", "4"]}]
    };

    targetGrid = $("#jqGridElement").jqGrid({
        datastr: tableSrc,
        jsonReader: { repeatitems: false },
        datatype: "jsonstring",
        colNames: ['title', 'subtitle'],
        colModel: [
            { name: 'title', index: 'title', width: 55 },
            { name: 'subtitle', index: 'subtitle'}],
        height: 'auto',

        gridview: true
    });

    function addItemToGrid() {
        tableSrc.rows.push({ "title": "NEW", "subtitle": "HELLO", "authors": ["1", "2", "3", "4"] });
        $("#jqGridElement").trigger('reloadGrid');
        //$("#jqGridElement").jqGrid('reloadGrid');
    }

Take a look at this: [jqGrid Solution][1] [1]: http://stackoverflow.com/questions/1297044/reload-a-loaded-jqgrid-with-a-different-table-data/1297179#1297179 — iCreateAwesome, Aug 31 '11 at 17:17
It looks like that link is saying to clear the grid using: `$("#jqGridElement").trigger('gridUnload');` - that doesn't seem to do anything though... — Adam Rackis, Aug 31 '11 at 17:23

score 2 · Accepted Answer · edited May 23 '17 at 11:58

2

First, the statement $("#jqGridElement").trigger('GridUnload') do nothing because there are no event with the name 'GridUnload'. The only event currently supported by jqGrid is 'reloadGrid'. The event support additional parameters (see here) which can be interesting for you. The call $("#jqGridElement").trigger("reloadGrid", [{current:true}]); will refresh the grid, but the selection which could make the user will be not changed.

If you need call GridUnload in "new style API" it should looks like

$("#jqGridElement").jqGrid('GridUnload');

After you call GridUnload method the table element which is basis of jqGrid will be recreated. So if you saved the $("#jqGridElement") in a variable (var gridObj = $("#jqGridElement") for example) you should refresh the value (with the assignment gridObj = $("#jqGridElement")).

Now about your main question. The method GridUnload is useful in the case if you need add new column to the grid or create on the place of old grid absolutely another grid. (see the answer or this one as an example). If you need to add one row of data to the existing grid you can use addRowData for example.

What can be really important to you to understand is the usage of ids for every row (<tr> element). If you don't want to manage ids yourself you can use undefined as the rowid in the addRowData method. In the case the $.jgrid.randId() method will be used internally to generate unique id for the new row.

edited May 23 '17 at 11:58

Community

1
1

answered Aug 31 '11 at 18:16

Oleg

220,925
34
403
798

Thanks for another great answer. I hope someone finds them later on and saves them the time I've spent trying to figure this stuff out. – Adam Rackis Aug 31 '11 at 19:02
@Adam Rackis: You are welcome! I wanted before to write more information about the filling of grid, but I decide not make the answer too long. Do you load the "JSON" data from the server or you construct the `tableSrc` object dynamically on the client side? – Oleg Aug 31 '11 at 20:31
Eventually the user will click a button, post to a web service, get a json object back, which I'll then want the grid to refresh against. That's what I was simulating by adding a single new row; eventually I'll be clearing and refreshing the entire rows array and telling the grid to reload. Thanks to you I think I know how to make this happen. – Adam Rackis Aug 31 '11 at 20:40
@Adam Rackis: If all the data come from the server in JSON format when you not use `datatype: 'json'` and `url: yourServerUrlWichProvideJSON`? It is the **native** way. jqGrid was designed for this. Inside of `click` event of the button you can just call `$("#jqGridElement").trigger('reloadGrid')`. If you want that sorting and paging of data will be locally you can use `loadonce: true` parameter of jqGrid. If you add `jsonReader` parameter to the jqGrid you can read almost any JSON input from the server and fill the grid with the data. If you post the native JSON server response I could help. – Oleg Aug 31 '11 at 20:50
Will that work with POST as well as GET, or would I have start calling my web methods with GET? In any event, there's actually other stuff I need to do with the data in addition to binding it to the grid, so the way I have it is probably the way I need to be heading. I did see how you can bind the grid to a url, and I was actually wishing this fit better with my site. – Adam Rackis Aug 31 '11 at 21:11
@Adam Rackis: `mtype: 'POST'` parameter inform that `jQuery.ajax` should be used with 'POST'. You can see the data returned from the server in `loadComplete: function (data) {...}` event handler which you can implement in jqGrid. It is good place to do some actions after the data returned from the server. To say exact which additional parameters you could need to include I need see raw JSON data returned from the server. You can use [Fiddler](http://www.fiddler2.com/fiddler2/) or [Firebug](http://getfirebug.com/) to catch the server response. – Oleg Aug 31 '11 at 21:26
Hey that's really cool. I'll keep that in mind for the next time I need to use this grid; hopefully my requirements will lend themselves more to this model. So are you one of the developers for jqGrid? – Adam Rackis Aug 31 '11 at 21:32
@Adam Rackis: not really. Two years ago I made my first web development project. I get it because I developed before in many other subjects, but not here. So I started to use JavaScript, jQuery and jqGrid which I found very important for the project. Some mounts ago after the end of the project I started write answers on the stackoverflow and trirand forum mostly to keep the new knowledge in mind. Since the time I wrote many feature suggestions, improvements and bug fixes for jqGrid, but I never seen Tony (the developer of jqGrid). So I am just the user of jqGrid. – Oleg Aug 31 '11 at 21:41

jqGrid—Reloading Data

1 Answers1

Linked