jqGrid paging buttons work only on one click - jqgrid

I'm using jqGrid in my project and ran into a strange paging issue. I can click on the next page button and go from page 1 to page 2, but any other paging buttons I push after that I get stuck on page 2 and can't go to other pages. I can however type in a page number, hit enter and then it will update the page displayed. I have pasted the jqGrid code below.
jQuery(document).ready(function(){
jQuery("#groupsTable").jqGrid({
jsonReader: {
root:"rows",
page:"page",
total:"total",
records:"records",
repeatitems:false,
cell:"",
id:"id",
userdata:"userdata"
},
url:'project/selectTable/loadTableInfo.do',
datatype:'json',
colNames:['Name','Size', 'Number', 'Search','Delete'],
colModel:[
{name:'name',index:'name', width:500, sorttype:'text', searchoptions:{sopt:['cn']},
{name:'size',index:'size', sorttype:'int', width:150, searchoptions:{sopt:['le']}},
{name:'mailList',index:'mailList',sorttype:'int', width:150, searchoptions:{sopt:['le']}},
{name:'search',index:'search', stype:'select', width:60, sortable:false},
{name:'delete',index:'delete',width:60, stype:'select', sortable:false}],
pager:'#pager',
loadonce:true,
rowNum:50,
rowList:[10,25,50,75,100,500],
viewrecords:true,
height:600,
pgbuttons:true,
pginput:true,
loadComplete: function(){
var ids = jQuery("#groupsTable").getDataIDs();
for(var i=0;i<ids.length;i++){
var cl = ids[i];
X = "<span class='delete' onClick=deleteRow("+cl+");></span>"
searching = "<span class='search' onClick=search("+cl+");></span>"
jQuery("#groupsTable").setRowData(ids[i],{delete:X});
jQuery("#groupsTable").setRowData(ids[i],{search:searching});
}
jQuery('#groupsTable').filterToolbar({searchOnEnter:false});
jQuery('#groupsTable')[0].triggerToolbar();
},
caption:'General Info'
});
});
And the html:
<table id="groupsTable"></table>
<div id="pager"></div>

what i think you are implementing rowList in wrong manner, read the defination of rowList in this link
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:first_grid
or it could be a version problem also, check this link..
http://www.trirand.com/blog/?page_id=393/help/default-rowlist/
I hope it helps you

Related

don't want to show all the records grid view in jqgrid

This is the grid view showing all records on grid here, but i don't want show in the grid all records?
When ever i click events like add,edit,view,in that time shows the all records...
Suppose showing' Total' in my grid ,,Total is showing only when i click add ,edit ,view
Not in the grid view
colModel:[
{name:'empId',index:'empId',width:3,editable:true,editoptions:{readonly:false,view:true},editrules:{required:false},key:true,formoptions:{rowpos:2,elmprefix:" " }},
{name:'empName',index:'empName',width:3,editable:true,editrules:{required:true},formoptions:{rowpos:3,elmprefix:" " }}]
jQuery("#taskDetails").jqGrid('navGrid','#pagernavTask',{add:true,edit:true,del:true,refresh:true,view:true,search:false})
This is my code...suppose if i add id,name (editable:true) it show dialogue box 2 feilds ..and also it shows in grid view also ,,but and don't want to display in the grid view displays ,it show only when i click edit,add,view (show in dialogue boxes)..Is it possible ????Please reply for this answer
Please any one give me the answer
Thanks in adavance
hiding a column can be done by using hidden: true in your colModel. Moreover by using beforeshowform in your add ,edit ,view u can customize ur own way of showing / hiding a column. For advance details Hidden Columns in jqGrid.
UPDATE
here i hide EmpId by using hidden:true in my colmodel. it can be shown in Add dialog by using beforeshowform event. Same way i have shown empName in Grid but hidden in edit dialog. hope u can understand now.
$(function() {
var grid = $('#MyJqGrid');
var mydata = [
{empId:"1",empName:"alpha",notes:"NA"},
{empId:"2",empName:"beta",notes:"Null"},
{empId:"3",empName:"gamma",notes:"N/A"},
{empId:"4",empName:"delta",notes:"Null"},
{empId:"5",empName:"theta",notes:"aaaa"},
];
grid.jqGrid({
data: mydata,
datatype: "local",
colNames:['empId','empName', 'Notes'],
colModel:[
{name:'empId',index:'empId',sortable:true, editable:true, hidden: true,}, // here field is hidden in grid
{name:'empName',index:'empName',editable:true, sortable: true, hidden: false,}, // here field is shown in grid
{name:'notes',index:'notes',editable:true, sortable: true,},
],
height: "auto",
width : "auto",
pager:'#Mypager',
viewrecords : true,
rowNum: 5,
sortname: "empId",
sortorder :"asc",
rowList:[2,3,5],
caption : "My JqGrid Test",
}).jqGrid('navGrid','#Mypager',{
edit: true,
add: true,
del: false,
search: false,
view: false,
},
{
//Edit Form
beforeShowForm: function(form){
$('#tr_empName',form).hide(); //In Edit form empName is Hidden, initially shown
}
},
{
//Add Form
beforeShowForm: function(form){
$('#tr_empId',form).show(); //In add form EmpId is shown, initially hidden
//$('#tr_empName',form).hide();
},
});
});

Pager buttons not displaying but pager does in JQGrid

For some reason my pager displays below my grid but not the buttons to navigate to the next, previous, first, or last pages. I know the pager is displayed because the rowList attribute is shown and I can choose how many entries to show.
This is the JQGrid declaration code:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#Table").jqGrid({
jsonReader: {
root:"rows",
page:"page",
total:"total",
records:"records",
repeatitems:false,
cell:"",
id:"id",
userdata:"userdata"
},
url:'project/selectTable/loadTableInfo.do',
datatype:'json',
colNames:['Name','Size','Delete'],
colModel:[
{name:'name',index:'name', sorttype:'text'},
{name:'size',index:'size', sorttype:'int'},
{name:'delete',index:'delete',width:20, stype:'select'}],
pager:'#pager',
rowNum:50,
rowList:[10,25,50,75,100],
viewrecords:true,
autowidth:true,
height:"auto",
pgbuttons:true,
pginput:true,
loadComplete: function(){
var ids = jQuery("#Table").getDataIDs();
for(var i=0;i<ids.length;i++){
var cl = ids[i];
X = "<input style='height:22px;width:20px;' type='button' value='X' onclick=deleteRow("+cl+");>"
jQuery("#Table").setRowData(ids[i],{delete:X});
}
},
caption:'Info'
});
});
</script>
<div id="gridContainer">
<table id="Table"></table>
<div id="pager"></div>
</div>

jqGrid and Firefox autocomplete conflict

I have a jqGrid constructed as it follows in the code below:
function radio(value, options, rowObject){
var radio = '<input type="radio" value=' + value + ' name="radioid" />';
return radio;
}
function reloadOnEnter(){
jQuery(':input[name=field1]').keyup(function(e){
if(e.keyCode == 13){
var fieldValue = jQuery(':input[name=field1]').attr('value');
jQuery(':input[name=field1]').attr('value', fieldValue);
jQuery("#listTable").jqGrid().trigger("reloadGrid");
}
});
}
jQuery(function(){
jQuery("#listTable").jqGrid({
url: '$content.getURI("myURI")' + '?userId=$userId&pageNo=0&locale=' + '$locale',
datatype: 'json',
mtype: 'POST',
colNames:['column1', 'column2', 'column3', 'column4', 'column5'],
colModel :[
{name:'name', index:'field', width:'8%', search:false, align:'center', formatter: radio, editable:false, sortable: false, resizable:false},
{name:'name1', index:'field1', width:'23%', sortable: false, resizable:false},
{name:'name2', index:'field2', width:'23%', sortable: false, resizable:false},
{name:'name3', index:'field3', width:'23%', sortable: false, resizable:false},
{name:'name4', index:'field4', width:'23%', sortable: false, resizable:false}
],
width:'768',
height: 500,
pager: '#pagerDiv',
gridview: true,
rowNum: $rowNr,
rowTotal: 500,
sortorder: 'desc',
viewrecords: true,
loadComplete: loadCompleteHandler,
ignoreCase: true
});
});
jQuery(function(){
jQuery("#listTable").jqGrid('filterToolbar',{
stringResult: true,
searchOnEnter: false });
});
I start typing 'he' and the autocomplete window shows me 'hello' (because I previously typed hello). I select 'hello' and hit enter, and still 'he' is submitted in the ajax request.
My reloadOnEnter function is called by the loadCompleteHandler. The interesting thing is that when I query the search field (field1) value is the selected value, but only the typed value is being sent in the request. I would like to send the selected value. How can i achieve this?
EDIT:
The loadCompleteHandler looks like this:
function loadCompleteHandler(){
reloadOnEnter();
jQuery("#listTable").jqGrid('setGridHeight', Math.min(500,parseInt(jQuery(".ui-jqgrid-btable").css('height'))));
}
(I use Apache Velocity as a template engine! That is why I have variables like $variable in the javascript code!)
To your main question: you should use jQuery.val function instead of jQuery.attr('value').
Many other things in your code seams me strange or unclear. It is not clear for me how you use reloadOnEnter in the loadCompleteHandler. If would be good if you include the corresponding code fragment. The value for the url seems me also very strange. You use additionally searchOnEnter: false option of filterToolbar but in the reloadOnEnter you wait for the 'Enter' key. Inside of the body of if(e.keyCode == 13) you get jQuery(':input[name=field1]').attr('value') and then set the same value back. Why?
Probably you could describe in the text of your question a little more what you want to archive with the code?

Add toolbar in the bottom of the header using jqgrid

i want to add one more tool bar with different buttons in the bottom of the header. is there any possibilities?
used
toolbar: [true,"top"] or toolbar: [true,"bottom"]
its showing same toolbars...
in the bottom toolbar contains Add, edit, delete buttons..
i want to make change in top toolbar contains ADD button only.. & bottom toolbar contains Edit, Delete, refresh, etc.,
Thank you,
Probably you misunderstood toolbar parameter of the jqGrid. Perhaps you want use Navigator having cloneToTop: true which works if you define additionally toppager: true jqGrid option. This option clone the pager div on the top of the jqGrid. After this one can easy remove some elements from the top or bottom "toolbar":
jQuery("#list").jqGrid({
// some parameters
toppager: true,
// some other paremeters
}).jqGrid('navGrid','#pager',{cloneToTop:true});
var topPagerDiv = $("#list_toppager")[0];
$("#edit_list_top", topPagerDiv).remove();
$("#del_list_top", topPagerDiv).remove();
$("#search_list_top", topPagerDiv).remove();
$("#refresh_list_top", topPagerDiv).remove();
$("#list_toppager_center", topPagerDiv).remove();
$(".ui-paging-info", topPagerDiv).remove();
var bottomPagerDiv = $("div#pager")[0];
$("#add_list", bottomPagerDiv).remove();
The part "list" of different id names from the code above will be used because we use <table> element with id="list".
From the Demo site:
HTML
Java Scrpt code
jQuery("#myGrid").jqGrid({
url:'server.php?q=1',
datatype: "xml",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:55},
{name:'invdate',index:'invdate', width:90},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right"},
{name:'tax',index:'tax', width:80, align:"right"},
{name:'total',index:'total', width:80,align:"right"},
{name:'note',index:'note', width:150, sortable:false}
],
rowNum:10,
rowList:[10,20,30],
pager: '#pgmyGrid',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"Toolbar Example",
editurl:"someurl.php",
toolbar: [true,"top"] //THIS IS IMPORTANT!
});
jQuery("#myGrid").jqGrid('navGrid','#pgmyGrid',{edit:false,add:false,del:false});
$("#t_myGrid").append("<input type='button' value='Click Me' style='height:20px;font-size:-3'/>");

Adding a button to a row in jqgrid

I want to add a button to each row in my grid that will bring up a new window. Do not see this feature in this very rich control. Must be missing something
Here's one example, from the jqGrid demos page:
jQuery("#rowed2").jqGrid({
url:'server.php?q=3',
datatype: "json",
colNames:['Actions','Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'act', index:'act', width:75,sortable:false},
{name:'id',index:'id', width:55},
{name:'invdate',index:'invdate', width:90, editable:true},
{name:'name',index:'name', width:100,editable:true},
{name:'amount',index:'amount', width:80, align:"right",editable:true},
{name:'tax',index:'tax', width:80, align:"right",editable:true},
{name:'total',index:'total', width:80,align:"right",editable:true},
{name:'note',index:'note', width:150, sortable:false,editable:true}
],
rowNum:10,
rowList:[10,20,30],
imgpath: gridimgpath,
pager: jQuery('#prowed2'),
sortname: 'id',
viewrecords: true,
sortorder: "desc",
gridComplete: function(){
var ids = jQuery("#rowed2").getDataIDs();
for(var i=0;i<ids.length;i++){
var cl = ids[i];
be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=jQuery('#rowed2').editRow("+cl+"); ></ids>";
se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=jQuery('#rowed2').saveRow("+cl+"); />";
ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=jQuery('#rowed2').restoreRow("+cl+"); />";
jQuery("#rowed2").setRowData(ids[i],{act:be+se+ce})
}
},
editurl: "server.php",
caption:"Custom edit " }
).navGrid("#prowed2",{edit:false,add:false,del:false});
You can also do it with a custom formatter.
the current highest answer places the custom button code within loadComplete. it shoudl be gridComplete. The API has likely been changed since the question was answered.
in colModel , you can format using formatter by following code
formatter:function (cellvalue, options, rowObject) {
return "<input type='button' value='somevalue' onclick='some_function'\>";
}
This example might be helpful. See this wiki page and this answer from Oleg.
I am using a jqgrid to display a list of contacts. I have a column named 'Role' with a button that says 'Define', such that you can click on it and redefine that contact's role as primary, secondary, sales, or other.
Originally, the button element was being sent to the grid cell via XML, where $rowid was the id of the row (PHP):
<cell><![CDATA[<button data-idx='{$rowid}' class='contact_role_button btn' title='Define Role...'>Define</button>]]></cell>
This worked fine until I set autoencode: true on the grid. With this option set to true, the column was simply displaying the html.
Craig's answer displayed similar behavior, but a slight variation of it did the trick. I thought I'd share:
gridcomplete: function() {
var ids = $grid.getDataIDs();
for (var i=0;i<ids.length;i++){
var cl = ids[i],
button = '<button data-idx="'+cl+'" class="contact_role_button btn" title="Define Role...">Define</button>';
if (cl.substr(0,2) !== "jq") {
$('#'+cl).find('td[aria-describedby="list_role"]').html(button);
}
}
}
In other words, the setRowData method didn't work with autoencode set to true, but the DOM can be manipulated as desired within the gridcomplete event.

Resources