I have a jqgrid. I need to pull the json data from jqgrid after the client sorted the grid. Pulled json data should be the sorted version and not the original. How can I do this?
Here is my jqgrid source
jQuery("#myGrid").jqGrid({
datastr: jsonData,
datatype: 'jsonstring',
jsonReader: { repeatitems: false, root: function(obj) { return obj; }},
colNames: [ 'Column 1',
'Column 2'],
colModel: [
{ name: 'prop1', index: 'prop1'},
{ name: 'prop2', index: 'prop2'},
],
headertitles: true,
sortable: true,
pginput: true,
rownumbers: true,
rowNum: 5,
rowList: [5,20, 100, 10000],
pager: '#pager',
width:'600',
height:'300',
shrinkToFit:false,
viewrecords: true,
loadonce: true
});
Currently when I alert(jsonData) in the gridComplete it shows the original json data and not the sorted one.
For those who come across this problem, you can just take the data parameter passed to the loadComplete event of jqGrid. This data is the sorted version of the grid's data source.
Related
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 succeeded to load data from server in spring framework with pagination but my searching/finding records and filter bar is not working.
But if i make loadonce=true then the filter or searching working fine.
My code for my jsp is:
var allColumnNames=["Sr. No","contactName", "city", "country"];
var grid = jQuery('#list');
grid.jqGrid({
url:'customerData.html',
datatype: 'json',
mtype: 'GET',
loadonce: false,
colNames: allColumnNames,
colModel: [
{ name:'id', index:'id', jsonmap:"id", width:20,index:'id', search:true, stype:'int' ,hidden:true},
{ name: "contactName" ,index:'contactName', width:160, search:true, stype:'text' },
{ name: "city",index:'city', width:160, search:true, stype:'text' },
{ name: "country" ,index:'country', width:160, search:true, stype:'text' }
],
caption: 'Customer Details',
height: 'auto',
gridview: true,
rownumbers: true,
viewrecords: true,
pager: '#pager',
rowNum: 10,
rowList: [5, 10, 20, 50],
rownumbers: true
});
$("#search").click(function() {
var searchFiler = $("#filter").val(), f;
if (searchFiler.length === 0) {
grid[0].p.search = false;
$.extend(grid[0].p.postData,{filters:""});
}
f = {groupOp:"OR",rules:[]};
f.rules.push({field:"contactName",op:"cn",data:searchFiler});
f.rules.push({field:"city",op:"cn",data:searchFiler});
grid[0].p.search = true;
$.extend(grid[0].p.postData,{filters:JSON.stringify(f)});
grid.trigger("reloadGrid",[{page:1,current:true}]);
});
I am new to jqGrid, Please help me in above problem.
Thanks in advance!
When you put loadonce=true jqGrid only makes one request that takes all the data, and then if you filter, sort, search... are controlled by jqGrid in the frontend.
But if loadonce=false, only loads the data needed at this moment, and every time jqGrid needs new data, it sends another request to the server with differents parameters.
So I can guess that your server file "customerData.html", it's not ready to answer all the different questions.
Here http://trirand.com there are a lot of jqGrid examples an most of them have the server side code.
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 have a jqgrid with inline client-side search. When the database returns 0 records I am trying to hide the grid and show a custom message. The problem is that now when I use the filters the same thing happens. I need to get the number of rows from the back-end response and none of the below lines work. When the page loads I get 5 and 5, and when I filter I get 0 and 0. How can this be achieved?
.jqGrid('getGridParam', 'records')
.jqGrid('getGridParam', 'reccount')
var contratsAC=$("#ContratsAC");
contratsAC.jqGrid({
url:'<?php echo base_url().'rest/AC_Rest/get_contrats/'?>',
mtype : "post",
datatype: "json",
colNames:['Nr dossier','Type','Nom','Statut','Date creation','Date derniere maj','Commentaires','Auteur'],
colModel:[
{name:'nr_dossier',index:'nr_dossier',search:false, align:"center"},
{name:'type',index:'type',search:false, align:"center"},
{name:'nomClient',index:'nomClient',search:false, align:"center"},
{name:'statut',index:'statut',search: true, sortable: false, width:180, stype:'select',
searchoptions:{ value:statuts}, editable: false},
{name:'date_cre',index:'date_cre',search:false, align:"center"},
{name:'dern_date_maj',index:'dern_date_maj',search:false, align:"center"},
{name:'commentaires',index:'commentaires',search:false, align:"center"},
{name:'auteur',index:'auteur',search:false, align:"center"}
],
rowNum:10,
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
id: "nr_dossier",
userdata: "userdata"
},
width: 960,
height: "100%",
rowList:[10,20,30],
pager: '#pager1',
sortname: 'nr_dossier',
viewrecords: true,
rownumbers: true,
gridview: true,
loadonce: true,
loadComplete: function(data){
alert(contratsAC.jqGrid('getGridParam', 'records'));
alert(contratsAC.jqGrid('getGridParam', 'reccount'));
if (0==contratsAC.jqGrid('getGridParam', 'records'))
{
contratsAC.jqGrid('GridUnload');
$("#contratsACNoDataMessage").html('<span>Aucun enregistrement a afficher.</span>');
}
else $("#ContratsACContainer").show();
},
pagination:true,
}).navGrid('#pager1',
{add: false,
edit:false,
del:false});
contratsAC.jqGrid('filterToolbar',{searchOnEnter:true,stringResult: true});
You may try getting the length of the data array holded by the grid:
$("#ContratsAC").jqGrid('getGridParam', 'data').length;
The below will give you all the rows - initial data source based
contratsAC.jqGrid('getGridParam', 'records');
To get the number of rows on the current page, lets say after filtering, use
contratsAC.jqGrid('getGridParam', 'reccount');
To get all the records across all pages after filtering, use below
loadComplete: function (gridData) {
var isSearchPerformed = $grid.getGridParam("postData")._search;
if (isSearchPerformed) {
$("#spanFilterTotal").text(gridData.records);
}
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
jqgrid client side sorting with server side paging - data disappears
I have a jqGrid and trying to enable client side sorting w/ server side paging. Client side sorting will work if loadonce:true but paging will not work.
If loadonce:false and I try to sort, the data disappears from the grid. Any ideas what I am missing?
jQuery("#grid").jqGrid({
url: getUrl(), // url w/ querystring params
datatype: 'json',
mtype: "GET",
colNames: ['Name', 'Title', 'Office'],
colModel:
[
{ name: 'Employee.EmployeeName', index: 'Employee.EmployeeName', sortable: true, sorttype: 'text' },
{ name: 'Employee.EmployeeTitle', index: 'Employee.EmployeeTitle', sortable: true, sorttype: 'text'},
{ name: 'Employee.EmployeeOffice', index: 'Employee.EmployeeOffice', sortable: true, sorttype: 'text' }
],
width: 600,
height: 'auto',
scrollOffset: 0,
rowNum: 5,
pager: jQuery("#pager"),
rowList: [10, 25, 50],
sortname: 'Employee.EmployeeName',
sortorder: "asc",
loadtext: "Loading....",
emptyrecords: "No records to view",
//loadonce: true, // client side sorting works but paging doesn't work
sortable: true,
viewrecords: true,
jsonReader: {
repeatitems: false
},
loadComplete: function () {
jQuery("#grid").jqGrid('setGridParam', { datatype: 'local' });
jQuery("#grid").trigger("reloadGrid");
},
onPaging: function () {
jQuery("#grid").jqGrid('setGridParam', { datatype: 'json' });
}
});
In my experience, if you do anything server side in JQGrid using JQGrid events, you have to recreate the data on the server and rebind it to JQGrid control. The means you will have to capture the sorting information and account for that as well. The Trirand forums ( http://www.trirand.net/forum/ ) are monitored by the authors of JQGrid. You may get better help there.
Client side sorting will work if loadonce:true but also paging will work fine .
$(document).ready(function() {
$("#user-list").jqGrid({
datatype: "local",
height: "auto",
autowidth: true,
ignoreCase: true,
colNames: ['Emp Id', 'First Name', 'Last Name'],
colModel: [
{name:'emp_id', index:'emp_id', width:55, sorttype:"int"},
{name:'first_name',index:'first_name', width:160, sorttype:"text"},
{name:'last_name',index:'last_name', width:160, sorttype:"text"},
],
pager: '#user-list-pager',
rowNum:10,
rowList:[10,25,50,100],
sortname: 'first_name',
sortorder: 'asc',
viewrecords: true,
caption: 'Users',
data:<%= raw #users_jqgrid_data.to_json %>
});
jQuery("#user-list").jqGrid('navGrid','#user-list-pager',{del:false,add:false,edit:false},{},{},{},{multipleSearch:true});
} );
I just tried a smallcode an paging and sorting works fine here.hope it helps
Thanx