We Keep Coding

How to sort the column by its summary value alone in jqgrid grouping

I have the code available here: https://jsfiddle.net/zqLp4yrg/41/
datatype is "local" not json.
$("#jqGrid").jqGrid({
url: "/echo/json/", // use JSFiddle echo service
postData: {
json: JSON.stringify(serverResponse) // needed for JSFiddle echo service
},
mtype: "POST", // needed for JSFiddle echo service
datatype: "json",
colModel: [
{ label: 'CatId', name: 'CatId', key: true, width: 30 },
{ label: 'InventoryDate', name: 'InventoryDate', width: 70 },
{ label: 'ProductName', name: 'ProductName', width: 150 },
{ label: 'RemainingQuantity', name: 'RemainingQuantity', width: 150, summaryType: 'sum', sortable: true }
],
iconSet: "fontAwesome",
viewrecords: true,
rowList: [20,30,50],
width: 780,
height: 250,
rowNum: 20,
sortname: "ProductName",
grouping: true,
groupingView: {
groupField: ["CatId"],
groupColumnShow: [true],
groupText: [
"CatId: <b>{0}</b>"
],
groupOrder: ["asc"],
groupSummary: [true],
groupSummaryPos: ["header"],
groupCollapse: true
}
});
In here I want to sort the Remaining quantity based on its summary value in header. Please help.

Your demo has many small problems:
First of all you write about the usage of datatype is "local", but you use datatype: "json" in the demo. Moreover, you use no loadonce: true option and no forceClientSorting: true option. It means that the server is responsible for sorting the data. Moreover, if you use grouping, then the data returned from the server have to be sorted (on the server) by both groupingView.groupField (CatId in your case) and then by sortname (RemainingQuantity in your case). The data which you use as the source are not sorted correctly. One sees, for example, that jqGrid displays two CatId: 2 and two CatId: 3 groups.
You can fix the problem by adding loadonce: true and forceClientSorting: true options, but you use old version of free jqGrid (4.11.1), which is not support forceClientSorting: true. You have to upgrade to the latest version (4.14.0) of free jqGrid to be able to sort and group the data returned from the server on the client before displaying.
The source data, which contains integer data will be returned from the server as strings. Moreover, some data items contains spaces (" 16" instead of "16" or 16). It changes the order of sorting the data.
You should use sorttype (for example sorttype: "integer") to sort the data in the column corresponds to the type of the data.
To sort the date column correctly you should use both sorttype: "date" and the formatter: "date" with the formatoptions (in you case: formatoptions: { srcformat: "d/m/Y H:i:s", newformat: "d/m/Y H:i:s" })
If you want that the options rowNum, rowList and viewrecords work, then the grid have to have at least one pager. Thus you probably skip pager: true or toppager: true (or both) options.
The fixed demo is https://jsfiddle.net/OlegKi/zqLp4yrg/43/. I removed groupingView.groupollapse: true and height: 250 only to make easy to examine the results. The settings are not important for your main problem.

jqGrid - TypeError: "#List".jqGrid is not a function

I have the following code in a separate script file in my project for populating jqGrid.
jQuery(document).ready(function () {
("#List").jqGrid({
url: '/Dept/Index/',
datatype: 'json',
mtype: 'POST',
colNames: ['Name'],
colModel: [{ name: 'Name', index: 'Name', width: 300, align: 'left'}],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'Id',
sortOrder: "desc",
viewrecords: true,
caption: 'Dept List'
});
});
When I run the project, I observe the following error in Firebug's console. TypeError: "#List".jqGrid is not a function.
If I however embed the script within a file, the error disappears. I have followed the instructions on how to install and also looked at answers to similar errors and I am certain that I have jqgrid.js and grid.locale-en.js in the proper order.
How can I eliminate this error?

You should use:
$("#List")
or:
jQuery("#List")
You can read about it here:
http://api.jquery.com/jQuery/
The result of ("#List") is just a String, which is why the interpreter claims there is no method called jqGrid.

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 pager problem - Total pages and records does not display correctly

Issue: My jqGrid pager shows Page 1 of NaN instead of the correct number of pages.
Fiddler shows that I am getting the correct json from my WCF call:
{"total":1,"page":1,"records":2,"rows":[{JDEVendorNumber":99999999,
"VendorName":"Super Vendor","BillID":"99999999wwerer ",
"CommunityName":"Post Abbey ",
"PrimaryAcctNumber":"wwerer","CommunityID":"600402","RecordID":8}]}
My grid setup is as follows:
$invoiceGrid.jqGrid({
datatype: 'json',
mtype: 'GET',
url: url,
colNames: ['Vendor Name', 'CommunityName', 'Primary Acct Nbr', 'BillID'],
colModel: [
{ name: 'VendorName', index: 'VendorName', width: 203, align: 'left' },
{ name: 'CommunityName', index: 'CommunityName', width: 215, align: 'left' },
{ name: 'PrimaryAcctNumber', index: 'PrimaryAcctNumber', width: 260, align: 'left' },
{ name: 'BillID', index: 'BillID', hidden: true }
],
rowNum: 50,
gridview: true,
rowList: [10, 20, 30, 50],
pager: $('#invoicepager'),
sortname: 'PrimaryAcctNumber',
viewrecords: true,
sortorder: "asc",
rownumbers: false,
hidegrid: false,
repeatitems: false,
recordtext: 'Bill(s) {0} - {1} ',
cell: "",
height: "auto",
loadComplete: function(data) {
//alert('total is ' + data.responseText);
if ($invoiceGrid.jqGrid('getGridParam', 'records') == 0) {
NoRecordsFound();
} else {
SetSearchResultsInterface('bills');
}
EnableControl($search, true);
Global.grdInitialized = true;
$progressbar.hide();
},
jsonReader: {
repeatitems: false,
id: "RecordID"
}
}).navGrid('#invoicepager', { edit: false, add: false, del: false, search: false, refresh: false });
My data is displayed correctly but the pager shows NaN for total pages and total records. Any ideas? Thank you for your help

It seems that correct format of recordtext should has 3 elements like
recordtext: "View {0} - {1} of {2}"
You use
recordtext: 'Bill(s) {0} - {1} '
You can use
recordtext: 'Bill(s) {0} - {1} of {2}'
instead. But I can not really reproduce your problem also in case of the usage of your original data (see http://www.ok-soft-gmbh.com/jqGrid/PagerProblem.htm which has no problems).
Moreover your JSON data should be fixed:
[{JDEVendorNumber"
should be fixed to
[{"JDEVendorNumber"
but probably it's come during posting the data only.

Oleg, by looking at the sample code you sent me, I figured that for the pager to work correctly you need to include grid.formedit.js. In my page I had references only to grid.locale-en.js and jquery.jqGrid.min.js. Apparently that is not enough. I guess, lesson learned for me is to include all the .js libraries that are part of the jqGrid download. Thanks for your help

Although it does not seem to be the problem here, the loadonce parameter may cause a similar issue (total pages always set to 1). It should be forced to false:
$myGrid.jqGrid({
datatype: 'json',
loadonce: false,
...
}
The loadonce parameter prevents the client from loading further data after the initial load. As a side effect, the client ignores total and records in the server's response, using only the amount of rows to populate the pager.
In my own code, loadonce must have been defaulted to true, because the pager worked as soon as I explicitly set it to false.