Related
So, I am using jqGrid and due to the nature of this project, I need to build out the colModel dynamically. Meaning, I need to build the model itself dynamically. I am retrieving data fine with my JSON call.
So, I build an array of objects and then assign that array to the colModel property. No errors, but the data doesn't show up.... I am doing something very similar with colNames and it works fine. Does anyone see what I am missing? I have worked on this yesterday afternoon and all morning today and can't find any reason it shouldn't work.
As you can see, it am assigning the siteVal array at the top of my code to the colModel property.
var siteVal = [{name: 'InvtId', index: 'InvtId', width: 20, editable: false, sortable: false, align: 'left', hidden: true}];
siteVal.push({name: 'Descr', index: 'Descr', width: 320, sortable: false, editable: false, align: 'left'});
siteId.forEach(function(site){
curSite = site.substr(0,1)+"Val";
siteVal.push({name: curSite, index:curSite, width: 20, editable: false, sortable: false, align: 'left', hidden: true});
})
siteVal.push({name: 'Qty', index: 'Qty', width: 100, editable: true, sortable: false, align: 'right', hidden: true});
var colData = ['', 'Description'];
colData = colData.concat(siteId);
colData = colData.concat('Quantity');
console.log(colData);
jQuery("#list3").jqGrid({
url: 'OrdersInput.php?do=getdelvprice&state=' + $("#State").val() + '&city=' + $("#City").val() + '&FType=' + $("#FType").val() + '&siteid=' + $("#Plant").val(),
datatype: 'json',
mtype: 'GET',
colNames: colData,
colModel: siteVal,
loadonce: true,
height: 525,
width: 605,
rowNum: 1000,
key: false,
cellEdit: true,
cellsubmit: 'clientArray',
gridComplete: function() {
$("#MsgDel2").html("");
}
});
In using console.log to see the array right after I build it, this is what I get.
{"name":"InvtId","index":"InvtId","width":20,"editable":false,"sortable":false,"align":"left","hidden":true},
{"name":"Descr","index":"Descr","width":320,"sortable":false,"editable":false,"align":"left"},
{"name":"TVal","index":"TVal","width":20,"editable":false,"sortable":false,"align":"left","hidden":true},
{"name":"MVal","index":"MVal","width":20,"editable":false,"sortable":false,"align":"left","hidden":true},
{"name":"PVal","index":"PVal","width":20,"editable":false,"sortable":false,"align":"left","hidden":true},
{"name":"DVal","index":"DVal","width":20,"editable":false,"sortable":false,"align":"left","hidden":true},
{"name":"WVal","index":"WVal","width":20,"editable":false,"sortable":false,"align":"left","hidden":true},
{"name":"BVal","index":"BVal","width":20,"editable":false,"sortable":false,"align":"left","hidden":true},
{"name":"Qty","index":"Qty","width":100,"editable":true,"sortable":false,"align":"right","hidden":true}
This looks exactly as I think it should look in that it completely mimics the existing code where the colModel is defined statically. The thing is this must be dynamic to account for future growth...
I feel like a real idiot..... I was copying text from another line of code and didn't realize that I had included the last attribute... hidden:true
So, of course it wasn't showing up as I was telling it not to show. Guess that is what I get for copying and pasting code.
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 am using jqGrid with toolbar searching enabled. I have configured my search option as 'eq'. However, when I input a decimal number on the search bar, the valid record does not show.
For example:
When I input 12, the record with 12.00 shows, this is correct.
When I input 12.50 the record with 12.50 does not show, this is incorrect.
I experimented with sorttype as number, formatter with decimal places, but I can't seem to get it to work.
Grid definition:
$("#productListingGrid").jqGrid({
datastr: products,
datatype: 'jsonstring',
jsonReader: {
root: 'products',
repeatitems: false,
cell: 'products.branches',
id: 'productNumber'
},
loadonce: true,
// -1 no longer works: https://github.com/tonytomov/jqGrid/issues/317
rowNum: 10000,
height: 580,
width: 1250,
colNames: columnNames,
colModel: columnModel,
sortname: 'productNumber',
sortorder: "asc",
caption: 'PRODUCT LIST',
headertitles: true,
altRows: true,
altclass: 'gridStripe',
gridview: true,
footerrow: true,
ignoreCase: true,
shrinkToFit: false
});
My column model definition:
{ name: 'totalValue' , width:55, align:'right', formatter: 'currency', searchoptions:{sopt:['eq']} }
Code to enable the toolbar search:
grid.jqGrid('filterToolbar', {searchOnEnter: false});
May I know if this is a current limitation?
Thank you very much.
Note:
I'm currently using the following:
jQuery - 1.9.1
jQuery UI - 1.10.2
jqGrid - 4.4.5
I got this to work by setting the sorttype value as 'float'.
From
{ name: 'totalValue' , width:55, align:'right', formatter: 'currency', searchoptions:{sopt:['eq']} }
to
{ name: 'totalValue' , width:55, align:'right', sorttype:'float', formatter: 'currency', searchoptions:{sopt:['eq']} }
I find it quite counter-intuitive to set a sort type for searching to work correctly. It could have been better to have a data type instead.
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'.
I am facing problem with pagination in jqgrid with array data having 18 records, but the records are not displaying in pages even I specified pagination:true,pager:jQuery('#pager1'). Can you please help me to implement pagination instead of scrolling.
<script type="text/javascript">
jQuery("#list4").jqGrid({
datatype: "clientSide",
height: 200,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
multiselect: true,
pagination:true,
pager:jQuery('#pager1'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'id',
sortorder: 'asc',
viewrecords: true,
page: 1,
loadonce: true,
totalpages: 2,
totalrecords:18,
showpage:true,
imgpath: "/themes/default/images",
caption: "Manipulating Array Data"
});
var mydata = [
{id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"10",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"11",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"12",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"13",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"14",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"15",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"16",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"17",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"18",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
];
for(var i=0;i<=mydata.length;i++)
jQuery("#list4").addRowData(i+1,mydata[i]);
You main problem is you should reset rowNum after the adding the large number of rows. The line
jQuery("#list4").setGridParam({ rowNum: 10 }).trigger("reloadGrid");
at the end of your code will fix the problem. I recommend you to add the line
jQuery("#list4").jqGrid('navGrid','#pager1',{edit:false,add:false,del:false});
directly after the definition of the jqGrid. You will then have not only data paging, but also data filtering (searching) and refresh (reset filter).
Some more small remarks:
in the definition of the mydata array you should remove ',' before ']'.
in the for loop you should use i<mydata.length instead of i<=mydata.length.
you should remove from the definition of jqGrid following parameters which are either non existent (like pagination) or have no sense in the context (like loadonce: true): pagination, page, loadonce, totalpages, totalrecords, showpage, imgpath.
You receive the best results if you constructs jqGrid with respect of data: myData parameter, or set all data from mydata at once (see description of addRowData method in http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#array_data).
Oleg is correct.
Adding jQuery("#list4").setGridParam({ rowNum: 10 }).trigger("reloadGrid");
works.
Although it might not work if formatter property is set where the rowObject values will be undefined.(if they are used)
Therefore make sure in your formatter method u always check for their availability.
e.g.
function getFormattedFileName(cellvalue, options, rowObject) {
if(!rowObject.fileName) {// this is due to ...trigger("reloadGrid");
return cellvalue; // the value is already formatted, let's just return it
}
return rowObject.fileName.trim();
}