CODEWITHSUNDEEP
jqgrid
curious1
curious1

Reputation: 14717

JqGrid: how to refresh the grid in afterSubmit?

I have two buttons in the pager, one for adding a new record. See the code below:

$(grid_selector).jqGrid('navGrid', pager_selector, 
    {   
        edit: false,
        add: true,
        addicon : 'icon-plus-sign purple',
        del: true,
        delicon : 'icon-trash red',
        search: false,
        refresh: false,
        view: false,
    },
    null, //no need for edit
    {
        //new record form
        url: "/add",  
        ...
        afterSubmit : function(response, postdata)  {

            // ??? how to refresh the grid

        }
    },
    ...

}

After adding a record, I am hoping to refresh the grid. Could someone let me know how to do this?

I am using local data for the test purpose.

Regards.

Upvotes: 0

Views: 6638

Answers (2)

Oleg
Oleg

Reputation: 221997

Default property used in form editing is reloadAfterSubmit: true. It means that jqGrid trigger reloadGrid processing of afterSubmit.

You wrote "I am using local data". It's difficult to answer on your question because you don't posted more full code which you use. I try to guess what you do. Because jqGrid don't support local for editing till now then I suppose that your problem exist because you use loadonce: true option. If the option are used then jqGrid changes the original datatype to "local" after the first loading of data. In other words jqGrid "breaks" connection to the server (to url) after the first loading of data.

So you need just to reset the original datatype ("json" or "xml") before jqGrid trigger reloadGrid. The corresponding code will be about the following:

$(grid_selector).jqGrid("navGrid", pager_selector, 
    {   
        edit: false,
        addicon : 'icon-plus-sign purple',
        delicon : 'icon-trash red',
        search: false,
        beforeRefresh: function () {
            $(this).jqGrid("setGridParam", { datatype: "json" });
        }
    },
    {}, //no need for edit
    {
        //new record form
        url: "/add",  
        ...
        afterSubmit: function ()  {
            $(this).jqGrid("setGridParam", { datatype: "json" });
        }
    },
    ...
}

The above code add "Refresh" button and uses the same beforeRefresh and afterSubmit. In the way "Refresh" button reloads the data from the server. I personally find existence of such button practical in loadonce: true scenario.

Upvotes: 1

Geo V L
Geo V L

Reputation: 896

Make sure that you are using updated version of jqGrid in your application If all other parameters are are correct ( refresh:true etc ) you can use this to reload Grid 

$(grid_selector).trigger("reloadGrid");

Please note this condition too

The reloading is not performed due to the datatype got change to local(loadonce is true).You need to reload the grid manually in afterSubmit function for form editing. You need to set the datatype to json before triggering reload event.

$(grid_selector).jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');

Upvotes: 2

Related Questions