jqgrid undefined integer? pager not loading
Asked Answered
G

2

13

IM using jqgrids on mvc4, I need to get a simple list and display it using Ajax.

When I load the page then grid starts an Ajax call, I have only 2 columns on grid, user_id and name.

When the Json is loaded I get the next error on Google chrome:

Uncaught Typesetter: Cannot read property 'integer' of undefined

and in firefox, firebug:

TypeError: b.jgrid.formatter is undefined

on jquery.jqGrid.src.js:122

And the grid shows an "undefined" msg, also, the current pageer control isnt loading, but the data is

 <table id="GridUsuarios"></table>
    <div id="PagerUsuarios"></div>


  <script type="text/javascript"> 
        $(document).ready(function() {
            jQuery("#GridUsuarios").jqGrid({
                url: '@Url.Action("UsuariosGridData","Usuarios")',
                datatype: "json",
                myType: 'GET',
                contentType: "application/json; charset-utf-8",                
                colNames: ['Usuario', 'Nombre'],
                colModel: [
                    { name: 'user_id', index: 'user_id', width: 90},
                    { name: 'nombre', index: 'nombre', width: 200}
                ],
                pager: '#PagerUsuarios',
                rowNum: 10,
                rowList: [10, 20, 30],
                viewrecords: true,
                height: 'auto',
                sortname: 'nombre',
                sortorder: 'desc',
                caption: "Usuarios",
                jsonReader: {
                    root: "rows",
                    total: "total",
                    page: "page",
                    records: "records",
                    repeatitems: false,
                    id: "user_id"
                },
            });            
        });
    </script>

and my controller:

    public JsonResult UsuariosGridData(string sidx = "" , string sord = "", int page = 1, int rows = 10)
    {
        var resultado = db_hms.Users//.OrderByDescending(ur => ur.id_user)
                        .Join(db_hms.v_natural_person_short, ur => ur.id_employee, np => np.id_natural_person, (ur, np) => new { Users = ur, Natural_Person = np })//cambiar el idUser por idEmployee la relacion es alrevez XD                            
                        .Select(s => new { user_id = s.Users.id_user, nombre = s.Natural_Person.name_full })
                        .ToList();



        int vpage = page;
        int vrows = rows;  
        int counter = (int)Math.Ceiling((float)resultado.Count() / (float)vrows);            
        switch (sidx)
        {
            case "nombre":
                {
                            if(sord == "desc")
                            {
                                resultado = resultado.OrderByDescending(s => s.nombre).Skip(vrows * vpage).Take(vrows).ToList();
                            }
                            else
                            {
                                resultado = resultado.OrderBy(s => s.nombre).Skip(vrows * vpage).Take(vrows).ToList(); ;
                            }
                    break;
                }
            case "user_id":
                {
                            if(sord == "desc")
                            {
                                resultado = resultado.OrderByDescending(s => s.user_id).Skip(vrows * vpage).Take(vrows).ToList();
                            }
                            else
                            {
                                resultado = resultado.OrderByDescending(s => s.user_id).Skip(vrows * vpage).Take(vrows).ToList();
                            }
                    break;
                }
        }
        var retornar = new
        {
            total = counter,
            page = vpage,
            records = vrows,
            rows = resultado
        };

        return Json(retornar, JsonRequestBehavior.AllowGet);

    }

and a small json example:

{"total":101,"page":1,"records":303,
 "rows":[{"user_id":"titito","nombre":"EL bonito, tito "},
        {"user_id":"noro","nombre":"ElMoro, Noro "},
        {"user_id":"maka","nombre":"Martinez, Macanencio "}]}
Geraud answered 23/5, 2013 at 15:20 Comment(0)
B
40

One get the error message typically if one don't included required language file grid.locale-XX.js (for example grid.locale-en.js) before jquery.jqGrid.min.js or jquery.jqGrid.src.js. See the example of the usage of jqGrid in the documentation.

Additionally I would recommend you to add gridview: true and autoencode: true option to jqGrid, remove non-existing myType: 'GET' (there are mtype option which default value if "GET"), reduce jsonReader to jsonReader: {repeatitems: false, id: "user_id"}, remove all index properties from colModel (because you use the values the same as the value of name property) and add key: true to definition of 'user_id' column.

Because you don't implemented server side paging of data I would recommend you add additionally loadonce: true option. It allows you to return all data at once from UsuariosGridData and jqGrid will implement client side sorting, paging or optionally filtering/searching of data.

Baroque answered 23/5, 2013 at 15:46 Comment(9)
cant get it to worck, this is my BundleConfig: bundles.Add(new ScriptBundle("~/bundles/jqgrid").Include( "~/Scripts/jquery.jqGrid.js", "~/Scripts/i18n/grid.locate-es.js", "~/Scripts/jquery.jqGrid.src.js")); bundles.Add(new StyleBundle("~/Content/jquery.jqgrid/jqgridui").Include( "~/Content/jquery.jqGrid/ui.jqgrid.css"));Geraud
and on the layout @Scripts.Render("~/bundles/modernizr") @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryui") @Scripts.Render("~/bundles/jqgrid") @RenderSection("scripts", required: false)Geraud
@EricGS: You are welcome! You don't need to include "~/Scripts/jquery.jqGrid.js" if "~/Scripts/jquery.jqGrid.src.js" or "~/Scripts/jquery.jqGrid.min.js" is included. So one should just include "~/Scripts/i18n/grid.locate-es.js" and then for example "~/Scripts/jquery.jqGrid.src.js".Baroque
Once again, Oleg to our rescue!Municipality
Good catch @Baroque . I added your solution to blog: blog.webdevilopers.net/… Thanks!Cleareyed
Four years later and I'm still using jqGrid. This solution actually worked for me, although I was dubious. Problem solved. Thank you.Daukas
@RodHartzell: You are welcome! Which version of jqGrid you use from from which fork of jqGrid? The fork free jqGrid don't need to include grid.locale-en.js. The current version of free jqGrid is 4.15.3.Baroque
Outstanding! I will switch to free jqGrid immediately.Daukas
@RodHartzell: In the case I'd recommend you to look through the page, some wiki articles and probably the READMEs of old releases of free jqGrid (for example the demo jsfiddle.net/OlegKi/su7ebs65 is included in README of version 4.14.1).Baroque
B
0

Add a reference to the jqgrid locale file first followed by jqrid

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script src="https://cdn.jsdelivr.net/jqgrid/4.6.0/jquery.jqGrid.min.js"></script>
Belgae answered 16/6, 2016 at 9:43 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.