Json jqGrid binding error

Question

In my mvc code, I am converting datatable to json.
Result of my json is in correct format but it's not populating my jqgrid.

json result :

"{\"total\":2,\"page\":1,\"records\":2,\"rows\":[{\"id\":1,\"cell\":[\"1\",\"TEST
 ACCOUNT\",\"TEST LOB\",\"TEST REPORT\"]}]}"

Code :

public string JsonForJqgrid(DataTable dt, int pageSize, int totalRecords, int page)
    {
        int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
        StringBuilder jsonBuilder = new StringBuilder();
        jsonBuilder.Append("{");
        jsonBuilder.Append("\"total\":" + totalPages + ",\"page\":" + page + ",\"records\":" + (totalRecords) + ",\"rows\"");
        jsonBuilder.Append(":[");
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            jsonBuilder.Append("{\"id\":" + (i+1) + ",\"cell\":[");
            for (int j = 0; j < dt.Columns.Count; j++)
            {
                jsonBuilder.Append("\"");
                jsonBuilder.Append(dt.Rows[i][j].ToString());
                jsonBuilder.Append("\",");
            }
            jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
            jsonBuilder.Append("]},");
        }
        jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
        jsonBuilder.Append("]");
        jsonBuilder.Append("}");
        return jsonBuilder.ToString();
    }

jqGrid :

$("#jqTable").jqGrid({
        // Ajax related configurations
        url: "Staffing/LOBStaffing",
        datatype: "json",
        mtype: "GET",
        // Specify the column names
        colNames: ["ID", "Account", "Lob", "Report"],

        // Configure the columns
        colModel: [
            { name: "ID", index: "ID", width: 40, align: "center", key: true, hidden: true },
            { name: "Account", width: 150, align: "center" },
            { name: "Lob", width: 150, align: "center" },
            { name: "Report", width: 150, align: "center" }
        ],
        rowNum: 10,
        loadonce: true,
        viewrecords: true,
        sortorder: "desc",
        caption: "List Staffing Details"
        //gridview: true,
        //scrollOffset: 0
    });

Controller Action :

[HttpGet]
    public JsonResult LOBStaffing()
    {
        string sJson = _staffing.JsonForJqgrid(_staffing.GetStaffing(), 1, 2, 1);

        return Json(sJson, JsonRequestBehavior.AllowGet);
    }

Answer 1

One of the ways that i use in projects is to populate data to this classes:

public class Row
{
    public string id { get; set; }
    public List<string> cell { get; set; }

    public Row()
    {
        cell = new List<string>();
    }
}

public class JqgridData
{
    public int page { get; set; }
    public int total { get; set; }
    public int records { get; set; }
    public List<Row> rows { get; set; }

    public JqgridData()
    {
        rows = new List<Row>();
    }
}

Your method JsonForJqgrid should return JqgridData structure allows you to store dynamic data, becouse you can add as much strings in Row as you want. Json() method in controller serialize this class right way for jqgrid.

If you need to store there not only strings but DataTime, Decimal etc. Types you can try to use dynamic type in public List<string> cell property. But i didn't check how it really works.