Develop Reference

Load local jqGrid data through AJAX

I am using the following code to load data from server side through AJAX and then use local data for displaying it in the jqGrid. I can't use loadonce as it will not support pagination. Please find my code below :
$.ajax({
url: 'dashboard/grid',
type: 'POST',
dataType: 'json',
data: {_token: $('#csrf_token').val(),from:from, to:to},
})
.done(function(data) {
gridData = data;
})
.fail(function() {
console.log("error");
});
var data = $grid = $("#dash_grid"), gridData;
$grid.jqGrid({
datatype: "local",
data: data,
search:true,
jsonReader: {cell:""},
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'id',
sortorder: 'asc',
viewrecords: true,
height: "100%",
caption: "Multiple search with local data",
colNames:['Date','Impressions', 'Revenue'],
colModel:[
{name:'date',index:'date', width:60, sorttype:"int"},
{name:'impressions',index:'impressions', editable: true, width:90},
{name:'revenue',index:'revenue', editable: true, width:100},
]
});
It is not showing any error but not loading any data. If I copy the AJAX response and use it in the place where I am setting the data, it is working. How can I make this working ?

Object doesn't support property or method 'jqGrid' on windows server 2012

the jq grid is running fine on asp.net dev server but on IIS 8 (Windows Server 2012) it is giving the following error: Object doesn't support property or method 'jqGrid'
JS
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#GridList').jqGrid({
autoencode: true,
autowidth: true,
caption: 'List',
cmTemplate: { sortable: false },
datatype: 'json',
jsonReader: { 'repeatitems': false, 'id': 'Id' },
emptyrecords: 'No record Found',
multiselect: true,
gridview: true,
recordpos: 'left',
height: '100%',
loadui: 'block',
pager: '#pager',
rowList: [10, 15, 20, 50],
rowNum: 10,
viewsortcols: [true, 'vertical', true],
shrinkToFit: true,
url: '#Url.Action("List")',
viewrecords: true,
width: '650',
colModel: [
#Html.GetGridColumn(model => model.Id),
#Html.GetGridColumn(model => model.ResultId),
#Html.GetGridColumn(model => model.HostReference),
#Html.GetGridColumn(model => model.FirstName),
#Html.GetGridColumn(model => model.LastName),
#Html.GetGridColumn(model => model.UserID)
]
});
//jQuery('#GridList').jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false });
jQuery("#GridList").navGrid('#pager', { edit: false, add: false, del: false });
jQuery("#btnSubmit").click(function () {
var s;
s = jQuery("#GridList").jqGrid('getGridParam', 'selarrrow');
alert(s);
});
});
</script>
Update:
this is how i call the list:
protected ActionResult List(GridSettings grid)
{
var query = ListQuery.AsQueryable().OrderBy(grid.SortColumn, grid.SortOrder);
if (grid.IsSearch && grid.Where != null && grid.Where.rules != null)
{
query = grid.Where.rules.Aggregate(query,
(current, rule) => current.Where(rule.field, rule.data, rule.op));
}
var count = query.Count();
var data = query.Skip((grid.PageIndex - 1) * grid.PageSize)
.Take(grid.PageSize)
.Select(Mapper.Map<TModel, TListModel>);
// TO DO: Prevent GridDataType.NoDisplay fields from being
// serialised
var result = new
{
total = (int)Math.Ceiling((double)count / grid.PageSize),
page = grid.PageIndex,
records = count,
rows = data.ToArray()
};
var serialiser = new JavaScriptSerializer();
serialiser.MaxJsonLength = int.MaxValue;
//serialiser.RegisterConverters(new[] { new SingleSelectConverter() });
//serialiser.RegisterConverters(new[] { new MultiSelectConverter() });
var jsonString = serialiser.Serialize(result);
return new ContentResult { Content = jsonString, ContentType = "application/json"};
}

What seems that you have issue of reference, just check the jqgrid library path whether that is referenced properly or not.
or may be you could have forgot to reference the library with all other required library.
some side notes:
Since you are using dataType:"json" and i can see that you have not used loadonce: true option in the list which is required when dataType is "json" and you have mentioned your column names, try including those too.:
jQuery('#GridList').jqGrid({
autoencode: true,
autowidth: true,
caption: 'List',
cmTemplate: { sortable: false },
datatype: 'json',
........
loadonce: true
});

Finally i found my answer, i was using third party dll, it's in dll folder, when i depolyed, i had to add to bin folder as well...Thank you for the help

jqGrid gridComplete error reloadGrid on loadcomplete

I was doing some tests and i want to move to another on loadlComplete in, but the grid dont reload.
If i exectue this statement on firebug the grid reload: jQuery("#participations").jqGrid('setGridParam',{page:2}).trigger("reloadGrid");
Why this dont work on loadcomplete?
jQuery("#participations").jqGrid({url:'bd/getParticipations_pageable.php',
datatype: "json",
postData:{contestId:contestId},
width:920,
height: "auto",
scrollOffset:0,
colNames:['','Participação', 'Email','Nome','Telemóvel'],
colModel:[
{name:'id',index:'id', width:210, sorttype:'int', hidden:false, sortable:false},
{name:'participation',index:'participation',sortable:false},
{name:'email',index:'email',width:35,sortable:false},
{name:'name',index:'name',width:35,sortable:false},
{name:'moreInfoBtn',index:'moreInfoBtn', width:43,sortable:false}
],
rowNum:15,
hidegrid: false,
pager: '#participationsPager',
sortname: 'id',
sortorder: "desc",
caption:"Participações",
gridComplete: function(){
var ids = jQuery("#participations").jqGrid('getDataIDs');
var rows = jQuery("#participations").jqGrid('getRowData');
var mydata = $("#participations").jqGrid('getGridParam','data');
jQuery("#participations").jqGrid('setGridParam',{page:2}).trigger("reloadGrid");
}
,loadComplete:function(){
},
}).navGrid("#participationsPager",{edit:false,add:false,del:false,search:false});

Having jqgrid return a link based on the value of the data

I have the following grid defined:
$("#list").jqGrid({
url:'listOpenQueryInXML.php',
datatype: 'xml',
colNames:['Id','name1', 'name2', 'status', 'type'],
colModel:[
{name:'id', index:'id', editable: false, formatter:'showlink', formatoptions:{baseLinkUrl:'continue.php'}},
{name:'name1', index:'name1', editable: false},
{name:'name2', index:'name2', editable: false},
{name:'status', index:'status', editable: false},
{name:'type', index:'type', editable: false}
],
autowidth: true,
sortname: 'id',
viewrecords: true,
pager: null,
sortorder: 'id',
loadonce: false,
caption: 'Open Query',
height: '100%',
xmlReader: { root : "rows", row: "row", repeatitems: false, id: "id" },
Now, what I would like to have is to override continue.php to be a different link based on the content of 'id', or 'status' or any field.
So if
status = NEW link="new.php?id="{id}"
status = STUCK link="helper.php?id={id}"
Etc.
I'm running jqGrid 4.3.1 and jQuery 1.8.16.

You should use custom formatter instead of showlink formatter. In the case you have to construct <a> element yourself based on the cellvalue, options and rowObject parameters of the callback function. Because you use datatype: 'xml' the rowObject parameter will be IXMLDOMElement so to get contain of the status you should use find or children jqGrid method.
I don't tested the code below, but I suppose you can do something like the following
$("#list").jqGrid({
url: 'listOpenQueryInXML.php',
colNames: ['Id', 'name1', 'name2', 'status', 'type'],
colModel :[
{name:'id', formatter: function (cellvalue, options, rowObject) {
return '<a href="' +
($(rowObject).children('status').text() === 'NEW' ?
'new.php' : 'helper.php') +
'?id=' + cellvalue + '">' + cellvalue + '</a>';
},
{name:'name1'},
{name:'name2'},
{name:'status'},
{name:'type'}
],
autowidth: true,
gridview: true,
sortname: 'id',
viewrecords: true,
sortorder: 'id',
caption: 'Open Query',
height: '100%',
xmlReader: { repeatitems: false, id: "id" }
});
Its only an example of the formatter. You can place for example other text in the link which will be displayed the user.
I removed from the jqGrid definition which you use many default options and added the gridview: true options which improves the performance of the grid.

jqGrid not showing rows, only shows total number of rows

I'm having a problem that I can't sort it out.
Please take a look at this image first
As you can see, I have been able to request the JSON data from server. The pager shows that there were 4 records. But the records didn't shows in the table.
This is my javascript code
jQuery("#pickFlex66").jqGrid({
url: root + '<?=$mod?>' + '/listpicker',
datatype: "json",
altRows: true,
mtype: 'POST',
colNames:['Code','Company Name'],
colModel:[
{name:'company_code',index:'company_code', width:100},
{name:'company_name',index:'company_name', width:100}
],
rowNum:10,
width: 540,
height: 310,
rowList:[10,20,30],
pager: '#pagerFlex66',
sortname: 'company_code',
shrinkToFit: false,
viewrecords: true,
sortorder: "desc",
caption:"<?=lang("users_title")?>",
onSelectRow: function(id){
}
});
jQuery("#pickFlex66").jqGrid('navGrid','#pagerFlex66',{edit:false,add:false,del:false,search:false});
And here is my JSON data
{
"page": "1",
"total": 0,
"records": "4",
"rows": [{"id":"5","cell":["55-123","123"]},{"id":"3","cell":["123","IBM"]},{"id":"2","cell":["00000","BDO"]},{"id":"1","cell":["000-00","IT GROUP Inc "]}]
}
Is there a mistake in my javascript? Or maybe in my JSON data?

I agree with Briguy37 that the value "total": 0 is strange and of cause incorrect. Nevertheless jqGrid should do display all data.
I suppose that you have the problem in the part of your code which you not posted here. How you can see from the demo the code which you posted can do read and display the JSON data.

Here's a couple issues...haven't figured out why your results aren't getting populated yet, though:
Total in your returned JSON should be the number of pages. Because it is set to 0, that is why it is displaying 0. Also, you'll probably want to return rowCount as 10 in case you change the number of results per page.

You are missing a json reader, I had the exact same problem.
$("#list").jqGrid({
url : "my-json-table-action' />",
datatype: 'json',
jsonReader: {
root: 'gridModel',
id: 'idTT',
repeatitems: false,
},
resize: false,
hidegrid: false,
data: 'trabajosTerminales',
mtype: 'POST',
height: 'auto',
colNames:['No. de Registro', 'Título', 'Tipo', 'Periodo'],
colModel :[
{name:'numRegistro', index:'titulo', search: 'true', stype:'text', align:'center' searchrules:{required:true}, width:100 },
{name:'titulo', key:'true', index:'titulo', search: 'true', stype:'text', searchrules:{required:true}, width:800 },
{name:'tipo', key:'true', index:'tipo', search: 'true', stype:'text',align:'center', searchrules:{required:true}, width:100 },
{name:'periodo', key:'true', index:'titulo', search: 'true', stype:'text', searchrules:{required:true}, width:100 },
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
viewrecords: true,
gridview: true,
caption: 'Trabajos Terminales dirigidos',
});
jQuery("#list").navGrid('#pager',{edit:false,add:false,del:false});
});
Where the root element is the array that contains your data, in this case I'm returning my data in an array called 'gridModel', the id is not necessary. But you have to make sure to set the root element right, in your case it's called 'rows' instead 'gridModel'.