jqGrid JSON map not reading INDEX value

Question

I'm trying to display a jqGrid using jquery 1.6.2.mins, and the latest jqGrid - jqGrid 4.5.4.

My project setup is: ASP.NET - MVC2 using Visual Studio 2010. Framework is .Net 4.0

Problem: In my C# class I'm adding all the rows from the database that I will be using at one point or another. I just want to display two rows initially (NAME, DESCRIPTION).

The jqGrid displays two rows but its displaying my id's row in the first where it should be displaying what the Description column displays. So basically whats happening is, the rows are being shifted to the right, and my column mapping its not working. NAME = 'NAME_TXT', but for some reason what I'm getting in the display is NAME = ID;

colNames: ['NAME', 'DESCRIPTION'],
colModel: [
    { name: 'NAME', index: 'NAME_TXT', align: 'left' },
    { name: 'DESCRIPTION', index: 'DESCRIPTION_TXT', align: 'left'}
],

I will also like to know how can I display everything that the JSON data is getting back from the C# code, how do I display the object in console.log("JSON DATATYPE: " + $datatype), something like that.

Thank you.

JavaScript Code:

$(function () {
    $grid = $("#grid");

    $grid.jqGrid({
        type: 'GET',
        contentType: "application/json; charset=utf-8",
        url: '/csc/devapp1/Home/LinqGridData/',
        datatype: 'json',
        colNames: ['NAME', 'DESCRIPTION'],
        colModel: [
            { name: 'NAME', index: 'NAME_TXT', align: 'left' },
            { name: 'DESCRIPTION', index: 'DESCRIPTION_TXT', align: 'left'}],    
        sortname: 'NAME_TXT',
        sortorder: "desc",
        repeatitems: false,
        viewrecords: true,
        height: '500px',
        autowidth: true});
});

C# code:

public ActionResult LinqGridData(string sidx, string sord, int page, int rows)
{
    var context = new CSCEntities();

    var jsonData = new
    {
        total = 1,
        page = page,
        records = context.tbl_Quickfix_Toolbar.Count(),
        rows = context.tbl_Quickfix_Toolbar.AsEnumerable().Select(n =>
            new { n.QUICKFIX_ID, 
                cell = new string[] { 
                    n.QUICKFIX_ID.ToString(), 
                    n.NAME_TXT.ToString(), 
                    n.DESCRIPTION_TXT.ToString(), 
                    n.INSTRUCTIONS_TXT.ToString(),
                    n.TYPE_TXT.ToString(),
                    n.FIXLINK_TXT.ToString()} 
            }).ToArray()
    };
    return Json(jsonData, JsonRequestBehavior.AllowGet);
}

Other C# code I tried in the past that didn't work:

public ActionResult GridData(string sidx, string sord, int page, int rows)
    {
        CSCEntities entities = new CSCEntities();
        int pageIndex = Convert.ToInt32(page) - 1;
        int pageSize = rows;
        int totalRecords = entities.tbl_Quickfix_Toolbar.Count();
        int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);

        var jsonData = new {
            total = totalPages,
            page = page,
            records = totalRecords,

            rows = (
                from entity in entities.tbl_Quickfix_Toolbar

                select new {
                    id = entity.QUICKFIX_ID,
                    cell = new string[] {

                        entity.NAME_TXT.ToString(),
                        entity.DESCRIPTION_TXT.ToString(), 
                        entity.QUICKFIX_ID.ToString(),
                        entity.INSTRUCTIONS_TXT.ToString() }
                    }).ToArray()
        };
        return Json(jsonData, JsonRequestBehavior.AllowGet);
    }

Answer 1

The code which you posted have many problems on both client and the server side. I'll mention only some of the problems.

Your main problem is in the server code which you use. You use currently in the server code

...
new { n.QUICKFIX_ID, 
    cell = new string[] { 
        n.QUICKFIX_ID.ToString(), 
        n.NAME_TXT.ToString(), 
        n.DESCRIPTION_TXT.ToString(), 
        n.INSTRUCTIONS_TXT.ToString(),
        n.TYPE_TXT.ToString(),
        n.FIXLINK_TXT.ToString()} 
}
...

which seems should be changed to

...
new {
    id = n.QUICKFIX_ID, 
    cell = new [] { 
        n.NAME_TXT.ToString(), 
        n.DESCRIPTION_TXT.ToString()
    }
}
...

You should additionally to consider to remove .AsEnumerable() or to move it after select are applied.

First of all index property have only some meaning in server side sorting. The server code which you posted don't use sidx and sord parameters. So you should remove all index properties from the colModel. If no index property specified jqGrid uses the same value for index as the value name property. It's what one need in 99% of scenarios. So I recommend you to specify no index property. Because you use array format of items (cell = new string[] {...} the choice of name property is free. You can use name: 'NAME_TXT' in the same way like name: 'NAME'. If the names of columns in the database are NAME_TXT and DESCRIPTION_TXT I would personally prefer to use the same values for name.

Default value of align property is already 'left'. So it's better to remove unneeded align: 'left' property from colModel. The value of '500px' for height option is wrong. Correct values are the string "auto" or the string "100%" or any integer value like height: 500. I personally like to use height: "auto".

jqGrid don't have contentType option. If you need to specify contentType of HTTP request you should use {ajaxGridOptions: { contentType: "application/json; charset=utf-8" } instead. The option repeatitems don't exist and it should be removed. On the other side I would recommend you to add two other options in jqGrid: gridview: true and autoencode: true.

One more very important option is rowNum. It's default value is 20. The value will be sent to the server as the value of rows parameter (see parameters of LinqGridData). The server should return only rows items of data sorted by sidx. If the server returns more as rows items (more as 20 items) jqGrid will still display only the first rows items (only the first 20 items). Typically grid have the pager bar at the bottom or at the top of grid. So the user can go to another page. You don't use currently neither page nor toppager option. As the result the grid will contains up to 20 rows, and the user will have no possibility to use paging to see the rest data. I recommend you to use pager or toppager: true option or at least you should include rowNum: 10000 option to display up to 10000 rows returned from the server.

If you don't implemented server side paging, sorting and filtering of data you can return all data to jqGrid, but use loadonce: true option of jqGrid. In the case all data will be saved locally, datatype will be changed to "local" after the first loading from the server and the user will able to sort data locally or to use paging without require that you write any additional code. It's very practical option if the data which you need display (tbl_Quickfix_Toolbar) are not too large.