free jqGrid GridUnload and re-creating error with pager

Question

Update What I am guessing for now: the Grid#1 is unloaded and regeneraged. However due to the database server performance, the grid retrieves the un-updated data and regenerate before the actual update happens. I replaced GridUnload to refreshing the page, and sometimes the grid gets updated data, sometimes not. I change the title of it due to the main question has been changed, but I will leave the context as it was before.

I have a jqgrid with an action button (not in jqgrid) which will make the change in database, and unload and recreate the grid with the updated data (repulling from database).

However, there are two different error for this actions. (There are two different grids.)

First, the recreated Grid#1 shows the non-updated data.I found that was working with version jqGrid 4.14.1 (2017-03-20). However, with version 4.14.1(2017-04-04) and version 4.14.1(2017-04-20) do not work properly. As I remember right, I did not change any code after 2017-03-20, but only updated the jqgrid.src.js file. The reason that I updated this file to version 4.14.1(2017-04-04) is due to this issue.

Second, Grid#2 returns with duplicated .ui-jqgrid-pg-left class like the image below(.ui-jqgrid-pg-left is generated as much as I regenerate the grid.) This one is tested only with version 4.14.1(2017-04-20).

This is code for Grid#1

$(document).ready(function () {
       LoadLGrid1();
        $('#btnUpdateData').click(function () {
                UpdateData();
                $('#tbDetails').jqGrid("GridUnload");
               LoadLGrid1();
        });
)};

    function LoadLGrid1() {
        GridArea = $('#tbDetails');
        GridArea.jqGrid({
            url: '/Locked/GetLockedDetailsDataSet',
            datatype: "json",
            contentType: "application/json; charset-utf-8",
            mtype: 'GET',
            emptyrecords: "There is no locked deals currently.",
            colModel: [
                {label: 'Locked By',        name: 'LockedBy',           sorttype: 'text',   searchoptions: {clearSearch: true}},
                {label: 'Status',           name: 'Status',             sorttype: 'text',   searchoptions: {clearSearch: true}},
                {label: 'Locked Date',      name: 'LockedDate',         sorttype: 'date',   searchoptions: {clearSearch: true},
                        //blahblah
                }
            ],
            rowNum: 20,
            rowList: [20, 30, 50],
            prmNames: {
                page:'defaultPageNumber',
                rows:'rowsPerPage'
            },
            forceClientSorting: true,
            sortname: 'LockedDate',
            rownumbers: true,
            viewrecords: true,
            loadonce: true,
            multiselect: true,
            multiPageSelection: false,
            pager: true,
            searching: {
                searchOperators: true,
                defaultSearch: 'cn',
                closeOnEscape: true,
                searchOnEnter: false,
                multipleSearch: true
            }

        });

        GridArea.jqGrid('filterToolbar', {
            ignoreCase: true,
            searchOperators: true
        });
        GridArea.jqGrid('navGrid', {
            edit: false,
            add: false,
            del: false,
            refresh: true,
            refreshtext: "Clear Filter",
            refreshtitle: "Clear Filter"
        });

    };

This is code for Grid#2. It does have same structure as #1 but I will put just in case....

$(document).ready(function () {
       LoadLGrid2(selectedDealId);
        $('#btnUpdateData2').click(function () {
                UpdateData();
                $('#tbTaskDetails').jqGrid("GridUnload");
               LoadLGrid2(selectedDealId);
        });
)};


function loadGrid2(selectedDealId) {
            tbTaskDataArea = $('#tbTaskDetails');
            tbTaskDataArea.jqGrid({
                url: '/Tasks/GetTaskDataSet',
                postData: {
                    selectedDeal: selectedDealId
                },
                datatype: "json",
                contentType: "application/json; charset-utf-8",
                mtype: 'POST',
                emptyrecords: "There is no task associated with the deal currently.",
                colModel: [
                    { label: 'Task Id',         name: 'TaskId',         sorttype: 'number', searchoptions: { clearSearch: true },   width: 60,  align: 'center' },
                    { label: 'Description',     name: 'Description',    sorttype: 'text',   searchoptions: { clearSearch: true },   width: 270  },
                    { label: 'Create Date',     name: 'CreateDt',       sorttype: 'date',   searchoptions: { clearSearch: true },   width: 140,
                        //blahblah
                    }
                ],
                rowNum: 5,
                rowList: [5, 10, 15],
                prmNames: {
                    page: 'defaultPageNumber',
                    rows: 'rowsPerPage'
                },
                forceClientSorting: true,
                sortname: 'CreateDt',
                rownumbers: true,
                viewrecords: true,
                loadonce: true,
                multiselect: true,
                multiPageSelection: false,
                pager: true,
                searching: {
                    searchOperators: true,
                    defaultSearch: 'cn',
                    closeOnEscape: true,
                    searchOnEnter: false,
                    multipleSearch: true
                }
            });

            tbTaskDataArea.jqGrid('filterToolbar', {
                ignoreCase: true,
                searchOperators: true
            });
            tbTaskDataArea.jqGrid('navGrid', {
                edit: false,
                add: false,
                del: false,
                refresh: true,
                refreshtext: "Clear Filter",
                refreshtitle: "Clear Filter"
            });

        };

Please help me out to fix this. Thank you!

I can't reproduce the problem, which you report. See the demo https://jsfiddle.net/OlegKi/b13qd2et/, which uses the latest free jqGrid sources. The code, which you posted have many small problems. For example you use `LoadLGrid2` method to create the second grid, but you post the code of *another function* `loadGrid2` (instead of `LoadLGrid2`). The functions `LoadLGrid1` and `loadGrid2` are defined as global instead of defining inside of `$(document).ready(function () {/*here*/});`. Many variables will be used without be defined too (see `GridArea`, `tbTaskDataArea`)... I can continue. — Oleg, Apr 20 '17 at 23:03
I suggest to separate two things: 1) reproducing of a possible bug in the last code of free jqGrid and 2) creating good code to implement you requirements. I have more interest to find bugs, but I can't reproduce any problem. In your scenario the usage of `GridUnload` would be not the best choice. It's good if you need create the grid with **another columns** on the same place. If you need just reload the data from the server then one should use `$('#tbDetails').trigger("reloadGrid", { fromServer: true });`. — Oleg, Apr 20 '17 at 23:09
You can use `reloadGridOptions: { fromServer: true }` option of `navGrid` to force reloading from the server if the user click on "Reload Grid" button of navigator bar. You can use `navOptions` option of jqGrid to specify default options of `navGrid`. See UPDATED part of [the old answer](http://stackoverflow.com/a/5398136/315935), For example, you can include `navOptions: { edit: false, add: false, del: false, refreshtext: "Clear Filter", refreshtitle: "Clear Filter", reloadGridOptions: { fromServer: true } }` in jqGrid option and to use `navGrid` without additional parameters. — Oleg, Apr 20 '17 at 23:14
@Oleg Hello, Oleg! Thank you for the details. I'm sorry but I currently have other tasks to do but if I can try those I will do so soon, and tell you the result. Thanks again! :) — pebble, Apr 21 '17 at 14:42
You are welcome! I have many other things to do. Don't hurry. Just post new information when you'll have it. — Oleg, Apr 21 '17 at 14:44
@Oleg Hello, Oleg. I tried $.jqgrid.trigger("reloadGrid",{fromserver: true}); but that does work only half way. Today I updated js file to jqGrid 4.14.1 (2017-04-24), and .trigger is executed (debugged). However, as I wrote in update, I guess that is the issue with server processing time since 3 out of 10 did refresh but others did not. I just set the reload in setTimeout function to make sure the data is retirived after the update. — pebble, Apr 25 '17 at 20:02
Hallo Pebble. You wrote "I tried $.jqgrid.trigger("reloadGrid",{fromserver: true}); but that does work only half way". I have no idea what you under "half way" mean. In any way, one should use `$("#tbTaskDetails").trigger("reloadGrid",{fromserver: true});` instead (see my previous comment). `trigger` fires the event on the *grid* object. — Oleg, Apr 25 '17 at 20:36
@Oleg Sorry about my English. It does reload the grid, but only few out of several times. When I reload the grid, it seems like the reloading is faster than updating the database. Therefore, when the grid reloads, it will get the non-updated data and data is updated later. The reason I put 'half way' is the refresh succeed 4-5 times out of 10 trials. Hope my rewording helps you to understand. — pebble, Apr 25 '17 at 20:52
Also, I'm sorry that I have bugged you, but it seems like the double pager also due to error in my code. Some weird logic happens and executed the grid generation part several times. Thank you for your helping and investigating my code.. :) — pebble, Apr 25 '17 at 20:55
No problem. It's good that your found the origin of the problem. English is foreign for me too. I good understand the problem to write in another language. The problem with reloading data from the server can have different reasons. First of all I'd recommend you to examine the HTTP traffic between jqGrid and the server. You can, for example, start Developer Tools of Chrome or Internet Explorer (press F12 to start) and choose Network tab. You will see whether there are exist new request to the server after every `.trigger("reloadGrid", {fromserver: true})`. You could have some caching problem. — Oleg, Apr 25 '17 at 21:04
@Oleg The process time for updating action and reloading action are 13ms and 15ms each. However, since the updating action calls stored procedure in sql server, and stored procedure takes time to execute, it may take longer than reloading. I just put a setTimeout function for reloading to make sure the loaded data is updated. Thank you for your help! :) — pebble, Apr 25 '17 at 21:29
You are welcome! I like to know that your problem is solved now. Best wishes! — Oleg, Apr 25 '17 at 21:32

free jqGrid GridUnload and re-creating error with pager

0 Answers0