using jqGrid in an MVC View

Since MVC has gotten so popular and for a good damn reason we've lost the venerable WebForms grids. However a great replacement is the jqGrid an extension of the jQuery UI. However it does take some setup in your View and I personally find their documentation horrendous. Below is a very basic jqGrid but you need an empty table with the id that matches what's in the grid and a div that's used for the pager.

You'll notice these items have to match and the div MUST be below the table for the display to work correctly. I'm using an MVC controller to get the data for the grid back. Now this won't let you add, delete, edit, etc because that gets a lot more complicated. For me this is a pretty basic grid. You need to specify a url to get data, I almost always use json as my datatype, and a GET to the server. Whatever data your return needs to be in a JSON format that matches the format in the jsonReader section of the grid. See another post of mine on how to return that from an MVC controller.  You will need to set your columns of course to your needs.

There are a lot more options if you try and read the jqGrid docs.

jqGrid Home Page



<table class="container" id="usersGrid">
<div id="usersGridPager">

<script">
 $(document).ready(function () {  
     jQuery("#usersGrid").jqGrid(  
     {  
       url: "@Url.Action( "Get", "Users" )",  
       datatype: "json",  
       mtype: 'GET',  
       colNames: ['Id','Username', 'Name', 'Email Address', 'Created On'],  
       colModel: [  
              { name: 'Id', index: 'Id' },  
              { name: 'Username', index: 'Username' },  
              { name: 'Name', index: 'Name' },  
              { name: 'EmailAddress', index: 'EmailAddress' },  
              { name: 'Created', index: 'Created'}],  
       pager: "#usersGridPager",  
       viewrecords: true,  
       autowidth: true,  
       multiselect: false,  
       height: '100%',  
       width: '100%',  
       rowNum: 20,  
       caption: 'Users',  
       emptyrecords: 'No Users',  
       rowList: [10, 20, 30, 40, 50],  
       altRows: true,  
       loadonce: false,  
       loadtext: "Loading Users...",  
       jsonReader: {  
         root: "rows",  
         page: "page",  
         total: "total",  
         records: "records",  
         repeatitems: false,  
         Id: "0"  
       }  
     });  
  
   });  
</script">

Comments

Popular Posts