CODEWITHSUNDEEP
javascriptajaxjqueryjqgrid
pinaldesai
pinaldesai

Reputation: 1815

Issue while reloading Jqgrid with Scroll - Duplicate row data and missing last page

Please refer my code below, which I am using to load data from database. Code works fine as far as it loads data for the 1st time. Each record and each page loads perfectly.

Now If i call a Reload function it creates issues.

  1. Sometime it loads duplicate rows (say if my jason returning 20 rows, grid will show 40)
  2. I loose the last page of the records in grid.
 jQuery("#list").jqGrid({
            url: "http://localhost/myapp/myfile.php",
            datatype: "json",                
            mtype:"POST",
            postData:{folder: 'INBOX' },
            jsonReader: 
            {
                root: "rows",
                page: "currpage",
                total: "totalpages",
                records: "totalrecords",
                id: "0",
                cell:"",
                repeatitems: false
            },
            colNames: ['Id','Message'],
            colModel: [ 
                        { name: 'messageid', index: 'messageid', hidden: true, search:false},
                        { name: 'message', index: 'message', search:false},
                      ],
            rowNum: 10,
            scroll: 1,
            prmNames:{npage:1},
            autowidth: true,
            height: 470,
            loadonce: true,
            viewrecords: true,
            altRows:true,                
            caption: "",
            pager: "#plist",
        });
        jQuery("#list").jqGrid('setFrozenColumns');

    function reload_list()
    {
        $("#list").setGridParam({datatype:'json'}).trigger('reloadGrid');
    }

Please Note the following information

Framework I'm using is Codeigniter with JqGrid Version jquery.jqGrid-4.3.1.

Files I have included in my code are

  1. css/ui.jqgrid.css
  2. js/grid.locale-en.js
  3. js/jquery.jqGrid.src.js
  4. plugins/grid.postext.js
  5. src/jqModal.js
  6. src/jqDnR.js

DEMO: http://www.trimantra.com/demo/appointmentsystem/grid.php

Please Let me know How I can resolve this issue. Thanks in advance.

Upvotes: 0

Views: 4639

Answers (2)

sandip44
sandip44

Reputation: 71

Remove this line from your code:

jQuery("#list").jqGrid('setFrozenColumns');

It's because of this that it is creating a new row.

Upvotes: 1

Oleg
Oleg

Reputation: 221997

I can't reproduce the problem with row duplication, but I could see a lot of other problems in your application.

I suppose that your main problem is because you loads the data with the same ids in all three grids. As the results you have id duplicates on the page. The most easy way to fix the problem will be the usage of idPrefix option of jqGrid.

Below you find the list of the most important problems which I found:

  • You included incorrectly jQuery UI in your application. You don't included images subdirectory of the theme. So the application get "HTTP/1.1 404 Not Found" error on the loading of http://www.trimantra.com/demo/appointmentsystem/lib/jquery.jqGrid-4.3.1/themes/ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png. You should include all images in your project.
  • You don't use idPrefix option in the grids and load the same data in three grids. As the result all three grids will have <tr> elements with the same id. HTML don't allow id duplication. To fix the problem you can use for example idPrefix: "a", idPrefix: "b", idPrefix: "c" for the three grids. As the results the row having messageid: "45" will get id="a45" in the first grid, id="b45" and id="c45" in the last grid and you will have no id duplicates on the page.
  • I see no sense in combination of scroll: 1 and loadonce: true. If I understand what you need to do you should just remove scroll: 1 and prmNames:{npage:1} from all grids. The options are needed for virtual scrolling.
  • You should add gridview: true option which will improve performance of grids in many times in case of large number of rows.
  • The server response which produce the server currently not corresponds the jqGrid request. The request will contains rows=10, page=1, sidx=toname, sord=asc. The server returns all 48 rows of data and the data are unsorted. In any way you should insert sorting of data in your server code.
  • You use frozen:true in all visible columns. I see no sense in the settings.
  • If you don't need to display 'messageid' column you can just remove the column definition from the colModel and use jsonReader: {id: "messageid", repeatitems: false }. As the results the will save place on the page (hidden columns still get place on the page).
  • You should better transfer dates in locale independent format ISO 8601. Additionally you should use formatter: 'data' to display the dates in the format like 05/16/2012 07:45 AM which you use you can use formatoptions: { newformat: "d/m/Y H:i A" }. The main benefit will be correct sorting order of the column in case of usage loadonce: true.
  • You should remove trailing commas from colModel definitions. The combination },] is an error in JavaScript. The error will be ignored in the most modern web browsers (but not in old like IE6). It's better to write error free code.

Upvotes: 0

Related Questions