I would regard this as a canonical example - a code snippet which represents
a simple, runnable - jqGrid with minimal coding, but still powerful enough to show the most important features (according to this documentation):
// see: https://free-jqgrid.github.io/getting-started/
// CDN used: https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid
$(function() {
$("#grid").jqGrid({
autowidth: true, height: 45,
colNames: ['First name', 'Last name', 'Updated?'],
colModel: [{name: "firstName"}, {name: "lastName"}, {name: "updated"}],
data: [
{ id: 10, firstName: "Jane", lastName: "Doe", updated: "no"},
{ id: 20, firstName: "Justin", lastName: "Time", updated: "no" }
],
loadComplete: function() {
// demo - how to access grid data
var ids = $(this).jqGrid('getDataIDs'); // ids for each row
var gridData = $(this).jqGrid('getGridParam', 'data'); // all rows
var gridLen = gridData.length; // number of rows
// now get a list from the data
var nameList = [];
for(var i=0; i<gridLen; i++) {
nameList.push(gridData[i].firstName+' [id:'+ ids[i] +']');
}
var strList = nameList.join(", ");
$("#nameList").html(strList);
var rowKey = ids[1]; // rowKey for the operations below
// get data from the 2nd row
var secondRow=$(this).jqGrid('getRowData', rowKey);
$("#getRowData").html(secondRow.firstName + ', ' + secondRow.lastName
+ ', updated:' + secondRow.updated);
// set update flag by modifying row data
secondRow.updated = "yes";
$(this).jqGrid('setRowData', rowKey, secondRow);
// update single cell (read, modify, write)
var lastName=$(this).jqGrid('getCell', rowKey, "lastName");
lastName=lastName.toUpperCase();
// first change the cell in the visible part of grid
$(this).jqGrid('setCell', rowKey, "lastName", lastName);
// now change the internal local data
$(this).jqGrid('getLocalRow', rowKey).lastName = lastName;
// make column label of "Updated?" column larger
$(this).jqGrid('setLabel', 2, '<h3>Updated?</h3>');
// --- now verify the changes ---
gridData = $(this).jqGrid('getGridParam', 'data'); // get rows again
var rowList = [];
for(var i=0; i<gridLen; i++) {
rowList.push(gridData[i].firstName + ', ' + gridData[i].lastName
+ ', updated:' + gridData[i].updated);
}
$("#showGridData").html(rowList.join("; "));
}
});
});
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Canonical jqGrid example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/css/ui.jqgrid.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/jquery.jqgrid.min.js"></script>
<table id="grid"></table>
<br/><b>First names list:</b><div id="nameList"></div>
<br/><b>Get data from row#1 (before update):</b><div id="getRowData"></div>
<br/><b>Verify changes (after update):</b><div id="showGridData"></div>
You can use it, together with Oleg's answer as a working starting point for your development in your own MVC application (in that case, use @Url.Content syntax as in the answer above) - and last but not least as a code snippet template for further StackOverflow questions related to jqGrid.
I have added some code to show how you can access the internal grid data. It addresses questions like "how can I access data from a specific row?"
However, if you don't need that code in your snippet, you can just remove the entire loadComplete section, the grid demo will still work.
If you require paging in your snippet, see this answer.
Note: I spent a lot of time with jqQuery keys (needed to uniquely address a row) to find out how they work in detail. Here's some info from my experiences in a nutshell:
If you don't explicitly specify a key in the colModel, then JQGrid assumes "id" as the key field. This is what this example does: The data populates the id field and this is used as a key
Otherwise, if you need a different key, specify {name: "myKey", hidden:true, key:true} in the colModel, and "myKey" in the colNames as well (if you forget that, you'll get a count mismatch error). Then you can populate "myKey" in the data. The order of occurance is important! In this case, there is no "id" but a "myKey" field. Key fields don't need to be hidden. If you omit the hidden attribute (or set false as value), then the key is shown as column in the grid.
Note that in case of such a key remapping, jqGrid internally uses _id_ as property to store the key. You can see that if you use the function .jqGrid('getGridParam', 'data'), then each row contains such a property.
Specifying key: true multiple times is useless, because only the last field with that attribute is regarded as key (i.e. the rightmost key column). Having said that, you can't specify compound keys this way! If you need a compound key, then you have to concatenate the keys into one single key field.
If you neither specify a key on your own, nor populate the id field, then jqGrid creates its own values and assigns them to the id field of each row. They are typically named "jqg1" (for the first row), "jqg2" (for the second) and so forth.
The example also shows how to update a row. For more details, see here and there. Note that if you update data this way, it's only updated on the client (in your browser). You have to save the value (i.e. send the updated data to the server via AJAX, provide a SAVE button etc.) if you want to make the change permanent, otherwise it's discarded on re-load.
Column titles (i.e. the titles that are displayed to the user) are defined by the colNames property, don't confuse them with the name property inside the colModel. The name property inside the colModel defines the field names, which is important for the data binding. The order of appearance in both colNames and colModel is important, because they correlate with each other (for example, 'Last Name' in colNames appears at the second position, and so does the corresponding field {name: '"lastName"' ...} inside colModel appear at position 2).
If you want to change column titles later in your code (i.e. after the definition), take a look here: How to update column titles dynamically.
Useful links: jqGrid free edition - getting started, jgGrid - colmodel options
gridview: true,autoencode: trueandwidth: '100%'option from your example.gridview: trueis default in free jqGrid since a long time andautoencode: truesince 4.15.0. The optionwidth: '100%'is unneeded because you useautowidth: true. – Maurili