I am using array data to load a jqGrid with support for pagination. Without the pager property set, the grid loads the data, and looks like this:
The blue bar at the bottom is the pager element. But if the pager property is set, I am getting the following error:
Uncaught TypeError: Cannot read property 'integer' of undefined jquery.jqGrid.min.js:131
> a.updatepager jquery.jqGrid.min.js:131
> U jquery.jqGrid.min.js:67
> M jquery.jqGrid.min.js:81
> (anonymous function) jquery.jqGrid.min.js:135
> jQuery.extend.each jquery-1.10.2.min.js:657
> jQuery.fn.jQuery.each jquery-1.10.2.min.js:266
> b.fn.jqGrid jquery.jqGrid.min.js:33
> createGrid
Please help me find what I am doing wrong.
HTML:
<div>
<table id=grid></table>
<div id=grid_pager></div>
</div>
JS
function createGrid(dataAsArray) {
$('#grid').jqGrid({
caption: caption,
colModel: getColumnModel(),
scrollOffset: 0,
hidegrid: true,
sortorder: 'desc',
recreateForm: true,
height: '100%',
pager: '#grid_pager'
rowNum: 10,
rowList: [5, 10, 20, 40, 80],
viewrecords: true,
multiselect: true,
datatype: 'local',
data: dataAsArray,
localReader: {
repeatitems: true,
cell: '',
id: 0
}
});
$('#grid').jqGrid('navGrid', { edit: true, add: false, del: false, position: 'left' });
.jqGrid('setGridParam', {
rowNum: 5,
rowList: [5, 10, 20, 30, 100, 500]
}).trigger('reloadGrid');
}
ARRAY DATA
[
[ 246802, 'ab', 2, 'Invalid amount' ],
[ '', 12, 3, 'Invalid account' ],
...
]
Your help is highly appreciated!
Thanks
Vivek Ragunathan
Such error occurs typically if one forget to include grid.locale-en.js (or some other file from i18n directory). The file is really required for jqGrid. You should include it before jquery.jqGrid.min.js (or alternatively jquery.jqGrid.src.js). If you forgot to include grid.locale-en.js then the line
fmt = $.jgrid.formatter.integer || {};
will produce the error which you described because $.jgrid.formatter stay undefined (it will be defined in the line) and the expression $.jgrid.formatter.integer will generate the error.
Try this
pager: $('#grid_pager'),
Hope it helps.
Related
I am trying to get the data from a jqGrid (free version and latest version) and it's suppose that I get:
all the data if none is selected
the selected data if any
This is how I am doing it:
$(function () {
var $order_logs = $('#order_logs');
$order_logs.jqGrid({
url: Routing.generate('api_order_logs'),
datatype: "json",
colModel: $colmodel.data('values'),
width: 980,
height: 300,
pager: true,
toppager: true,
hoverrows: true,
shrinkToFit: true,
autowidth: true,
rownumbers: true,
viewrecords: true,
rowList: [25, 50, 100],
rownumWidth: 60,
gridview: true,
sortable: {
options: {
items: ">th:not(:has(#jqgh_order_logs_cb,#jqgh_order_logs_rn,#jqgh_order_logs_actions),:hidden)"
}
},
jsonReader: {
root: 'rows',
page: 'page',
total: 'total',
records: 'records',
cell: '',
repeatitems: false
},
cmTemplate: {autoResizable: true, editable: true},
autoResizing: {compact: true, resetWidthOrg: true},
autoresizeOnLoad: true
}).jqGrid('navGrid', {
edit: false,
add: false,
del: false,
search: false,
refresh: true,
refreshstate: "current",
cloneToTop: true
}).jqGrid('navButtonAdd', {
caption: 'Export',
title: 'Export',
onClickButton: function () {
var filteredData = $order_logs.jqGrid("getGridParam").lastSelectedData,
allData = $order_logs.jqGrid('getGridParam', 'data');
exportData(filteredData, allData);
}
});
});
function exportData(filteredData, allData) {
if (filteredData.length === 0 || allData.length === 0) {
alert('There is no data to export');
return;
}
// Export only the filtered data
if (filteredData.length > 0) {
return;
}
// Export all the grid data
}
For some reason the value of allData is always an empty array and I am not sure since I am using the same code as everyone is using out there and found in a lot of answer here in SO.
UPDATE:
Currently the grid is holding six columns and a set of 60 records as total paginated by 20 each time however you can change the pagination to be 50 or 100.
Can any tell me why is this?
I'd recommend to use loadonce: true, forceClientSorting: true options in case of small dataset: less at 1000 or 10000 rows. It simplifies the code server side and you can use full functionality of free jqGrid. The problem with access to lastSelectedData and data will be solved.
More then that, you can easy use many advanced features like createColumnIndex: true, generateValue: true of generateDatalist: true options and so on. See demos included in README of version 4.14.1. Good and comfortable filtering of the data is, in my option, the part of displaying the data. Having the data locally allows to find unique values and build <select> in the filter bar or to use <datalist> to have autocomplete functionality.
I am having a non-inline edit jqGrid containing an editable drop down column.
I use string as the editoptions.value, e.g. 1:A;A:B.
There is one option having the value same as the key of another option.
Then when I want to edit the record, the selected option is mapped wrongly. I found that this is due to the implementation in createEl function. It check $.trim(sv[1]) === $.trim(vl) to set the selected option also. May I know if there is anyone having the same problem?
I am using jqGrid 4.6.0. My code is as follows. Thanks a lot in advance.
var mydata = [
{ id: '1', col: '1' },
{ id: '2', col: 'A' }
];
var grid = jQuery("#grid");
grid.jqGrid({
data: mydata,
datatype: 'local',
colModel: [
{
name: 'col', width: 100, editable: true, formatter: 'select',
edittype: 'select', editoptions: { value: 'A:B;1:A' }
}
],
editurl: 'clientArray',
height: '100%',
viewrecords: true,
rownumbers: true,
pager: '#pager'
}).navGrid('#pager', { edit: true, add: true, del: false, search: false, refresh: false });
Jqgrid is able to load the data. But, gviing error when it getting loaded.
Error is at below lin in - jqgrid min version:
k=b.jgrid.formatter.integer||{}
saying unable to get property of undefined null reference
Layout has included script file as follow:
<script src='#Url.Content("~/Scripts/jqgrid/jquery-1.10.2.min.js")' type="text/javascript"></script>
<script src='#Url.Content("~/Scripts/jqgrid/i18n/grid.locale-en.js")' type="text/javascript"></script>
<script src='#Url.Content("~/Scripts/jqgrid/jquery.jqGrid.min.js")' type="text/javascript"></script>
Please help me I m just stuck. and spent 3 hours...
I google and found many link where it syas, locale is not added or add it on first line.. but still not got success.
$('#CategoriesGrdList').jqGrid({
ajaxGridOptions: {
error: function () {
$('#CategoriesGrdList')[0].grid.hDiv.loading = false;
alert('An error has occurred.');
}
},
url: '#Url.Action("GetAllCategoriesList", "Categories")/' + 0,
gridview: true,
autoencode: true,
//public JsonResult GetEnrolls(int adClassSchedID,DateTime attendanceDate,int adProgramID,int syCampusID)
postData: { categoryId: 1 },
//postData: { categoryId: rowID, attendanceDate: $('#AttendanceDate').val(), adProgramID: $('#adProgramID').val(), syCampusID: $('#syCampusID').val() },
datatype: 'json',
jsonReader: { root: 'List', page: 'Page', total: 'TotalPages', records: 'TotalCount', repeatitems: false, id: 'Id' },
mtype: 'GET',
colNames: ['Id', 'Code', 'Description', 'IsActive'],
colModel: [
{ name: 'Id', index: 'Id', hidden: true },
{ name: 'Code', index: 'Code', width: 170 },
{ name: 'Description', index: 'Description', width: 170 },
{ name: 'IsActive', index: 'IsActive', width: 170 }
],
pager: $('#CategoriesGrdPager'),
sortname: 'Code',
rowNum: 40,
rowList: [3, 3, 3],
width: '525',
height: '100%',
viewrecords: true,
beforeSelectRow: function (rowid, e) {
return false;
},
sortorder: 'desc'
}).navGrid('#CategoriesGrdPager', { edit: false, add: false, del: false, search: false, refresh: false });
});
Thanks
First of all you should always use jquery.jqGrid.src.js instead of jquery.jqGrid.min.js in case of some error inside of jqGrid.
I suppose that the reason of the error is missing grid.locale-en.js or other language specific file from i18n folder. The language file should be included before jquery.jqGrid.min.js or jquery.jqGrid.src.js. You should validate whether grid.locale-en.js is really loaded. Undefined $.jgrid.formatter could means only missing grid.locale-en.js (see here).
I recommend you to compare your HTML file (especially <head> part) with the demo HTML file from the jqGrid documentation.
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.
I have a Jqgrid with subgrid enabled in my MVC 2 project. Subgrid expands and populates data on the button click. I want to expand and show the subgrid data on page load. So i called exapandSubGridRow method on gridComplete event of the parent grid. Now the problem is, subgrid row is expanded on pageload, but with no data, an empty row appears below the parent grid row. Here is my code, Can anyone help me in fixing the problem.
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
url: '/jqgrid/DynamicGridData/',
datatype: 'json',
mtype: 'GET',
colNames: ['SurveyQnGrpId', 'SurveyQnGroup1'],
colModel: [
{ name:'SurveyQnGrpId', index:'SurveyQnGrpId', width:40, align:'left' },
{ name:'SurveyQnGroup1',index: 'SurveyQnGroup1',width: 400,
align: 'left'}],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'SurveyQnGrpId',
sortorder: "SurveyQnGroup1",
viewrecords: true,
caption: 'My first grid',
subGrid: true,
subGridUrl: '/jqgrid/InnerGridData/',
subGridModel: [{
name: ['SurveyQnGrpId','SurveyQnId', 'SurveyQn', 'SurveyQnCategory',
'MandatoryQn','RadioOption3'],
width: [10,10, 100, 10, 10,10],
align: ['left', 'left', 'left', 'left'],
params: ['SurveyQnGrpId']
}],
gridComplete: function () {
var rowIds = $("#list").getDataIDs();
$.each(rowIds, function (index, rowId) {
$("#list").expandSubGridRow(rowId);
});
}
});
});
</script>
Thanks in advance,
Ancy
I don't know if this was available at the time this question was asked, but I found there is a subGridOptions property, takes an object. One of the properties in that object is expandOnLoad, which, when set to true, will make rows in the parent grid expand when the grid is loaded:
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
url: '/jqgrid/DynamicGridData/',
datatype: 'json',
mtype: 'GET',
colNames: ['SurveyQnGrpId', 'SurveyQnGroup1'],
colModel: [
{ name:'SurveyQnGrpId', index:'SurveyQnGrpId', width:40, align:'left' },
{ name:'SurveyQnGroup1',index: 'SurveyQnGroup1',width: 400,
align: 'left'}],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'SurveyQnGrpId',
sortorder: "SurveyQnGroup1",
viewrecords: true,
caption: 'My first grid',
subGrid: true,
subGridOptions: { expandOnLoad: true },
subGridUrl: '/jqgrid/InnerGridData/',
subGridModel: [{
name: ['SurveyQnGrpId','SurveyQnId', 'SurveyQn', 'SurveyQnCategory',
'MandatoryQn','RadioOption3'],
width: [10,10, 100, 10, 10,10],
align: ['left', 'left', 'left', 'left'],
params: ['SurveyQnGrpId']
}],
gridComplete: function () {
var rowIds = $("#list").getDataIDs();
$.each(rowIds, function (index, rowId) {
$("#list").expandSubGridRow(rowId);
});
}
});
});
See: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:subgrid