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'.
Related
I use the following code for bind the values in jqgrid.
And i create one link button for access the Particular Action Method.
I need to pass the firstcolumn value to the action method.
But ,If i use this Following href='#Url.Action("ViewApplicants", "HR")?JobsID="+rowObject[0]+" '.It show the undefined Value .How to solve this?
<div>
<table id="Jobtable"></table>
<div id="jQGridPager"></div>
<div id="dialog" title="View Job Detail"></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#Jobtable").jqGrid({
url: '/HR/PassJsonJob/',
datatype: "json",
mtype: 'GET',
colNames: ['Job ID', 'Job Title', 'Job Experience', 'Job Location', 'ViewApplicants'],
colModel: [
{ name: 'JobsID', index: 'JobsID', width: 150, align: 'left', editable: true },
{ name: 'JobTitle', index: 'JobTitle', width: 150, align: 'left', editable: true },
{ name: 'JobExperience', index: 'JobExperience', width: 150, align: 'left', editable: true },
{ name: 'JobLocation', index: 'JobLocation', width: 150, align: 'left', editable: true },
{
name: 'ViewApplicants', index: 'ViewApplicants', width: 150, sortable: false,
formatter: function (cellvalue, options, rowObject) {
alert(rowObject)
return "<a href='#Url.Action("ViewApplicants", "HR")?JobsID="+rowObject[0]+"'>View Applicants</a>";
}
}
],
rowNum: 10,
rowList: [10, 20, 30],
viewrecords: true,
loadonce: true,
gridview: true,
pager: "#jQGridPager",
cellEdit: false,
rowNumbers: true,
width: 1000,
caption: 'Applied Jobs',
viewrecords: true
})
$('#Jobtable').jqGrid('navGrid', '#jQGridPager',
{
edit: true,
add: false,
del: false,
view: false,
search: false
});
});
</script>
It's important to know the format of the server response from the URL /HR/PassJsonJob/. The format of rowObject corresponds to the format of items from the server response. So it could be that rowObject.JobsID instead of rowObject[0] would correct way to access JobsID property. Because you use loadonce: true the format of rowObject could be rowObject[0] at the first load. Later, for example, at local paging or sorting of data, the format of rowObject will be object with JobsID property, so rowObject.JobsID will be correct.
So the usage of rowObject.JobsID or rowObject[0] || rowObject.JobsID could fix your problem.
One more option could be to use the property key: true in the definition of JobsID column in colModel. One can use the property only if JobsID contains unique values in every row. In the case jqGrid will use the value from JobsID column as rowid: the value of id attribute assigned to the rows (<tr> elements) of the grid. In the case one could use options.rowId to access the JobsID value.
UPDATED: One more option exists in free jqGrid fork, which I develop since the end of 2014. The 2-d parameter (options) of the custom formatter has the property rowData, which contains the same information like rowObject, but it has always object format. Thus it's safe to use options.rowData.JobsID instead of rowObject[0] || rowObject.JobsID. One don't need to use the 3-d parameter of the the custom formatter at all. Free jqGrid didn't changed the format of the 3-d parameter to have the best upwards compatibility to the previous versions of jqGrid.
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 have a jqGrid that is filled by a JSON request, the thing is that the request back to the server in base64 encoded data and I need to decode the data before assign it to the grid.
Basically I need something like this:
$( "#grid" ).jqGrid( {
datatype: "json",
colNames: ["id", "Num", "Name", "Code"],
colModel: [
{ name: "id", index: "id", width: 30, sortable: true, resizable: false },
{ name: "num", index: "num", width: 150, sortable: true, resizable: false },
{ name: "name", index: "name", width: 250, sortable: true, resizable: false },
{ name: "code", index: "code", width: 150, sortable: true, resizable: false },
],
multiselect: true,
width: "760",
height: "100%",
heightMetric: "%",
shrinkToFit: false,
rowNum: 20,
rowList: [20,30,60],
pager: "#pager",
sortname: "id",
viewrecords: true,
sortorder: "asc",
headertitles : true,
caption: "Loading...",
beforeProcessing: function(data){
data = decompress(data); // Like this
}
})
The callback function beforeProcessing is the correct place where you can implement all what you need. The exact implementation depends on the format of the data returned by the server. If one uses datatype: "json" then the data returned from the server are typically an object which is serializes as JSON string. jqGrid uses internally jQuery.ajax which automatically decode the JSON string and convert it back to object. So the input data parameter of beforeProcessing callback is the object returned from the server. If you don't use any additional jsonReader option of jqGrid then jqGrid wait the input data in the standard format described here. So you need just fill the expected properties of data object (rows, page, total and records) based on the input data returned from the server. You don't posted any example of the data returned from the server, so I could give you no more detailed examples.
Here append similar questions but I cannot find answer to my one:
In html is
table id= grid and div id=pager:
Also I have mine js code:
var myGrid = $("#grid").jqGrid({
url: _options.gridFetch,
datatype: "json",
colModel:[
{name:'id',index:'id', width:55},
{name:'name',index:'name', width:555, editable:true},
{name:'is_promoted',index:'is_promoted', width:165, editable:true, formatter: $.adminCategoryEntries._boolFormatter, edittype: 'select', editoptions:{value:"1:Yes;0:No"}},
{name:'is_in_shop',index:'is_in_shop', width:165, editable:true, formatter: $.adminCategoryEntries._boolFormatter, edittype: 'select', editoptions:{value:"1:Yes;0:No"}},
{name:'actions', formatter:'actions', width: 85, formatoptions:{keys:true}},
],
pager: '#pager',
jsonReader : { repeatitems: false } ,
rowNum: 10,
rowList: [10, 20, 500],
viewrecords: true,
autowidth: true,
sortname: 'id',
sortorder: 'desc'
});
myGrid.jqGrid('navGrid','#pager',{edit:false,add:false,del:false,search:false});
I've use code from other stackoverflow tutorial.
And here is my issue: If I try to change number of showed rows in my navigator I can see all stored data (86 rows) but if I set rows to i.e 10 (value less than rows number)per page I always see in my navigator:
page 1 of 5
and I cannot switch it to another it always stays on first
json info:
>page: 1
>records: "86"
>rows: [{id:3, name:Ulkofilee/Naudanliha, is_promoted:1, is_in_shop:1},…]
>total: 5
thanks in advance
Radek
Are you getting the data from a server method you can control? It's somewhat cryptic, but the data coming from your _options.gridFetch needs to have a property named "total" defined that specifies the current page that should be viewed.