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 ?
Related
I am trying to populate one of the columns using select box in jqgrid. Below is the code.
$(document).ready(function(){
$("#grid").jqGrid({
url: "./info",
datatype: "json",
mtype: "GET",
ajaxSelectOptions:{
type: "GET",
dataType: "json",
success: function (result) {
console.log(result);
}
},
colNames: ["DeptId", "DeptName", "StuId", "StuName", "StuDoj"],
colModel: [
{ name: "deptId", hidden:true },
{ name:"deptName", width:90, editable:true, edittype:'select', formatter:'select', editoptions:{
dataUrl:'./getDepts',
buildSelect: function(res){
console.log(res);
var s='<select id="dept" name="dept">'
$.each(res,function(idx,obj){
$('#dept')
.append($('<option>', { value : obj.deptId })
.text(obj.deptName));
});
return s+"</select>";
}
}},
{ name: "studentId", hidden:true },
{ name: "studentName", width: 80,editable:true },
{ name: "studentDoj",width: 90,editable:true }
],
pager: "#pager",
rowNum: 5,
rowList: [5, 10, 20],
sortname: "empId",
sortorder: "asc",
sortable:true,
viewrecords: true,
gridview: true,
caption: "MyGrid",
jsonReader: {
repeatitems: false,
id: "empId",
root: function (obj) { return obj; },
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.length; }
}
});
$("#grid").jqGrid('navGrid','#pager',{add:false,view:true,search:true});
})
In the editOptions for colModel 'deptName' the dataUrl is not called to populate the select box. The jqgrid is populated using /info resturl which fetches the deptName for a particular student. I want the deptName to be of type select box and its value should be same as deptName fetched using info rest url
It should be called, but your data will be newer filled, since you overwrite the success function in ajaxSelectOptions.
In order to get response, please comment the success function or remove it
$("#grid").jqGrid({
url: "./info",
datatype: "json",
mtype: "GET",
ajaxSelectOptions:{
type: "GET",
dataType: "json"
},
....
});
UPDATE: With small changes your code is working fine. Here is a link to your code
Note that the formatter does not have option dataUrl. It is only available in in editing.
I have a code that uses to load data passing from the sever side into a jQGrid. I'm using an AngularJS factory method to initiate the call and return received json document. I'm getting Uncaught TypeError: Cannot read property 'loadDataToGrid' of undefined error in chrome console.
JQuery function to load data into jQGrid :-
$(function ($scope,$http,$rootScope,retriveDataFromServer) {
$("#list").jqGrid({
url: retriveDataFromServer.loadDataToGrid($http),
datatype: "json",
mtype: "GET",
colNames: ["Employee First Name", "Employee Last Name", "Contact No"],
colModel: [
{ name: "fname", width: 55 },
{ name: "lname", width: 60 },
{ name: "contactNo", width: 55, align: "right" },
],
pager: "#pager",
rowNum: 10,
autowidth: true,
rowList: [10, 20, 30],
sortname: "fname",
sortorder: "desc",
viewrecords: true,
gridview: true,
autoencode: true,
caption: "Employee Data Grid"
});
});
AngulaJS factory method :-
empApp.factory('retriveDataFromServer',function(){
return{
loadDataToGrid: function($http){
return $http({
method : 'GET',
url : 'http://localhost:8080/IdeaOne/viewall'
}).then(function(response){
return response;
})
}
}
});
html :-
<div ng-app="empApp">
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
</div>
when I directly load my data by specifying my url inside jQuery method it works fine.
Someone please point out where did I go wrong.
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});
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>
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'.