Can't load data from database to a Jquery Grid

Question

The problem im facing is I can't populate a Jqgrid from database, it just show me the data in Json format.

View (ListarDistritos)

@model IEnumerable<Entidades.Base.ENDistrito>

<script src="@Url.Content("~/Scripts/Base/modGrid.js")"></script>
<script src="@Url.Content("~/Content/JqueryGrid/jquery-1.9.0.min.js")"></script>
<link href="@Url.Content("~/Content/JqueryGrid/jquery-ui-1.9.2.custom.css")" rel="stylesheet" />
<script src="@Url.Content("~/Content/JqueryGrid/jquery.jqGrid.js")"></script>
<link href="@Url.Content("~/Content/JqueryGrid/ui.jqgrid.css")" rel="stylesheet" />
<script src="@Url.Content("~/Content/JqueryGrid/grid.locale-en.js")"></script>

<link href="@Url.Content("~/Content/estilo.css")" rel="stylesheet" />

<h2>@ViewBag.Message</h2>
<table id="grid">
 </table>
<div id="pager"></div>

ModGrid.JS

var lastsel;
$(document).ready(function()  {
    $("#grid").jqGrid({
        url: '/MantDistritos/ListarDistritos',
        datatype: "json",
        mtype: 'GET',
        colNames: ['Id', 'Descripcion'],
        colModel: [
                        {
                            name: 'IdDistrito', index: 'IdDistrito', sortable: false, align: 'left', width: '200',
                            editable: true, edittype: 'text'
                        },
                        {
                            name: 'DescripcionDistrito', index: 'DescripcionDistrito', sortable: false, align: 'left', width: '200',
                            editable: true, edittype: 'text'
                        }
        ],
        jsonReader: {
            repeatitems: false,
            id: "0"
        },
        pager: jQuery('#pager'),
        sortname: 'DescripcionDistrito',
        rowNum: 10,
        rowList: [10, 20, 25],
        sortorder: "",
        height: 125,
        viewrecords: true,
        rownumbers: true,
        caption: 'Distritos',
        width: 750,
        editurl: "/Home/PerformCRUDAction",  
        onCellSelect: function (rowid, iCol, aData) {


            if (rowid && rowid !== lastsel) {

                if (lastsel)
                    jQuery('#grid').jqGrid('restoreRow', lastsel);
                jQuery('#grid').jqGrid('editRow', rowid, true);
                lastsel = rowid;
            }
        }
    })
    jQuery("#grid").jqGrid('navGrid', '#pager', { edit: false, add: true, del: true, search: false, refresh: true },
            { closeOnEscape: true, reloadAfterSubmit: true, closeAfterEdit: true, left: 400, top: 300 },
            { closeOnEscape: true, reloadAfterSubmit: true, closeAfterAdd: true, left: 450, top: 300, width: 520 },
            { closeOnEscape: true, reloadAfterSubmit: true, left: 450, top: 300 });

});

controller(MantDistritos) public class MantDistritosController : Controller { public JsonResult ListarDistritos() { ViewBag.Message = Resources.Language.Title_Page_MTD_L; var distrito = new LNClientes().DistritoListar(); return Json(distrito,JsonRequestBehavior.AllowGet); } }

When i execute the application it shows me this

[{"IdDistrito":1,"DescripcionDistrito":"MAGDALENA DEL MAR"},{"IdDistrito":2,"DescripcionDistrito":"JESUS MARIA"},{"IdDistrito":3,"DescripcionDistrito":"PUEBLO LIBRE"},{"IdDistrito":4,"DescripcionDistrito":"LIMA 36"},{"IdDistrito":5,"DescripcionDistrito":"BARRANCO"},{"IdDistrito":6,"DescripcionDistrito":"MIRAFLORES"},{"IdDistrito":7,"DescripcionDistrito":"SAN ISIDRO"},{"IdDistrito":8,"DescripcionDistrito":"SAN JUAN DE LURIGANCHO"},{"IdDistrito":9,"DescripcionDistrito":"SAN JUAN DE MIRAFLORES"},{"IdDistrito":10,"DescripcionDistrito":"LOS OLIVOS"},{"IdDistrito":11,"DescripcionDistrito":"COMAS"},{"IdDistrito":12,"DescripcionDistrito":"SURCO"}]

But it didn't show me any data inside the Jquery grid. If i use ActionResult instead of JsonResult it shows me the Jquery grid but with no data.

Any clue to solve my issue would be appreciate

Thanks.

Answer 1

your json data seems to be fine. i find no error. Seems there is an error in your jsonReader. ID is the name of the Column. it should be of the form

jsonReader : {
  root:"data", // Here your posted json data   
  page: "currpage", // shows current page 
  total: "totalpages", // total pages 
  records: "totalrecords" // total records

},

this url may help you to understand better. JsonReader wiki

And if you dont want to be bother about pages and total you can simply

jsonReader : {
  root:"data", 
  page:  function(obj) { return 1; }, // page as 1
  total: function(obj) { return 1; }, // total  as 1
  records: function(obj) { return reponse.length;},  

},