Forum


08:05

09/10/2008

Hello everybody,
I'm new with this plug in and I try to use it. But, I have 2 problems:
1° When I try to display the result of the JSON querie, whole result is displayed in once and not by pagination. I work in ColdFusion; I create a JSON file (see the example). I show the file of configuration of the "jqGrid."
JSON file:
{ totalpages:'10', currpage:'1', totalrecords:'378', rows : [{id:'1',cell:['0100000','1. FRUIT FRESH OR FROZEN; NUTS','0']}, ... }
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
url:'index.cfm?event=MRL_Data',
datatype: 'json',
mtype: "GET",
colNames:['Code','Commodity', 'MRL'],
colModel :[ {name:'COMMODITIES_CODE', index:'COMMODITIES_CODE asc', width:50, align:'center', sortable:true, sorttype:'string'},
{name:'NOM', index:'NOM', width:300, align:'left', sortable:false, sorttype:'string'},
{name:'SUB_10', index:'SUB_10', width:50, align:'center', sortable:false, editable:true, sorttype:'string'}],
toolbar: [true, "top"],
width: 500,
height:450,
pager: jQuery("#pager"),
recordtext: 'nombre de produits:',
pgbuttons: true,
rowNum:40,
rowList:[40,60,100],
imgpath: '../resources/js/themes/coffee/images',
caption: 'MRL management',
onSelectRow: function(id){
if(id && id!==lastsel){
//jQuery(’#rowed3′).restoreRow(lastsel);
jQuery("#list").saveRow(id);
jQuery("#list").editRow(id,true);
lastsel=id;
}
}
}).navGrid('#pager', {edit: true, add: false, del: false,search: true,position:"right"});
});
</script>
2° When the result is displayed, look the navigation bar. There are 3 problems:
- On the left, the navigation buttons are over the buttons of edition
- On the right, the buttons of navigations don't appear.
- Besides the n° of page and another information don't appear.
As if the problem was in the CSS level.
look the print screen below of this topic
Would someone be able to help me?
Thank you for advance.
Best regards
Andre
08:22

Moderators
30/10/2007

Hello,
For the second issue - it seems that your pager does not have class scroll.
For the first one - jqGrid displays the whole data returned from the server.
Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
09:16

09/10/2008

Hello,
For beginning, I would like to thanks for your reaction.
I have controled the code and for the first issue:
I use the class "scroll" for the two (grid & navigation bar)
<table style="background-color:#CCCCCC ">
<tr>
<td>
<table id="list" class="scroll"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
</td>
<td></td>
</tr>
</table>
for the second issue: I don't understand!
If I understand your reaction:
If I configure the jqGrid to display 10 records, I must extract only 10 records from the Query???
The first 10 records if it is the first page,
from 11 to 20 for the second, etc.
It is very complex to manage that
Best regards
Andre
09:48

Moderators
30/10/2007

Hello,
jqGrid does not support client side pagnagion. The primary purpose
for the grid is server side oriented. If you look into the examples I do
not think that it is complex.
For the second issue, could you please try without using navGrid first
and see the result.
If all is ok - try with position left in navGrid.
Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
02:58

09/10/2008

Hello,
The problem about navigation is resolved.
For the second problem, I tried your advice but nothing happens. White screen.
I rebuilt the "jqGrid" with the minimum properties:
jQuery("#list").jqGrid({
url:'index.cfm?event=MRL_Data',
datatype: 'json',
colNames:['Code','Commodity', 'MRL'],
colModel :[ {name:'COMMODITIES_CODE', index:'COMMODITIES_CODE asc', width:50, align:'center', sortable:true},
{name:'NOM', index:'NOM', width:300, align:'left', sortable:false},
{name:'SUB_10', index:'SUB_10', width:50, align:'center', sortable:false, editable:true, edittype:'text'}],
pager: jQuery("#pager"),
imgpath: '../resources/js/themes/basic/images'
}).navGrid('#pager', {edit: true, add: false, del: false,search: true});
the problem is different following the browser (Internet explorer or Firefox)
Internet Explorer:
The navigation button doesn't appear and see the error message above.
But the "edit", "add", etc. appear and function well.
Firefox:
No error, but the left navigation arrow appear OVER the "edit" button.
The right navigation arrow doesn't appear.
Thank you for your support
Best regards
Andre
07:28

Moderators
30/10/2007

Hello,
It is difficult for me to tell you what is the problem.
Could you please send me a link to the problem.
You can write me to tony at trirand dot com
Ragrads
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
Most Users Ever Online: 715
Currently Online:
94 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66