What are the minimum files needed to get jqGrid working with MVC?

Question

I downloaded the files for jqGrid but I\'m not quite sure what files I need to reference. So far I have these files:

Answer 1

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; iUpdated?');
     
     // --- now verify the changes ---
     gridData = $(this).jqGrid('getGridParam', 'data'); // get rows again
     var rowList = [];
     for(var i=0; i

First names list:


Get data from row#1 (before update):


Verify changes (after update):

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}