CODEWITHSUNDEEP
javascriptjqueryjqgrid
Tone
Tone

Reputation: 2853

How can I show a saved value that has just been updated in a jqGrid without reloading the entire grid?

I have my jqgrid working fine with the grid reloading fully every time, however I would like to not fully reload the grid until the page is refreshed. The reason is that the user may be on page 5 of 10, and when the grid reloads it resets it back to the beginning - I want the user to stay on the same page with the updated data.

Another approach I am looking into is saving the grid state somehow, the page it's on, etc and navigate back to that after reload. I tried this using this code

$('#grid').jqGrid().trigger('reloadGrid', [{ current: true }])

but it does not show the updated data. What am I missing?

Here is my full jqGrid code:

            $('#grid').jqGrid({
            url: 'GetLocations',
            datatype: 'json',
            jsonReader: { repeatitems: false },
            mtype: 'GET',
            colNames: ['Id', 'Name', 'Address Line 1', 'Address Line 2', 'City', 'StateId', 'State', 'RegionId', 'Region', 'Zip', 'Phone', 'Fax'],
               colModel: [
                { name: 'LocationId', jsonmap: 'LocationId', index: 'LocationId', width: 40, key: true },
                {
                    name: 'LocationName', jsonmap: 'LocationName', index: 'LocationName', sortable: true, width: 150,
                    editable: true,
                    editrules: { required: true },
                    formoptions: { elmsuffix: ' *' },
                    editoptions: { size: 64, maxlength: 64 }
                },
                {
                    name: 'AddressLine1', jsonmap: 'AddressLine1', index: 'AddressLine1', sortable: false, width: 150,
                    editable: true,
                    editrules: { required: true },
                    formoptions: { elmsuffix: ' *' },
                    editoptions: { size: 64, maxlength: 64 }
                },
                {
                    name: 'AddressLine2', jsonmap: 'AddressLine2', index: 'AddressLine2', sortable: false, width: 50,
                    editable: true,
                    editrules: { required: false },
                    editoptions: { size: 64, maxlength: 64 }
                },
                {
                    name: 'City', jsonmap: 'City', index: 'City', width: 100,
                    editable: true,
                    editrules: { required: true },
                    formoptions: { elmsuffix: ' *' },
                    editoptions: { size: 64, maxlength: 64 }
                },
                {
                    name: 'State_Id', jsonmap: 'State.Id', index: 'State_Id', editable: false, hidden: true
                },
                {
                    name: 'State', jsonmap: 'State.Name', index: 'State', width: 50, sortable: true, editable: true,
                    edittype: 'select',
                    editoptions: {
                        dataUrl: 'GetLookupItems?lookupType=states',
                        buildSelect: createSelectList
                    }
                },
                {
                    name: 'Region_Id', jsonmap: 'Region.Id', index: 'Region_Id', editable: false, hidden: true
                },
                {
                    name: 'Region', jsonmap: 'Region.Name', index: 'Region', width: 80, sortable: true, editable: true,
                    edittype: 'select',
                    editoptions: {
                        dataUrl: 'GetLookupItems?lookupType=regions',
                        buildSelect: createSelectList
                    }
                },
                {
                    name: 'Zip', jsonmap: 'Zip', index: 'Zip', width: 40, sortable: false,
                    editable: true,
                    editrules: { required: true },
                    formoptions: { elmsuffix: ' *' },
                    editoptions: { size: 16, maxlength: 16 }
                },
                {
                    name: 'Phone', jsonmap: 'Phone', index: 'Phone', width: 80, sortable: false,
                    editable: true,
                    editrules: { required: false },
                    formoptions: { elmsuffix: ' *' },
                    editoptions: { size: 16, maxlength: 16 }
                },
                {
                    name: 'Fax', jsonmap: 'Fax', index: 'Fax', width: 80, sortable: false,
                    editable: true,
                    editrules: { required: false },
                    formoptions: { elmsuffix: ' *' },
                    editoptions: { size: 16, maxlength: 16 }
                }],
            pager: $('#pager'),
            rowNum: 25,
            rowList: [10, 25, 50, 100],
            sortable: true,
            gridview: true,
            sortname: 'Name',
            ignoreCase: true,
            caption: 'Class Locations',
            height: '100%',
            autowidth: true,
            loadonce: true, /* needs to be true for client side paging to work */
            loadtext: 'Loading...'

        });
        $('#grid').jqGrid('navGrid', '#pager', { edit: true, add: true, del: true, search: false },

            { /* edit options */
                url: 'UpdateLocation',
                closeOnEscape: true,
                closeAfterEdit: true,
                //afterSubmit: ReloadGrid,
                width: 500,
                bottominfo: '* required fields',
                bSubmit: 'Save',
                recreateForm: true
            },
            { /* add options */
                url: 'InsertLocation',
                closeOnEscape: true,
                closeAfterAdd: true,
                //afterSubmit: ReloadGrid,
                width: 500,
                bottominfo: '* required fields',
                bSubmit: 'Save',
                recreateForm: true
            },
            { /* delete options */
                url: 'DeleteLocation',
                closeOnEscape: true,
                //afterSubmit: ReloadGrid
            }
        );
        $('#grid').jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: 'cn' });
    });

    function ReloadGrid() {
        $('#grid').jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
        //$('#grid').jqGrid().trigger('reloadGrid', [{ current: true }]);
        return [true, '']; /* no error */
    }

Updated code with partial solution (removed colModel for succinctness):

 $('#grid').jqGrid({
            url: 'GetLocations',
            datatype: 'json',
            jsonReader: { repeatitems: false },
            mtype: 'GET',
            colNames: ['Id', 'Name', 'Address Line 1', 'Address Line 2', 'City', 'StateId', 'State', 'RegionId', 'Region', 'Zip', 'Phone', 'Fax'],
            colModel: [

         ...

            ],
            pager: $('#pager'),
            rowNum: 25,
            rowList: [10, 25, 50, 100],
            sortable: true,
            gridview: true,
            sortname: 'Name',
            ignoreCase: true,
            caption: 'Class Locations',
            height: '100%',
            autowidth: true,
            loadonce: true, /* needs to be true for client side paging to work */
            loadtext: 'Loading...'
        });
        $('#grid').jqGrid('navGrid', '#pager', { edit: true, add: true, del: true, search: false },

            { /* edit options */
                url: 'UpdateLocation',
                closeOnEscape: true,
                closeAfterEdit: true,
                //afterSubmit: ReloadGrid,
                afterSubmit: function () {
                    var $self = $(this);
                    setTimeout(function () {
                        $self.jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid', [{ current: true }]);
                    }, 50);
                    return [true, ''];
                },
                reloadAfterSubmit: false,
                width: 500,
                bottominfo: '* required fields',
                bSubmit: 'Save',
                recreateForm: true
            },
            { /* add options */
                url: 'InsertLocation',
                closeOnEscape: true,
                closeAfterAdd: true,
                afterSubmit: function () {
                    var $self = $(this);
                    setTimeout(function () {
                        $self.jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid', [{ current: true }]);
                    }, 50);
                    return [true, ''];
                },
                reloadAfterSubmit: false,
                width: 500,
                bottominfo: '* required fields',
                bSubmit: 'Save',
                recreateForm: true
            },
            { /* delete options */
                url: 'DeleteLocation',
                closeOnEscape: true,
                reloadAfterSubmit: false
            }
        );
        $('#grid').jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: 'cn' });
    });

    // not used...
    function ReloadGrid() {
        $('#grid').jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid', [{current: true, page: 2}]);
        return [true, '']; /* no error */
    }

Upvotes: 0

Views: 577

Answers (1)

Oleg
Oleg

Reputation: 221997

To implement your requirement you have to set reloadAfterSubmit option of form editing to false. The default value of reloadAfterSubmit is true, so jqGrid reloads the grid at the end of form editing (see the line). Triggering of reloadGrid with some parameters can't solve the problem because jqGrid will reload the grid one more time in case of default reloadAfterSubmit: true value.

So you have to use reloadAfterSubmit: false first of all. Then you can either use

afterSubmit: function () {
    var $self = $(this);
    setTimeout(function () {
        $self.jqGrid("setGridParam", { datatype: "json" })
            .trigger("reloadGrid", [{ current: true }]);
    }, 50);
}

or just do nothing in case of Delete and Edit operation and change the response of server (from url: 'InsertLocation') so that it returns the id of new added row and modify the id of added row to the value inside of afterSubmit callback. In the last case afterSubmit callback should return the id of new row as the third element of returned array (see the lines of jqGrid code).

Upvotes: 1

Related Questions