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 - how to delete row from local data?

I am really new to the jqGrid. I'm loading local file (I'm parsing csv file into json and then transfer the array to jqGrid). Table generated through jqGrid should allow user to modify, add and delete the data in the grid. I tried to resolve my problem using various answers from here like:
Adding new row to jqGrid using modal form on client only
There I have found the example made by Oleg for the 4.7 version of jqGrid and reproduced the same code for my purpose. The result was that I am able to delete row which I added after the grid initialisation but I am unable to delete any other row which was loaded from the array.
Another interesting thing is that I am able to modify the rows loaded from array, the only thing I cannot do with the grid is to delete rows loaded from array. I appreciate any advices.
Here is part of the code with jqGrid:
var delSettings = {
onclickSubmit: function () {
var $this = $(this), p = $this.jqGrid("getGridParam"), newPage = p.page;
if (p.lastpage > 1) {// on the multipage grid reload the grid
if (p.reccount === 1 && newPage === p.lastpage) {
// if after deliting there are no rows on the current page
// which is the last page of the grid
newPage--; // go to the previous page
}
// reload grid to make the row from the next page visable.
setTimeout(function () {
$this.trigger("reloadGrid", [{page: newPage}]);
}, 50);
}
return true;
}
};
$("#jqGrid").jqGrid({
datatype: "local",
data: results.data,
editurl: "clientArray",
colModel: [
{
label: 'Id',
name: 'Id',
width: 60,
editable: true,
key: true,
sorttype: 'number'
},
{
label: 'Company',
name: 'Company',
width: 90,
editoptions: {size: 40},
editable: true,
sorttype: 'string'
},
{
label: 'Address',
name: 'Address',
width: 100,
editoptions: {size: 40},
editable: true
},
{
label: 'City',
name: 'City',
width: 80,
editoptions: {size: 40},
editable: true
}
],
height: '100%',
viewrecords: true,
caption: "Baza klientów Klimatest",
pager: "#jqGridPager",
sortable: true,
ignoreCase: true,
cmTemplate: {editable: true, searchoptions: {clearSearch: true }},
rowNum: 5,
rowList: [5, 10, 20],
});
// toolbar searching
$('#jqGrid').jqGrid('filterToolbar', { defaultSearch: 'cn'});
$('#jqGrid').jqGrid('navGrid',"#jqGridPager",
{ edit: true, add: true, del: true, search: true, refresh: true, view: true},
// options for the Edit Dialog
{
editCaption: "The Edit Dialog",
recreateForm: true,
closeAfterEdit: true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Add Dialog
{
closeAfterAdd: true,
recreateForm: true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Delete Dialog
delSettings,
// options for the Search Dialog
{
},
// options for the View Dialog
{
});
// add first custom button
$('#jqGrid').navButtonAdd('#jqGridPager',
{
buttonicon: "ui-icon-calculator",
title: "Column chooser",
caption: "Columns",
position: "last",
onClickButton: function() {
// call the column chooser method
jQuery("#jqGrid").jqGrid('columnChooser');
}
});
EDIT
Data source is the result of parsed CSV file via Papaparse.js plugin (array of objects), which looks like this:
Id: "100,1"
Address: "Strefowa 8"
Company: "DSSE Sp. z o.o."
City: "Warsaw"
I edited the code just like Oleg suggested and I'm still able to delete only records which are added via interface of jqGrid.
I don't know if it may help, but when I click delete icon and confirm that I want to delete selected row, that row is no longer highlighted, but still visible. Thanks for feedback.

You have clear error in your code near // options for the View Dialog block. The View option should be included after delete and search options (see the documentation). So your current code don't use delSettings options.
I recommend you additionally to include test data in your next questions, because some problems exist only with some specific format of input data.
UPDATED: The problem is in the data which you use. The value for Id which you use contains comma ("100,1"). It's not allowed for jqGrid. First of all id in HTML should not use characters which have special meaning in CSS. The second problem: delGridRow method uses commas in separator to delete multiple rows at once. So the usage of id="100,1" will follows to attempt to delete tow rows: one row with id=100 and the second one with the id=1. By the way I'm developing now jqGrid in my fork of GitHub. I fixed many restrictions with the usage of special characters in ids. So you will be do able to use id="100,1" and successfully delete the rows if you would use jqGrid from my fork.
I recommend you to use underscore if you need to construct id which consist from multiple numbers: Id: "100_1" instead of Id: "100,1".

JQgrid search options not showing

Following is my code , I am new to JQgrid and I did follow the example provided on the wiki, but for some odd Reason I'm unable to see any Search options on the navigation bar, Any help would be really appreciated
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.4.custom.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#list").jqGrid({
url: "genxml3.php",
datatype: "xml",
mtype: "GET",
colNames: ["A", "T", "E"],
colModel: [
{ name: "A", Index: 'Name', width: 155 },
{ name: "T", width: 290 },
{ name: "E", width: 80, align: "right" ,sortable: false},
],
pager: "#pager",
height:"100%",
rowNum: 20,
rowList: [40, 80, 120],
rownumbers: true,
rownumWidth: 40,
sortname: "invid",
sortorder: "desc",
viewrecords: true,
gridview: true,
autoencode: true,
caption: "Digital List"
})
});
jQuery("#list").jqGrid('navGrid','#pager', {edit:false,add:false,del:false}, {}, {}, {}, {multipleSearch:true, multipleGroup:true, showQuery: true}
);
</script>

The reason seems to me the wrong place of navGrid call. Curruntly you placed it outside of $(function () {...}) block. So the call of navGrid will be made before the grid is created and the navGrid failed. You need to move the line jQuery("#list").jqGrid('navGrid', ...); one line above to fix the problem.
Additionally you should remove Index: 'Name' from the column "A". First of JavaScript is case sensitive and there are only index and no Index properties. Moreover it's not recommended to use index property at all it it not really required. The option sortname: "invid" have probably not much sense because you don't have column having the name invid.
Another remark. You should include gridview: true option to improve performance of the grid and consider to use loadonce: true option. If you don't use loadonce: true option then the server (url: "genxml3.php") have to implement server side paging, sorting and filtering (searching). In case of not so large dataset (for example less of 1000 or 10000 rows) it could be more effective if the server returns all data (initially sorted by sortname if you any use). jqGrid will save returned data in internal data parameter which are typical for usage datatype: "local" and then it will change datatype to "local". So jqGrid will implement sorting, paging and filtering/searching locally without any request to the server. Typically local sorting works quickly as requests to the server if the number of rows is not so large.

Kendo UI Grid not displaying any data in IE8 & IE9 only

I have a Kendo UI grid that works absolutely fine in IE10/11/Chrome/Firefox. However, in IE8/9 it completely fails to render any of the returned data. It is hooked up to an OData Web Api 2 endpoint. Here is the Javascript:
$(document).ready(function ()
{
$("#grid").kendoGrid({
dataSource: {
transport: {
read: "http://cross_site_url:port/api/TrackedContainers/get"
},
pageSize: 15,
sort: { field: "EventTime", dir: "desc" }
},
filterable: true,
sortable: true,
pageable: true,
columns: [
{ field: "QrCode", title: "QR Code", width: 100 },
{ field: "Type", title: "Type", width: 150 },
{ field: "Location", title: "Location", width: 200 },
{ field: "Status", title: "Status", width: 90 },
{ field: "FailedCollectionReason", title: "Failed Collection Reason", width: 150 },
{
field: "EventTime",
title: "Event Time",
type: "date",
format: "{0:dd-MMM-yyyy hh:mm:ss tt}",
parseFormats: ["yyyy-MM-dd'T'HH:mm:ss.zz"],
width: 150
}
]
});
});
For once, IE11's compatibility mode appears to be accurately mimicking the real world and also fails to display any results when set to IE8 Document mode. The URL above is obviously not the real one - it does however make a cross site call and as such I have tried enabling XSS in IE8 but to no avail. Adding to trusted sites also does not make any difference.
Looking at the network traffic it, would appear that the grid doesn't even attempt the HTTP GET at all in IE8/9.
Any ideas?

Did you add a CORS transport to jQuery? IE8 and 9 require the use of
the XDomainRequest object to perform CORS requests which is not
included in jquery. – Kevin B 41 mins ago
Above your document.ready, add $.support.cors = true; – Robin Giltner
53 secs ago
The above fixed it, thanks guys.

You need to add dataType:json in your datasource
transport: {
read: {
url: "/api/request/GetUrcs",
dataType: "json"
}
},
batch: false,

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.