I'm using jqgrid 4.1.2, a sample of the code used to create the grid is shown below. Everything works fine until I try to set frozen columns at which point a runtime error is thrown - ' jqGrid - No such method: setFrozenColumns ' - can anyone see why this is happening ?
jQuery("#grid").jqGrid({
url: '#Url.Action("LoadGrid")',
editurl: '#Url.Action("UpdateGrid")',
datatype: 'json',
shrinkToFit: false,
autowidth: true,
mtype: 'POST',
..... columns ....
rowNum: 100,
rowList: [5, 10, 20, 50],
sortname: 'Id',
sortorder: "desc",
viewrecords: true,
caption: 'Instances',
height: 225
});
$("#grid").navGrid("#pager", { edit: true, add: false, del: false, search: false });
$("#grid").jqGrid('setFrozenColumns');
It seems to me that frozen columns are supported started with 4.3.0 version of jqGrid. To be able to use the feature you have to update jqGrid which you use.
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'd like to change the layout of the pager, so that the VCR buttons are all grouped together, followed by the Page number input field, then the number of rows drop-down. How would I accomplish this?
Here is the code I'm currently using to display the jqgrid. Its the standard JavaScript code:
$(function(){
$("#" + listName).jqGrid({
url: url,
datatype: 'json',
mtype: 'GET',
colNames: columnNames,
colModel: columnModel,
pager: pagerName,
rowNum: displayRows,
rowList: rowList,
sortname: initSortCol,
sortorder: initSortOrder,
viewrecords: true,
multiselect: multiSelect,
gridview: true,
caption: caption,
height: height,
jsonReader: {
root: 'data',
page: 'currentPage',
total: 'totalPages',
records: 'totalRows',
repeatitems: false,
id: dataModelRowId
}
});
jQuery("#" + listName).jqGrid('navGrid','#' + pagerName,{edit:false,add:false,del:false,search:false});
Example of jqgrid with page number, number of records per page.
Code:
$(document).ready(function(){
//jqGrid
$("#librariesList").jqGrid({
url:'<%=request.getContextPath()%>/Admin/getAllLibraries',
datatype: "json",
colNames:['Id','Edit','Type','Created Date', 'Modified Date', 'Url', 'Use Url'],
colModel:[
{name:'libraryId', index:'libraryId',search:false, width:30,sortable: false,hidden:true},
{name:'libraryId', index:'libraryId',search:false, width:30,sortable: false, formatter: editLink},
{name:'type',index:'type',width:80},
{name:'createdDate',index:'createdDate',width:150},
{name:'modifiedDate',index:'modifiedDate',width:150},
{name:'url',index:'url',width:150},
{name:'useUrl',index:'useUrl',width:50},
],
rowNum:20,
rowList:[10,20,30,40,50],
rownumbers: true,
pager: '#pagerDiv',
sortname: 'createdDate',
viewrecords: true,
sortorder: "asc",
autowidth:'true',
});
$('#gridContainer div:not(.ui-jqgrid-titlebar)').width("100%");
$('.ui-jqgrid-bdiv').css('height', window.innerHeight * .55);
$('#load_librariesList').width("130");
$("#librariesList").jqGrid('navGrid','#pagerDiv',{edit:false,add:false,del:false},{},{},{},{closeAfterSearch:true});
$(".inline").colorbox({inline:true, width:"20%"});
});
function editLink(cellValue, options, rowdata, action)
{
return "<a href='<%=request.getContextPath()%>/Admin/editLibrary/"+ rowdata.libraryId + "' class='ui-icon ui-icon-pencil' ></a>";
}
jggrid is displayed like below:
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. 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.
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