<table id="list" class="scroll" cellpadding="0″ cellspacing="0″></table>
    <div id="pager" class="scroll" style="text-align:center;"></div>

    <script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery("#list").jqGrid({
            url: '/Configuration/GetRateTypes',
                datatype: 'json',
                mtype: 'GET',
                colNames: ['Code', 'Name', 'Rate'],
                colModel: [
          { name: 'Code', index: 'Code', width: 40, align: 'left' },
          { name: 'Name', index: 'Name', width: 40, align: 'left' },
          { name: 'Rate', index: 'Rate', width: 400, align: 'left'}],
                pager: jQuery('#pager'),
                rowNum: 1,
                rowList: [5, 10, 20, 50],
                sortable: true,
                sortname: 'Code',
                sortorder: "desc",
                viewrecords: true,
                imgpath: '/css/blitzer/images/',
                caption: 'Interest Rate Types'
            });
        });
    </script>

public ActionResult GetRateTypes(string sidx, string sord, int page, int rows)
        {
            int totalPages = 1; // we'll implement later
            int pageSize = rows;
            int totalRecords = 3; // implement later

            var jsonData = new
            {
                total = totalPages,
                page = page,
                records = totalRecords,
                rows = new[]{
                    new {id = 1, cell = new[] {"1", "-7", "Is this a good question?"}},
                    new {id = 2, cell = new[] {"2", "15", "Is this a blatant ripoff?"}},
                    new {id = 3, cell = new[] {"3", "23", "Why is the sky blue?"}}
                }
            };
            return Json(jsonData, JsonRequestBehavior.AllowGet);
        }