We Keep Coding

Free jqGrid, don't send new index on addrow with inlineNav

Just putting in a new grid, and everything seems to be working well, except for one thing. Using basic inline, it is sending a new incorrect key value for the column I have set with key: true. This is an auto-increment column in the database, so I just don't want to send any data for this column when ADDING, only for edit or delete is that required.
It is posting a parameter: row_id => jqg3 for the new key column and messing up my server script. So because adding the new row will auto-increment the row_id col, I don't need to send this.
How do I stop the jqGrid from sending this (row_id) index column value when saving a new added row?
free-jqgrid version is 4.14.0
$('#accts').jqGrid({
url:'/phpAJAX/Master/master_grid_v1.php',
editurl:'/phpAJAX/Master/master_grid_v1.php',
height: 'auto',
shrinkToFit: false,
width: 'auto',
datatype: 'xml',
mtype: 'POST',
postData:{
'arg1':'bol_acct'
},
colNames:[
'row_id',
'Customer',
'Trucker',
'Acct Num'
],
colModel:[
{name: 'row_id', hidden: true, key: true},
{name:'Customer', align: "center", editable: true},
{name: 'Trucker', align: "center"},
{name: 'Acct_Num', align: "center"}
],
sortname: 'Customer',
sortorder: 'desc',
viewrecords: true,
gridview: true,
caption: 'Bill of Lading Accounts',
rowNum: 10000,
pager:true
}).jqGrid('inlineNav', {
addParams: {
addRowParams: { extraparam: {'arg1':'bol_acct', 'oper':'add'} }
},
editParams: {
extraparam: {
'arg1':'bol_acct', 'oper':'edit'
}
}
})

One can use serializeSaveData callback of inline editing to modify the data, which will be send during inline editing. You can add serializeSaveData callback via
inlineEditing: {
keys: true,
extraparam: { arg1: "bol_acct" },
serializeSaveData: function (postData) {
var newPostData = $.extend(true, {}, postData);
if (newPostData.oper === "add") {
delete newPostData.id; // delete id parameter
}
return newPostData;
}
}

jquery grid not filled with JSon data

Hi I am not able to get the data from JSON loaded on to grid,
HEre is my code for the grid wich displays the stock prices for the stock for a user :
$(document).ready(function () {
// $("#jQGrid").html("<table id=\"list\"></table><div id=\"page\"></div>");
jQuery("#jqTable").jqGrid({
url:jqDataUrl,
datatype: "json",
mtype: "POST",
height: 250,
// Specify the column names
colNames: ["SYMBOL", "LAST", "CHANGE", "%CHANGE","HIGH/LOW"],
// Configure the columns
colModel: [
{ name: "SYMBOL", index: "SYMBOL", width: 200, align: "left" },
{ name: "LAST", index: "LAST", width: 200, align: "left" },
{ name: "CHANGE", index: "CHANGE", width: 200, align: "left" },
{ name: "%CHANGE", index: "%CHANGE", width: 200, align: "left"},
{ name: "HIGH/LOW", index: "HIGH/LOW", width: 200, align: "left"}
],
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
cell: "cell",
id: "id",
},
multiselect: false,
// paging: true,
// rowNum:10,
// rowList:[10,20,30],
pager: $("#jqTablePager"),
loadonce:true,
caption: "WatchList"
}).navGrid('#jqTablePager',{edit:false,add:true,del:true});
}
});
But when i try and run the code i am not able to get the contents on to the table (but the grid loads with no content)
And My json is of the form :
{
total: "1",
page: "1",
records: "2",
rows :
[
{id:"1", cell:["cell11", "cell12", "cell13","cell13","cell13"]},
{id:"2", cell:["cell21", "cell22", "cell23","cell13","cell13"]}
]
}
Please help me solve the problem

UPDATE:
I discovered that if you do not put repeatitems:true option into json reader, jqGrid assumes that you are using json dot notation. When you put it into jsonReader, your data is properly loaded. Here is working example: http://jsfiddle.net/a5e5F/3/
Old version:
I played a lot with your jqgrid code, and it seems that there is a bug in this version of jqGrid, which causes your jsonReader not to work. It reads data directly, ignoring root element and assuming that your data is array of json objects in format
{propertyName1:'PropertyValue1', propertyName2:'PropertyValue2', ...}
You can see what I mean on http://jsfiddle.net/a5e5F/2/
If you replace data:rows with data:data (your format of data), it does not load data. Maybe you should try to change your json data to use real json format (with properties named as columns)?
I have been trying a ton of stuff, changing column names to check for issue in #Barmar's coment, which I also thought it is the cause.

jqGrid, couldn't get showlink formatter working

Hi I am trying to get showlink formatter working by following this document from trirand.
What I want to achieve is a hyperlink I can click for a edit view to update/edit records. But for some reason, the column are empty where I want show a hyperlink.
Here is my code snippets, and link is the last column:
<script type="text/javascript">
$(document).ready(function () {
$("#grid_products").jqGrid({
jsonReader: {
repeatitems: false,
id: 'Guid'
},
url: '/Product/jqgridJSON/',
datatype: 'json',
mtype: 'GET',
colNames: ['ProductCode', 'ProductDescription', 'DefaultSellPrice', 'LastCost', 'Edit'],
colModel: [
{ name: 'ProductCode', index: 'Productcode' },
{ name: 'ProductDescription', index: 'ProductDescription' },
{ name: 'DefaultSellPrice', formatter: 'currency', index: 'DefaultSellPrice' },
{ name: 'LastCost', formatter: 'currency', index: 'LastCost' },
{ name: 'MyLink',
edittype: 'select',
formatter: 'showlink',
formatoptions: { baseLinkUrl: '/Product/Update/', idName: 'Guid' }
},
],
pager: '#pager',
rowNum: 10,
rowList: [20, 50, 100, 200],
sortname: 'ProductCode',
sortorder: 'asc',
viewrecords: true,
width: 'auto',
height: 'auto',
caption: 'Products'
}).navGrid('#pager', { edit: true, add: false, del: false });
});
</script>
#{
ViewBag.Title = "JSONGrid";
}
<h2>JSONGrid</h2>
<table id="grid_products"></table>
<div id="pager"></div>
The formatter from jqGrid is working for currency, but for some reason, it just didn't shown for hyperlink.
Update:
Got it working by using custom formatter.
...
{ name: 'MyLink',
formatter: myLinkFormatter,
},
...
function myLinkFormatter (cellvalue, options, rowObjcet) {
return 'Edit this product';
}

I suppose that you fill no value in JSON input for the 'MyLink' column. Because of this the hyperlink is empty. If you want to place the link with any fixed text in column I would recommend you to use custom formatter. See the recent answer for an example.
One more possible solution way is to use formatter: 'showlink' and include jsonmap: function() { return "Edit"; } to the 'MyLink' column definition. In the case you will not need to include in the JSON data "MyLink":"Edit" for every row of data. It's important to understand that the trick works only in case of usage jsonReader: {repeatitems: false} (so it should work for your grid).
If you have another problem you should include in the text of your question the JSON data which you use.
Some small remarks to your current code:
the usage of edittype: 'select' together with formatter: 'showlink' has no sense. You should remove it if you will do use formatter: 'showlink'.
the parameter height: 'atuo' should be height: 'auto'.
pager: $('#pager') is better to replace to pager: '#pager'. If you use pager: $('#pager'), the jqGrid will replace it internally to pager: '#pager' and the object $('#pager') will be discarded.
If you use jsonReader: { id: 'Guid'} and you don't plan to show the guids to the user you can remove the 'Guid' column from the grid. The id (the Guid in your case) will be used to assign ids of <tr> elements (table rows) of the grid. So you don't need to hold the same information twice

jqGrid Sort or Search does not work with columns having json dot notation

I have this jqGrid:
$("#report").jqGrid( {
url: '/py/db?coll=report',
datatype: 'json',
height: 250,
colNames: ['ACN', 'Status', 'Amount'],
colModel: [ {name:'acn', sortable:true},
{name:'meta.status', sortable:true},
{name:'amount'} ],
caption: 'Show Report',
rownumbers: true,
gridview: true,
rowNum: 10,
rowList: [10,20,30],
pager: '#report_pager',
viewrecords: true,
sortname: 'acn',
sortorder: "desc",
altRows: true,
loadonce: true,
mtype: "GET",
rowTotal: 1000,
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
id: "acn"
}
});
Notice that the column 'meta.status' is in JSON dot notation and accordingly the data sent from the server is like this:
{"page": "1", "total": "1", "records": "5", "rows": [
{"acn":1,"meta": {"status":"Confirmed"}, "amount": 50},
{"acn":2,"meta": {"status":"Started"}, "amount": 51},
{"acn":3,"meta": {"status":"Stopped"}, "amount": 52},
{"acn":4,"meta": {"status":"Working"}, "amount": 53},
{"acn":5,"meta": {"status":"Started"}, "amount": 54} ] }
The problems are of two fold:
Sorting does not work on columns with dot notation, here "meta.status". It does not even show the sortable icons on the column header, and nothing happens even if the header is clicked. Sorting does not work, whether loadonce is true or false.
If I try Searching (after setting loadonce to true) for the column meta.status (other columns without dot notation is okay), then it throws up a javascript error like this.

After changing of the definition of the last column from {name:amount} to {name:'amount'} I could reproduce your problem: the sorting on 'Status' not work, but I could not see any error message (see the demo).
One can fix the problem it one change the definition of the second column from
{name:'meta.status', sortable:true}
to
{name:'status', sortable:true, jsonmap: "meta.status"}
See the fixed demo here.

As a rule of thumb to avoid this problem:
Ensure that your name and index values are the same
name: 'Date', index: 'Date',
name: 'Clicks', index: 'Clicks',
...
Ensure you set something like
$("#jqGrid").setGridParam({datatype: 'local'});
And that when you reload the grid - you correct this to "JSON" on reload if you're using it - i.e.
$("#yourGridID").setGridParam({datatype: 'json'}).trigger("reloadGrid");
Lastly, ensure that you use
name: 'Date', index: 'Date', sortable:true
Where you need it.

JQGrid subgrid Url: Is it possible to change the value of ?Id=id

I'm trying to implement a JqGrid with a subgrid as so...
jQuery(document).ready(function() {
jQuery("#list").jqGrid({
url: '/OrganizationalUnit/FindAll/',
datatype: 'json',
mtype: 'GET',
colNames: ['Name', 'Actions'],
colModel: [
{ name: 'Name', index: 'Name', width: 500, align: 'left' },
{ name:'act', index:'act', width:250,sortable:false}
],
subGrid : true,
subGridUrl: '/OrganizationalUnit/Organizations/',
subGridModel:
[
{ name: 'Name', index: 'Name', width: 300, align: 'left' },
{ name: 'OrganizationID', index: 'OrganizationID', width: 300, align: 'left' }
]
...
So the way JqGrid works is that when the controller method for OrganizationalUnitController.Organizations gets called, a query string of "?id=4" gets appended to the URL. M problem is that the "4" is just an arbitrary row number that JqGrid has created for the grid and doesn't provide me with an identifier for the OrganizationalUnit the I trying to retreive a subgrid for. So what I'm wondering is it there is any way that I can assign the 'name' value to the id argument?
Has anyone figured this out before?

Ok...I have figured it out.
If I add the params: ['name'] arguement to the subGridModel definition then I can get the value of the OrganizationalUnit name through the HttpContext.Request.Params collection.

Where exactely did you put the params parameter?
I am surprised that your defintion of the subGridModel actually works.
Since the manual recommends a different structure:
subGridModel : [
{
name : ['No', 'Item', 'Qty', 'Unit', 'Line Total'],
width : [55, 200, 80, 80, 80],
align : ['left','left','right','right','right'],
params: ['invdate']
}
]
wiki:subgrid - jqGrid Wiki