How can one get the ID\'s of every row in a grid, even across pages?
getDataIDs
and getRowData
only gives the ID\'s of the current page.
In later versions of jqGrid they came out with a function that suits this situation better as it will consider any toolbar filtering that may be in place. See Oleg's example here. Thus, if you have a jqGrid (loadonce:true and/or datatype:local) the following will return all row ids (displayed in current page and beyond) which match the current filtering.
var allIdsWithFiltering = grid.jqGrid('getGridParam', 'lastSelectedData');
This returns a plain array, unlike the original answer, which returns an object with properties that must be enumerated.
Considering that Object.keys is supported since IE9, if you only need the IDs, nowadays I would use:
var idToDataIndex = $("#list").jqGrid('getGridParam','_index');
var ids = Object.keys(idToDataIndex);
$(function () {
"use strict";
$("#list").jqGrid({
colModel: [
{ name: "name", label: "Client", width: 53 },
{ name: "invdate", label: "Date", width: 90, align: "center", sorttype: "date",
formatter: "date", formatoptions: { newformat: "d-M-Y" },
searchoptions: { sopt: ["eq"] } },
{ name: "amount", label: "Amount", width: 65, template: "number" },
{ name: "tax", label: "Tax", width: 41, template: "number" },
{ name: "total", label: "Total", width: 51, template: "number" },
{ name: "closed", label: "Closed", width: 59, template: "booleanCheckbox", firstsortorder: "desc" },
{ name: "ship_via", label: "Shipped via", width: 87, align: "center",
formatter: "select",
formatoptions: { value: "FE:FedEx;TN:TNT;DH:DHL", defaultValue: "DH" },
stype: "select",
searchoptions: { value: ":Any;FE:FedEx;TN:TNT;DH:DHL" } }
],
data: [
{ id: "10", invdate: "2015-10-01", name: "test", amount: "" },
{ id: "20", invdate: "2015-09-01", name: "test2", amount: "300.00", tax: "20.00", closed: false, ship_via: "DH", total: "320.00" },
{ id: "30", invdate: "2015-09-01", name: "test3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "40", invdate: "2015-10-04", name: "test4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "50", invdate: "2015-10-31", name: "test5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "60", invdate: "2015-09-06", name: "test6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "70", invdate: "2015-10-04", name: "test7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "80", invdate: "2015-10-03", name: "test8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "90", invdate: "2015-09-01", name: "test9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
{ id: "100", invdate: "2015-09-08", name: "test10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },
{ id: "110", invdate: "2015-09-08", name: "test11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
{ id: "120", invdate: "2015-09-10", name: "test12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
],
iconSet: "fontAwesome",
idPrefix: "",
rownumbers: true,
sortname: "invdate",
sortorder: "desc",
threeStateSort: true,
sortIconsBeforeText: true,
headertitles: true,
toppager: true,
pager: true,
rowNum: 5,
viewrecords: true,
searching: {
defaultSearch: "cn"
},
caption: "The grid, which demonstrates formatters, templates and the pager"
}).jqGrid("filterToolbar");
});
$('#btnGetAllIDs').click(function() {
var idToDataIndex = $("#list").jqGrid('getGridParam','_index');
var ids = Object.keys(idToDataIndex);
console.log(ids);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/css/ui.jqgrid.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/jquery.jqgrid.min.js"></script>
<div style="margin:5px;">
<table id="list"></table>
<button id="btnGetAllIDs">GetAllIDs</button>
</div>
But please also read and upvote Oleg's answer because it has the conditions in which it's possible to do this and the important information.
If you are dynamically removing rows from the grid (delRowData
), the _index
will still have the deleted rows. You may fix that by fixing "refreshIndex" in jqgrid.base.js
(as they did in 4.7).
There is another way of getting this data in older versions on jqgrid
:
gRowNum = grid.jqGrid('getGridParam','rowNum');
grid.setGridParam({rowNum: '9999'});
grid.trigger("reloadGrid");
myList = grid.jqGrid('getDataIDs');
grid.setGridParam({rowNum: gRowNum});
grid.trigger("reloadGrid");
It is possible only if you have local grid (datatype:'local'
or having loadonce:true
). In the case all data inclusive ids for all pages are already locally. In the case you can use _index
parameter, which will be used typically together with another more known parameter data
. With
var idToDataIndex = $("#list").jqGrid('getGridParam','_index');
you will get the _index
parameter. It is an object which has as the properties all ids of grid. So you can enumerate the ids with
var id;
for (id in idToDataIndex) {
if (idToDataIndex.hasOwnProperty(id)) {
// id is the rowid.
// to get the data you can use
// mydata[idToDataIndex[id]] where
// var mydata = $("#list").jqGrid('getGridParam','data');
}
}