jqgrid getting error when grid is getting loaded

Jqgrid is able to load the data. But, gviing error when it getting loaded.

Error is at below lin in - jqgrid min version:

k=b.jgrid.formatter.integer||{} saying unable to get property of undefined null reference

Layout has included script file as follow:

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

Please help me I m just stuck. and spent 3 hours...

I google and found many link where it syas, locale is not added or add it on first line.. but still not got success.

            $('#CategoriesGrdList').jqGrid({
            ajaxGridOptions: {
                error: function () {
                    $('#CategoriesGrdList')[0].grid.hDiv.loading = false;
                    alert('An error has occurred.');
                }
            },
            url: '@Url.Action("GetAllCategoriesList", "Categories")/' + 0,
            gridview: true,
            autoencode: true,
            //public JsonResult GetEnrolls(int adClassSchedID,DateTime attendanceDate,int adProgramID,int syCampusID)
            postData: { categoryId: 1 },
            //postData: { categoryId: rowID, attendanceDate: $('#AttendanceDate').val(), adProgramID: $('#adProgramID').val(), syCampusID: $('#syCampusID').val() },
            datatype: 'json',
            jsonReader: { root: 'List', page: 'Page', total: 'TotalPages', records: 'TotalCount', repeatitems: false, id: 'Id' },
            mtype: 'GET',
            colNames: ['Id', 'Code', 'Description', 'IsActive'],
            colModel: [
                  { name: 'Id', index: 'Id', hidden: true },
                { name: 'Code', index: 'Code', width: 170 },
                { name: 'Description', index: 'Description', width: 170 },
            { name: 'IsActive', index: 'IsActive', width: 170 }
            ],
            pager: $('#CategoriesGrdPager'),
            sortname: 'Code',
            rowNum: 40,
            rowList: [3, 3, 3],
            width: '525',
            height: '100%',
            viewrecords: true,

            beforeSelectRow: function (rowid, e) {
                return false;

            },
            sortorder: 'desc'
        }).navGrid('#CategoriesGrdPager', { edit: false, add: false, del: false, search: false, refresh: false });
    });

Thanks

Solution

First of all you should always use jquery.jqGrid.src.js instead of jquery.jqGrid.min.js in case of some error inside of jqGrid.

I suppose that the reason of the error is missing grid.locale-en.js or other language specific file from i18n folder. The language file should be included before jquery.jqGrid.min.js or jquery.jqGrid.src.js. You should validate whether grid.locale-en.js is really loaded. Undefined $.jgrid.formatter could means only missing grid.locale-en.js (see here).

I recommend you to compare your HTML file (especially <head> part) with the demo HTML file from the jqGrid documentation.