jQuery Grid Plugin - jqGrid - Topic: Not able to pagenate rows.

OlegK on Not able to pagenate rows.

Tue, 31 Aug 2010 00:16:06 +0300

Hi Stephen!

Thank you for good words which you wrote. You welcome.

I am not a developer of jqGrid, just a user and I have no direct interest in jqGrid. I started to use jqGrid less then one year ago in a project (which is ahready ended) and know jqGrid now prity good. My current projects has nothing with web development (like the most my previous projects). Nevertheless I like jqGrid and just help other people in answering in the forum and on the stackoverflow.com site. All this I do in the pauses between the main job which bring me money.

So such people like me need sometime to hear that they spend his private time not for nothing and the writing of some answers really helps other.

Best regards
Oleg

scawa1952 on Not able to pagenate rows.

Mon, 30 Aug 2010 21:48:10 +0300

Thank you very much for your help.

Yes, this post does look VERY much like one you answered in Stack-overflow. I did not run across that one in my Google Search, but I appreciate your patience in answering it in this forum.

I had used the height: "100%" based upon another article or post in this forum (I have since lost the link to it.).

When tested your example and suggestion, initially, I got "setGridParam" is an unknown function. So, I figured there was a problem with the libraries I was using. I had downloaded the 3.8 beta version. I copied the version you so kindly modified and posted on the second link. One by one, I replaced my libraries with the ones you referenced and found the offending ones. I replaced all my libraries with 3.7.2 and got it to work.

I also modified my project code to add the correct libraries and your suggestions and that is also working.

Thank you again for your patience and help. It's guys like you that make a product like this work.

Stephen McConnell

OlegK on Not able to pagenate rows.

Mon, 30 Aug 2010 19:11:34 +0300

Hi Steve!

A simple line after the for-loop

$("#navgrid").setGridParam({ rowNum: 10 }).trigger("reloadGrid");

will makes you program working. You should change "i<=mydata.length" to "i<mydata.length" also. Setting and url parameter for the local data has also no sense.

It seems to me that you repeat the question which I answered some time ago at http://stackoverflow.com/quest.....10#3495210.

By the way parameter height: "100%" is not perfect in case of pagination (see http://www.ok-soft-gmbh.com/jq.....wa1952.htm as your working examlpe).

Best regards
Oleg

scawa1952 on Not able to pagenate rows.

Mon, 30 Aug 2010 18:33:06 +0300

I figured that I needed to start from scratch on this.

I downloaded the 3.8 version of ALL libraries for jqGrid (to make sure I had the latest versions), and downloaded the demo examples and did an exerpt from the BASIC navagation grid demo. I loaded the data from a local source (as one can see in the JavaScript).

The following was what I came up with (HTML included).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RaceMonitor Test</title>

       <link rel="stylesheet" type="text/css" media="screen"
           href="/css/ui.jqgrid.css" />
       <link rel="stylesheet" type="text/css" media="screen"
           href="/css/ui.multiselect.css" />
       <link rel="stylesheet" type="text/css" media="screen"
           href="/css/le-frog/jquery-ui-1.8.custom.css" />

       <script src="/js/jquery-1.4.2.js" type="text/javascript"></script>
       <script src="/js/jquery-ui-1.8.4.custom.min.js" type="text/javascript"></script>
       <script src="/js/jquery.layout-1.2.0.js" type="text/javascript"></script>
       <script src="/js/i18n/grid.locale-en.js" type="text/javascript"></script>
       <script type="text/javascript">
           $.jgrid.no_legacy_api = true;
           $.jgrid.useJSON = true;
       </script>
       <script src="/js/ui.multiselect.js" type="text/javascript"></script>
       <script src="/js/jquery.jqGrid.min.js" type="text/javascript"></script>

       <script type="text/javascript" src="/js/grid.formedit.js"></script>
       <script type="text/javascript" src="/js/grid.common.js"></script>

       <script src="/js/jquery.tablednd_0_5.js" type="text/javascript"></script>
       <script src="/js/jquery.contextmenu.js" type="text/javascript"></script>

       <script type="text/javascript">
       jQuery(function() {
jQuery("#navgrid").jqGrid({
    url:'editing.php?q=1',
   datatype: "local",
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Closed','Ship via','Notes'],
    colModel:[
        {name:'id',index:'id', width:55, sorttype: "int", editable:false,editoptions:{readonly:true,size:10}},
        {name:'invdate',index:'invdate', width:80,editable:true,editoptions:{size:10}},
        {name:'name',index:'name', width:90,editable:true,editoptions:{size:25}},
        {name:'amount',index:'amount', width:60, align:"right",editable:true,editoptions:{size:10}},
        {name:'tax',index:'tax', width:60, align:"right",editable:true,editoptions:{size:10}},
        {name:'total',index:'total', width:60,align:"right",editable:true,editoptions:{size:10}},
       {name:'closed',index:'closed',width:55,align:'center',editable:true,edittype:"checkbox",editoptions:{value:"Yes:No"}},
       {name:'ship_via',index:'ship_via',width:70, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;TN:TNT"}},
        {name:'note',index:'note', width:100, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"20"}}
    ],
    rowNum:10,
    rowList:[10,20,30],
    pager: '#pagernav',
    sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    caption:"Navigator Example",
   height: "100%"
});
jQuery("#navgrid").jqGrid('navGrid','#pagernav',
{}, //options
{height:280,reloadAfterSubmit:false}, // edit options
{height:280,reloadAfterSubmit:false}, // add options
{reloadAfterSubmit:false}, // del options
{} // search options
);

var mydata = [
       {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
       {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
       {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
       {id:"4",invdate:"2007-10-04",name:"test4",note:"note4",amount:"200.00",tax:"10.00",total:"210.00"},
       {id:"5",invdate:"2007-10-05",name:"test5",note:"note5",amount:"300.00",tax:"20.00",total:"320.00"},
       {id:"6",invdate:"2007-09-06",name:"test6",note:"note6",amount:"400.00",tax:"30.00",total:"430.00"},
       {id:"7",invdate:"2007-10-04",name:"test7",note:"note7",amount:"200.00",tax:"10.00",total:"210.00"},
       {id:"8",invdate:"2007-10-03",name:"test8",note:"note8",amount:"300.00",tax:"20.00",total:"320.00"},
       {id:"9",invdate:"2007-09-01",name:"test9",note:"note9",amount:"400.00",tax:"30.00",total:"430.00"},
       {id:"10",invdate:"2007-09-08",name:"test10",note:"note10",amount:"500.00",tax:"30.00",total:"530.00"},
       {id:"11",invdate:"2007-09-08",name:"test11",note:"note11",amount:"500.00",tax:"30.00",total:"530.00"},
       {id:"12",invdate:"2007-09-10",name:"test11",note:"note12",amount:"500.00",tax:"30.00",total:"530.00"}
       ];


$("#navgrid").jqGrid('clearGridData');
for(var i=0;i<=mydata.length;i++)
   jQuery("#navgrid").jqGrid('addRowData',i+1,mydata[i]);

});
       </script>
</head>
<body>
   <table id="navgrid"></table>
   <div id="pagernav"></div>
</body>
</html>

I am STILL not able to pagenate and STILL getting the weird view of "View -9 - 2 of 12"

When I select a row and then try to edit it, the Popup occurs in the "Header" of the grid and expands the header of the grid.

Also, how does one adjust the size of the popup edit box?

Thank you for your help in advance.

Steve

scawa1952 on Not able to pagenate rows.

Thu, 26 Aug 2010 23:41:13 +0300

Thanks for your reply.

I forgot to include the:

$("#eventList").jqGrid('navGrid', '#eventListPgr', {add: false, edit: false, del:false});

but it is in there.. sorry.

As for problem #2. I found some interesting things in that.... When I re-sort the grid based upon one of the column headiings, the View comes out:

View 1 - 106 of 106

Which libraries SHOULD I load and where should I get them. I noticed a post in this forum describing the previous problem and they said the bug had been fixed. So, I loaded the latest and greatest library versions (as linked to on the site), installed them and am still getting the problem.

Thanks again for the help.

Stephen McCOnnell

jayrmotta on Not able to pagenate rows.

Thu, 26 Aug 2010 22:17:02 +0300

Hi,

I think you must have something like this:

jQuery("#eventList").jqGrid('navGrid','#eventListPgr',{add:false,edit:false,del:false});

And about the method doesn't work, maybe when you're downloading you miss some library that can contain this function or something like that, it really don't make sense doesn't work.

Cya!

scawa1952 on Not able to pagenate rows.

Thu, 26 Aug 2010 17:05:04 +0300

I am new to jqGrid but am finding it powerful. However, there are two problems I am having.

1) I cannot get the "pagenate" feature to work.

2) The 'clearGridData' API is not functioning correctly.

Problem #1

I am defining the table in the following way:

    $("#eventList").jqGrid({
       datatype:"local",
       repeatitems: false,
       colNames:['', 'Event Num', 'Race Num', 'Event Id', 'Type', 'Num', 'Location', 'Title'],
       colModel:[
            {name: 'sel' , index: 'sel', width: 50, align: 'center' },
           {name: 'eventNumber', index:'eventNumber', width: 100, align: 'right'},
           {name: 'raceNumber', index: 'raceNumber', width: 100, align: 'right'},
           {name: 'nascarEventId', index: 'nascarEventId', width: 100, align: 'right'},
           {name: 'type', index: 'type', width: 75, align: 'center'},
           {name: 'number', index: 'number', width: 50, align: 'center' },
           {name: 'location', index: 'location', width: 200},
           {name: 'title', index: 'title', width: 300}

       ],
       multiselect: false,
       rowNum:10,
       rowList:[10,20,30],
       pager: '#eventListPgr',
       viewrecords: true,
       caption: "Event List",
       height: "100%"
   });

Here is the HTML I am using to define the table:

And here are the functions I am using to load the table:

function getEventList(form) {
currentSeriesId = $('#selectEventListSeriesId :selected').val();

   $.getJSON('/racemonitor?cmd=getEventList&seriesId=' + currentSeriesId + "&year=" + currentYear,
       function(data){
           putEventList(data); });
}

The function load all the data into the Grid, however there is no limiting of the number of rows displayed to 10 as defined in the table definition.

PROBLEM # 2

I load 106 records. Cool so far. BUT the pager at the bottom says:

"View -9 - 96 of 106 records"

I don't know if the two problems are related. Any help would be appreciated.

Stephen McConnell