I am using this jqgrid
$("#griglia-navgrid").jqGrid( {
url: 'search.do?report='+r,
datatype: "json",
colNames:[ ... ],
colModel:[ ... ],
rowNum:50,
rowList:[20,50,100],
pager: '#pager',
autowidth:true,
height:'auto',
viewrecords: true,
sortname: "MATNR",
sortorder: "asc",
footerrow : true,
userDataOnFooter: true,
jsonReader: {
root:"INVDATA",
page: "CURRPAGE",
total: "TOTALPAGES",
records: "TOTALRECORDS",
repeatitems: false,
id: "0",
userdata: "USERDATA",
}
}); //jqGrid
On server side I calculate the totals and I use "userdata" like this:
"userdata":{"total":1234,"name":"Totals"}
And it's works. Now I need to show 2 footer row with totals. And i try something like this:
"userdata":[{"total":1234,"name":"Totals"},{"total":5678,"name":"Totals"}]
But does not work. Is it possible add two footer rows using "userdata"? How can I do this?
You can use my old answer as a basis of the solution which you need. It shows how to add two rows in the footer.
If you examine the source code of jqGrid for the usage of userDataOnFooter option you would find that in case of usage datatype: "json" it's only one line of code:
if(ts.p.userDataOnFooter) { self.jqGrid("footerData","set",ts.p.userData,true); }
So jqGrid just get the value of userData parameter (the userdata in the JSON response from the server) and uses it as the parameter of footerData method. So you can just remove userDataOnFooter option and uses the approach described in the referenced above answer to add two rows in the footer with the information from userData.
Related
The bellow is my jqGrid config:
$('#grid').jqGrid({
url: '/Panel/Article/latest_articles_json',
datatype: 'json',
fitWindow: SITE.FITWINDOW,
postData: {},
height: $(window).height() - 260,
width: $(window).width() + SITE.FITWINDOW[0],
altRows:true,
gridview: true,
colNames: colNames,
colModel: colModel,
autowidth: true,
pager: '#page',
page: 1,
viewrecords: true,
rowList: [50,100,200],
rowNum: 50,
shrinkToFit:false,
cmTemplate: {sortable:false},
jsonReader: {
root: 'data.items',
records: 'data.records',
total: 'data.totalsize',
page: 'data.page',
id: 'id'
}
});
When I run my web application it result with query string parameters
it requests as ajax with parameters
_search:false
nd:1460779456815
rows:50
page:1
sidx:
sord:asc
Now I have the question with how I can override the query string of "sord:asc" to change to "sord:desc"
And I am tried to modify the config: url: '/Panel/Article/latest_articles_json?sord:desc', but it doesn't work?
The values of parameters sord and sidx come from the jqGrid options sortorder and sortname. Thus you should add sortorder: "desc" option to have sord=desc instead of sord=asc.
To control the names and the existence of other default parameters sent to the server one should use prmNames option. For example
prmNames: { nd: null, search: "isSearch" }
removes nd parameter (likend=1460779456815) and to rename _search parameters to isSearch. I recommend to set cache-control: private, max-age=0 as HTTP header (see the answer and this one).
Please see my js code below
$(function () {
$("#grid").jqGrid({
url: "/Home/GetRoles",
dataType: 'json',
mtype: 'Get',
colNames: ['ID', 'Role Name', 'Active'],
colModel: [
{ key: true, hidden: true, name: 'RoleId', index: 'RoleId' },
{ key: true, name: 'RoleName', index: 'RoleName' },
{ key: true, name: 'Active', index: 'Active' }
],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [10, 20, 30, 40],
height: '100%',
viewrecords: true,
caption: 'Roles',
emptyrecords: 'No records to display',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
id: "0"
},
autowidth: true,
multiselect: false
});
});
and output of Get request
{"total":2,"page":1,"records":13,"rows":[{"RoleId":1,"RoleName":"Role1","Active":true},{"RoleId":2,"RoleName"
:"Role 2","Active":false},{"RoleId":13,"RoleName":"Role 3","Active":false},{"RoleId":3,"RoleName":"Role
4","Active":false},{"RoleId":4,"RoleName":"Role 5","Active":false},{"RoleId":5,"RoleName":"Role 6","Active"
:false},{"RoleId":6,"RoleName":"Role 7","Active":false},{"RoleId":7,"RoleName":"Role 8","Active":false
},{"RoleId":8,"RoleName":"Role 9","Active":false},{"RoleId":9,"RoleName":"Role 10","Active":false}]}
but grid is always empty
You should fix dataType: 'json' to datatype: 'json', the property key: true could be placed only in one column. You should remove it from columns RoleName and Active. Your JSON data contains line feed in the middle of the string "Role 4". Have the JSON data really new line character on the place? It would be the error too.
Moreover you should always write the information about the version of jqGrid you use and from which fork (free jqGrid, Guriddo jqGrid JS or an old jqGrid in version <=4.7). The problem existing in one version can not exist in another one. Moreover different version and forks have different options implemented and so to suggest you some workaround one need to know the version and the fork which you use. I develop free jqGrid fork, and can recommend you to you the latest version (4.13.0) of jqGrid from the fork.
I have a grid with following options where "id" I want to set for a row need to be custom formatted.
There are two columns libCode and matCode.
Combining data of these two I want to create Id for row as follows:-
" ;libCode=[libcode];matCode=[matCode]"
But key=true option is not working with this field having its data set by custom formatter.
It returns the row no. if no xmlmap option is defined, or returns data from xmlmap element from XML response but not what custom formatter sets.
I want to know that why key option is not working and is there any other way I could implement this.
Here is my code for grid:
$(function () {
$("#list").jqGrid({
url: "./TestServlet?operation=RetrieveAll&accept=List",
datatype: "xml",
mtype: "GET",
colNames: ["Lib Code", "Mat Code", "Row Id"],
colModel: [ { name: "libCode", hidden:true, xmlmap:"libCd"},
{ name: "matCode", hidden:true, xmlmap:"matCd"},
{ name: "rowId", formatter:formatName , key:true}
],
xmlReader:{
root:"libs",
row:"lib",
repeatitems: false
},
pager: "#pager",
rowNum: 10,
rownumbers: true,
rowList: [10, 20, 30],
sortname: "libCd",
sortorder: "desc",
viewrecords: true,
gridview: true,
autoencode: true,
loadonce: false,
caption: "Library"
});
});
function formatName(cellValue, options, rowObject)
{
return " ;libCd="+$(rowObject).find('libCd').text()+";matCd="+$(rowObject).find('matCd').text();
}
Set property loadonce to true instead of false i.e. loadonce: true.
I am using a jqgrid but am having trouble positioning to a specific page. I have seen a couple of examples using reloadGrid which I have tried but it doesn't work. I have a large data set that is paged. If I try to go to page 76 of my data set it acts like it is trying to do it as the "View" count at the bottom is correct however the grid is displayed empty (even though my JSON data looks correct). I notice the scroll bar is still positioned to the top and if I touch it it automatically reloads back to page 1. Am I missing something?
Here is my grid definition:
$("#list1").jqGrid({
url: 'jqgrid.php?cmd=getrecs',
editurl: 'jqgrid.php?cmd=editrec',
datatype: 'json',
colNames:['Branch', 'Description', 'Type', 'Active' ],
colModel :[
{name:'rbranch',
index:'rbranch',
sortable:true,
editable:true
},
{name:'des',
index:'des',
sortable:true,
editable:true
},
{name:'type',
index:'type',
sortable:true,
editable:true
},
{name:'status',
index:'status',
sortable:false,
editable:true
}
],
pager: '#pager1',
sortname: 'rbranch',
sortorder: 'asc',
rowNum: 100, // Only fetch 100 at a time
viewrecords: true,
scroll: 1,
sortable: true,
caption: 'Scheduling Resources'
});
$("#list1).navGrid("#pager1",
// Turn on the icons
{edit:true,
add:true,
del:true,
search:true,
refresh:true,
refreshstate:'current',
view:true
},
// Edit dialog parameters
{reloadAfterSubmit: false,
closeAfterEdit: true
},
// Add dialog parameters
{reloadAfterSubmit: true,
closeAfterAdd: true
},
// Delete dialog parameters
{reloadAfterSubmit: false},
// Search dialog parameters
{},
// View dialog parameters
{}
);
To go to page 76 I am trying this:
$("#list1").trigger("reloadGrid",[{page:76}]);
You use scroll: 1 option. It's a special virtual scrolling mode. In the mode many things work in another way or not works at all. You can try to remove the option and use standard paging.
I am using jqGrid for my data table solution. Below are the configuration codes.
$(function() {
$("#submitInput").click(function() {
alert("I am called...")
jQuery("#list").jqGrid({
datatype: "json",
url: "http://localhost:1201/admin/someURL.htm",
mtype:"POST",
height: "auto",
colNames:["Column 1", "Column 2", "Column 3", "Column 4", "Column 5"],
colModel:[
{name:"col1", index:"col1", sortable:true, resizable:false},
{name:"col2", index:"col2", sortable:true},
{name:"col3", index:"col3", sortable:false, resizable:false},
{name:"col4", index:"col4", sortable:true, resizable:false},
{name:"col5", index:"col5", sortable:true, resizable:false}
],
sortname:'col1',
sortorder:'asc',
pager: $('#pager'),
rowNum:10,
viewrecords: true,
rowList:[10,20,30],
caption: 'Some Grid Values',
jsonReader: {
root: "responseData",
page: "currentPage",
total: "totalPages",
records: "totalFetchedRecords",
repeatitems: true,
cell: "rowContent",
id: "rowID"
},
gridComplete: function() {
alert("Loading done...");
}
});
});
});
My JSON data is coming in the following format:
"currentPage":"1","responseData":[
{"rowContent":["Col1_Val_000001","Col2_Val_1","Col3_Val_1","Col4_Val_1","Col5_Val_1"],"rowID":"Col1_Val_000001"},
{"rowContent":["Col1_Val_000002","Col2_Val_2","Col3_Val_2","Col4_Val_2","Col5_Val_2"],"rowID":"Col1_Val_000002"}
], "totalFetchedRecords":"50","totalPages":"5"}
In my HTML, there is a button with id "submitInput" and a table with id "list".
Somehow, this data is not loaded into the grid. What is the reason?
Probably you should don't create jqGrid inside of click handle. You should do this one time outside of click handle and call jQuery("list").trigger('reloadGrid') inside of the handler. If at the beginning the data should be not loaded in the grid, you can use datatype: 'local' an the beginning. If it needed, you can makes div with jqGrid sometimes visitable and sometimes invisible using using hide() and show() jQuery functions. Inside of click handler you can change the datatype to 'json' with respect of setGridParam() and then call trigger('reloadGrid'). In a lot of situation you also change some parameters of URL before calling trigger('reloadGrid') (see Should one replace the usage addJSONData of jqGrid to the usage of setGridParam(), and trigger('reloadGrid')?), but probably you need it not in your case.