JSON data is not displaying in JQGrid

Question

I have looked at played around with suggestions in all related answers but to no avail. I tried all kinds of options but again to no avail. I am using ASP.NET with C# as the processing language, and Oracle 10g as a database engine.

Here is my .aspx file:

<form id="LocalizationSearch" name="locSearch" defaultbutton="updateButton" runat="server">
   <script language="javascript" type="text/javascript">
    jQuery(document).ready(function () {
        var createLanguageList = function () {
            $("#list").jqGrid({
                url: "KPHandler.ashx?langname=English",
                datatype: "json",
                contentType: "application/json; charset=utf-8", 
                mtype: 'POST',
                //datatype: "local",
                //data: mydata,
                autowidth: true,
                height: 150,
                colNames: ['DelLanguageID', 'DocRecID', 'LanguageID', 'DocPartNumber,', 'NewLanguage', 'ConcentraIDLang', 'ActFromTranslation'],
                colModel: [
                    { name: 'DelLanguageID', index: 'DelLanguageID', width: 65, editable: false },
                    { name: 'DocRecID', index: 'DocRecID', width: 65, editable: false },
                    { name: 'LanguageID', index: 'LanguageID', width: 65, editable: false },
                    { name: 'DocPartNmbr', index: 'DocPartNmbr', width: 65, editable: true },
                    { name: 'NewLanguage', index: 'NewLanguage', editable: true, edittype: 'checkbox', editoptions: { value: "1:0"} },
                    { name: 'ConcentraIDLang', index: 'ConcentraIDLang', width: 65, editable: true },
                    { name: 'ActFromTranslation', index: 'ActFromTranslation', width: 120, editable: true }
                ],
                rowNum: 5,
                rowList: [10, 20, 30],
                pager: '#pager',
                sortname: 'DelLanguageID',
                viewrecords: true,
                //altRows: true,
                //sortorder: "desc",
                caption: "Deliverable Languages",
                //height: "100%",
                loadonce: true, 
                gridview: true, 
                autoencode: true,
                loadError: function (jqXHR, textStatus, errorThrown) {
                    alert('Error: ' + textStatus + errorThrown + jqXHR.responseText);
                }
            });  // JQGrid
        };  // Create function

        $("#btnLanguages").click(function () {
            createLanguageList();
        });

    });   // document ready 

</script>

    <table cellspacing="1" cellpadding="0" width="100%">
        <tr>
            <td valign="top">
                <table id="list"></table>
                <div id="pager"></div>
        </td>
        </tr>
    </table>
    <input type="button" id="btnLanguages" value="Work With Languages"  />

</form>

and here is my C# code that builds the JSON object:

<%@ WebHandler Language="C#" Class="KPHandler" %>

using System;
using System.Web;
using System.Web.Script.Serialization;
using System.Web.Configuration; 
using System.Text;
using System.Data;
using System.Collections.Generic;
using System.Configuration;
using System.Data.OracleClient;

public class KPHandler : IHttpHandler
{
    private DKCL.ReportDK Rpt = new DKCL.ReportDK();

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "application/json";
        System.Collections.Specialized.NameValueCollection forms = context.Request.Form;
        string strOperation = forms.Get("oper");

        switch (strOperation)
        {
            case null:  // means this is the first time load
                string strSQL = "SELECT DelLanguageID, DocRecID, LanguageID, DocPartNmbr, NewLanguage, " +
                                "ConcentraIDLang, ActFromTranslation FROM DELLANGUAGES WHERE DOCRECID = 18787";

                DataTable dlLanguages = Rpt.GetDataTable(strSQL);

                context.Response.Write(GetJson(dlLanguages));

                break;
            default:
                break;
        }  // End Switch

    }

    // This is generic function that converts DataTable into JSON object.
    public string GetJson(DataTable dt)
    {
        System.Web.Script.Serialization.JavaScriptSerializer serializer = new

        System.Web.Script.Serialization.JavaScriptSerializer();
        List<Dictionary<string, object>> rows =
          new List<Dictionary<string, object>>();
        Dictionary<string, object> row = null;

        foreach (DataRow dr in dt.Rows)
        {
            row = new Dictionary<string, object>();
            foreach (DataColumn col in dt.Columns)
            {
                row.Add(col.ColumnName.Trim(), dr[col]);
            }
            rows.Add(row);
        }
        return serializer.Serialize(rows);
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

and here is the JSON data returned by the above code (I actually got this as shown by Fiddler2), and my own debugging the code.:

            [{"DELLANGUAGEID":"4613","DOCRECID":"18787","LANGUAGEID":"12","DOCPARTNMBR":null,"NEWLANGUAGE":0,"CONCENTRAIDLANG":"c02609839","ACTFROMTRANSLATION":null},{"DELLANGUAGEID":"4614","DOCRECID":"18787","LANGUAGEID":"34","DOCPARTNMBR":null,"NEWLANGUAGE":0,"CONCENTRAIDLANG":null,"ACTFROMTRANSLATION":null},{"DELLANGUAGEID":"4615","DOCRECID":"18787","LANGUAGEID":"1","DOCPARTNMBR":null,"NEWLANGUAGE":0,"CONCENTRAIDLANG":"c02606925","ACTFROMTRANSLATION":null},{"DELLANGUAGEID":"4616","DOCRECID":"18787","LANGUAGEID":"13","DOCPARTNMBR":null,"NEWLANGUAGE":0,"CONCENTRAIDLANG":"c02609850","ACTFROMTRANSLATION":null},{"DELLANGUAGEID":"4617","DOCRECID":"18787","LANGUAGEID":"11","DOCPARTNMBR":null,"NEWLANGUAGE":0,"CONCENTRAIDLANG":"c02606924","ACTFROMTRANSLATION":null},{"DELLANGUAGEID":"4618","DOCRECID":"18787","LANGUAGEID":"3","DOCPARTNMBR":null,"NEWLANGUAGE":0,"CONCENTRAIDLANG":"c02606920","ACTFROMTRANSLATION":null},{"DELLANGUAGEID":"4619","DOCRECID":"18787","LANGUAGEID":"21","DOCPARTNMBR":null,"NEWLANGUAGE":0,"CONCENTRAIDLANG":null,"ACTFROMTRANSLATION":null},{"DELLANGUAGEID":"39703","DOCRECID":"18787","LANGUAGEID":"142","DOCPARTNMBR":"593957-001","NEWLANGUAGE":0,"CONCENTRAIDLANG":null,"ACTFROMTRANSLATION":null},{"DELLANGUAGEID":"89446","DOCRECID":"18787","LANGUAGEID":"161","DOCPARTNMBR":null,"NEWLANGUAGE":0,"CONCENTRAIDLANG":null,"ACTFROMTRANSLATION":null},{"DELLANGUAGEID":"97174","DOCRECID":"18787","LANGUAGEID":"162","DOCPARTNMBR":null,"NEWLANGUAGE":0,"CONCENTRAIDLANG":null,"ACTFROMTRANSLATION":null},{"DELLANGUAGEID":"112630","DOCRECID":"18787","LANGUAGEID":"164","DOCPARTNMBR":null,"NEWLANGUAGE":0,"CONCENTRAIDLANG":null,"ACTFROMTRANSLATION":null},{"DELLANGUAGEID":"104902","DOCRECID":"18787","LANGUAGEID":"163","DOCPARTNMBR":null,"NEWLANGUAGE":0,"CONCENTRAIDLANG":null,"ACTFROMTRANSLATION":null}]

Any idea what may be going wrong? The grid shows correct number of records and also pages in the pager. Any help will be most appreciated.
By the way, I tried GET vs POST, json vs jsonstring etc. and many other options including JSON Reader, but no luck.

Answer 1

The colModel index property is intended to be an exact reflection of the key in the JSON result. See the documentation:

index: The name passed to the server on which to sort the data (note that we could pass column numbers instead). Typically this is the name (or names) from the database – this is server-side sorting, so what you pass depends on what your server expects to receive.

Given that information it looks like your indexes in the example are incorrectly cased. Try correcting them to the proper case or use a numeric value.

Example:

colModel: [{ name: 'DelLanguageID', index: 'DELLANGUAGEID', width: 65, editable: false },...

Answer 2

Thank you Strake. This was painful for me, but quite educational. It works great now with just changing the ** ColModel**. Thanks again.