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

<link href='@Url.Content("~/Content/themes/base/jquery-ui.css")' ... />   
<link href='@Url.Content("~/Content/themes/redmond/jquery-ui-1.8.custom.css")' ... />   
<link href='@Url.Content("~/Content/themes/redmond/ui.jqgrid.css")' ... />   
<link href='@Url.Content("~/Scripts/jquery.jqGrid-4.3.1/css/ui.jqgrid.css")' ... />              

<script src='@Url.Content("~/Scripts/jquery-1.7.1.min.js")' ...></script>   
<script src='@Url.Content("~/Scripts/jquery-ui-1.8.16.min.js")' ...></script>   

<script src='@Url.Content("~/Scripts/jquery.jqGrid-4.3.1/js/i18n/grid.locale-en.js")' ...></script>   
<script src='@Url.Content("~/Scripts/jquery.jqGrid-4.3.1/js/jquery.jqGrid.min.js")' ...></script>    

I saw another example suggesting that these were the files needed in addition to jQuery. Can someone confirm this is all that's needed and in the correct order or advise if I need to add more. For example do I need the link to the locale file?

I am just starting out learning about jqGrid. I looked around and didn't yet find a good example of how to use this with MVC3 and Razor. Does anyone have links to references that they have found very useful. Just really need one good link but most links I found with Google were old and not using Razor.

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

<link href='@Url.Content("~/Content/themes/base/jquery-ui.css")' ... />   
<link href='@Url.Content("~/Content/themes/redmond/jquery-ui-1.8.custom.css")' ... />   
<link href='@Url.Content("~/Content/themes/redmond/ui.jqgrid.css")' ... />   
<link href='@Url.Content("~/Scripts/jquery.jqGrid-4.3.1/css/ui.jqgrid.css")' ... />              

<script src='@Url.Content("~/Scripts/jquery-1.7.1.min.js")' ...></script>   
<script src='@Url.Content("~/Scripts/jquery-ui-1.8.16.min.js")' ...></script>   

<script src='@Url.Content("~/Scripts/jquery.jqGrid-4.3.1/js/i18n/grid.locale-en.js")' ...></script>   
<script src='@Url.Content("~/Scripts/jquery.jqGrid-4.3.1/js/jquery.jqGrid.min.js")' ...></script>    

I saw another example suggesting that these were the files needed in addition to jQuery. Can someone confirm this is all that's needed and in the correct order or advise if I need to add more. For example do I need the link to the locale file?

I am just starting out learning about jqGrid. I looked around and didn't yet find a good example of how to use this with MVC3 and Razor. Does anyone have links to references that they have found very useful. Just really need one good link but most links I found with Google were old and not using Razor.

• javascript
• jquery
• asp
• asp-mvc
• jqgrid

2 Answers 2

The minimal list of the CSS and JavaScript files which need be included you can find in the jqGrid documentation. In your case it will be

<link href='@Url.Content("~/Content/themes/redmond/jquery-ui-1.8.custom.css")' rel='stylesheet' type='text/css' />
<link href='@Url.Content("~/Scripts/jquery.jqGrid-4.3.1/css/ui.jqgrid.css")' rel='stylesheet' type='text/css' />

<script src='@Url.Content("~/Scripts/jquery-1.7.1.min.js")' type='text/javascript'></script>
<script src='@Url.Content("~/Scripts/jquery.jqGrid-4.3.1/js/i18n/grid.locale-en.js")' type='text/javascript'></script> 
<script src='@Url.Content("~/Scripts/jquery.jqGrid-4.3.1/js/jquery.jqGrid.min.js")' type='text/javascript'></script>

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./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./ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/free-jqgrid/4.15.2/css/ui.jqgrid.min.css"/>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./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 pound keys this way! If you need a pound 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}