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 ?

JQGrid data is not loading with xml

I have already seen answer of similar question but it couldn't help. The grid is being displayed and even data is being passed but the only problem is its not getting loaded in jqGrid.
i checked the response in browser, data is being sent in XML format. So, the only problem is its not getting displayed in browser.
var lastsel2;
$(function(){
$("#list1").jqGrid({
//url:'process/roles/GetRoles1.php',
url: 'processDragonDisplay.php',
datatype: 'xml',
mtype: 'GET',
autowidth: true,
height: 'auto',
colNames:['name', 'body', 'active_flag','Action'],
colModel :[
{name:'name', index:'name', search:true, sortable: true}
,{name:'body', index:'body', search:true, sortable: true}
,{name:'active_flag', index:'active_flag', width:30, sortable: true}
,{name: 'choice', index: 'choice',width: 50, sortable: false }
],
pager: '#pager1',
rowNum:10,
rowList:[10,20,30],
sortname: 'name',
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: 'Templates',
editurl: 'processDragonDisplay.php',
onSelectRow: function(id) {
$('#rowID').html(id);
//$('#userId123').attr('value', id);
$('#list2').trigger("reloadGrid");
if(id && id!==lastsel2){
jQuery('#list1').restoreRow(lastsel2);
jQuery('#list1').editRow(id,true);
lastsel2=id;
}
},
loadComplete: function(){
var ids = jQuery("#list1").getDataIDs();
for(var i=0;i<ids.length;i++){
var cl = ids[i];
ce = "<span class='ui-icon ui-icon-pencil' onclick=editData('"+cl+"');></span>";
$("#list1").jqGrid('setRowData', ids[i] , { choice: ce });
}
}
}).navGrid("#pager1",{edit:false, add:false, del:true});
//$("#list1").jqGrid('inlineNav','#pager1', {edit:false, del: false, add: false});
});
Response coming with XML data:
<?xml version='1.0' encoding='utf-8'?><rows><page>1</page><total>1</total><records>7</records><row id='A-000002'><cell>foo</cell><cell>bar yes ok</cell><cell>Y</cell><cell></cell></row><row id='A-000009'><cell>hello</cell><cell>hwq</cell><cell>Y</cell><cell></cell></row><row id='A-000013'><cell>nnnnn</cell><cell>nnnn</cell><cell>n</cell><cell></cell></row><row id='A-000007'><cell>t1</cell><cell>Your appointment for TOken at for will be at </cell><cell>Y</cell><cell></cell></row><row id='A-000008'><cell>t1</cell><cell>Your appointment for TOken at for will be at </cell><cell>Y</cell><cell></cell></row><row id='A-000011'><cell>test2</cell><cell>test2</cell><cell>n</cell><cell></cell></row><row id='A-000015'><cell>wwwww</cell><cell>wwwww</cell><cell>g</cell><cell></cell></row></rows>

Your XML data has invalid format. Check at some of the examples in the wiki. You must map the XML data with the grid using xmlReader.
For example:
xmlReader: { root:"result", row:"invoice" }
Would be the mapping to the following data format:
<invoices>
<request>true</request>
...
<result>
<invoice>
<cell>data1</cell>
<cell>data2</cell>
<cell>data3</cell>
<cell>data4</cell>
<cell>data5</cell>
<cell>data6</cell>
</invoice>
...
</result>
</invoices>

Get column value of a JQgrid table when a row is selected

I want to get values of 2 column in a javascript function when a row is selected(clicked) in jqgrid table.what i want is add a javascript onclick event on each row and javascript function gets the values of col3 and col4 of selected row.my code is
jQuery("#table1").jqGrid({
url:'petstore.do?q=1&Path='+path,
datatype: "json",
colNames:['col1','col2','col3','col4'],
colModel:[
{name:'col1',index:'col1',sortable:true,width:250},
{name:'col2',index:'col2',sortable:true,width:100},
{name:'col3',index:'col3', sortable:true,width:100},
{name:'col4',index:'col4', sortable:true},
],
multiselect: false,
paging: true,
rowNum:10,
rowList:[10,20,30],
pager: $("#pager")
}).navGrid('#pager',{edit:false,add:false,del:false});
can any body help me out from this ?

You should handle the onSelectRow event (which is raised immediately after the row has been clicked) and then you can use getRowData method in order to get selected row data as an array:
$('#table1').jqGrid({
url: 'petstore.do?q=1&Path='+path,
datatype: 'json',
colNames: ['col1', 'col2', 'col3', 'col4'],
colModel: [
{name:'col1', index:'col1', sortable:true, width:250},
{name:'col2', index:'col2', sortable:true, width:100},
{name:'col3', index:'col3', sortable:true, width:100},
{name:'col4', index:'col4', sortable:true}
],
multiselect: false,
paging: true,
rowNum: 10,
rowList: [10,20,30],
pager: $('#pager'),
onSelectRow: function(rowId){
var rowData = $('#table1').jqGrid('getRowData', rowId);
//You can access the desired columns like this --> rowData['col3']
...
}
}).navGrid('#pager', {edit:false, add:false, del:false});
This should get you what you want.

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'.

Jqgrid and Zend framework trouble

I have a list of products on my site. I draw it with jqGrid. Also I have a form, to create new product, or update existing one. Is there any way to set in jqGrid, that when I press 'edit' button in grid, it redirects me to page like
'mysite/product/edit/id/{id}'
Here is my grid script:
$(document).ready(function() {
$("#list").jqGrid({
url:'product/getjson',
datatype: "json",
colNames:['id','Name', 'description', 'Publication date','Picture'],
colModel:[
{name:'id',index:'id', width:55},
{name:'name',index:'name', width:90},
{name:'description',index:'description', width:200},
{name:'pubDate',index:'pubDate', width:200, align:"right"},
{name:'picPath',index:'picPath', width:200, align:"right"},
],
rowNum:10,
rowList:[10,20,30],
pager: '#pager2',
sortname: 'id',
viewrecords: true,
sortorder: "desc", caption: 'Products'});
$("#list").jqGrid('navGrid','#pager2',{edit:true,add:true,del:true});
})

You can change url with respect of onclickSubmit function (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing#editgridrow):
$("#list").jqGrid({
url:'product/getjson',
// ...
});
$("#list").jqGrid('navGrid','#pager2',{edit:true,add:true,del:true},
{ onclickSubmit: function(rp_ge, postdata) {
rp_ge.url = 'mysite/product/edit/id/' + postdata.list_id;
}
});

Try to add editurl field in your config:
$("#list").jqGrid({
editurl:'mysite/product/edit/'
});
id will be passed in row data