I would consider this as a canonical example - a piece of code that represents a simple, runnable - jqGrid with minimal coding , but still powerful enough to show the most important functions (according to this documentation ):
<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 as a working starting point for your development in your own MVC application (in this case, use the @Url.Content syntax, as in the answer above), and, finally, no less than a code snippet template for further StackOverflow jqGrid related questions.
I added code to show how you can access internal grid data. It addresses issues such as "how can I access data from a specific row?"
However, if you don't need this code in your snippet, you can just delete the entire loadComplete section, the grid demonstration will still work.
If you need paging in your snippet, see this answer.
Note. I spent a lot of time on jqQuery keys (you need to uniquely address the string) and how they work. Here is some information from my experience in a nutshell:
Unless you explicitly specify a key in colModel , then JQGrid assumes an "id" as the key field . This is an example of this example: data fills the id field and it is used as a key
Otherwise, if you need another key , specify {name: "myKey", hidden:true, key:true} in colModel and "myKey" in colNames (if you forget this, you will get a counter mismatch error). Then you can fill in "myKey" in the data. Important order ! In this case, there is no "id" field, but a "myKey" . Key fields do not have to be hidden. If you omit the hidden attribute (or set false as a value), then the key is displayed as a column in the grid.
Please note that in case of such key redefinition, jqGrid internally uses _id_ as a property to store the key. You can see that if you use the .jqGrid('getGridParam', 'data') function, then each row contains such a property.
Specifying key: true useless several times , because only the last field with this attribute is considered as a key (i.e., the rightmost column of keys). Having said that, you cannot specify compound keys in this way! If you need a composite key, you need to combine the keys into one key field.
If you do not specify the key yourself and do not fill in the id field, then jqGrid creates its own values and assigns their field id each row. Usually they are called "jqg1" (for the first line), "jqg2" (for the second), etc.
This example also shows how to update a row. See here and there for more details. Please note: if you update the data in this way, it is updated only on the client (in your browser). You must save the value (i.e., send updated data to the server via AJAX, provide the SAVE button, etc.), if you want to make the change permanent, otherwise it will be reset when you reload.
Column headers (that is, headers displayed to the user) are determined by the colNames property, do not confuse them with name inside colModel . The name property inside colModel defines field names, which is important for data binding. The order of appearance in colNames and colModel important because they correlate with each other (for example, the 'Last Name' in colNames appears in second position, as well as the corresponding field { name: '"lastName"' ...} inside colModel displayed in position 2 )
If you want to change the column names later in your code (i.e. after the definition), look here: Dynamically update column headers.
Useful link: Free jqGrid version - getting started