.Net MVC - JQXGrid - Valid data displaying as Blank Rows

Question

My JQXGrid is being loaded properly with JSON. I have comfirmed that at each step the data is both valid and correct. I have a simple query that loads all records from a SQL db and places them in the JQXGrid. The db has only 1 element (for testing purposes).

You can see at the paginator that the grid has the proper number (1) of elements. I have highlighted the only row that exists in the table. In each column, the data appears as blank (again, I have confirmed the data is correct). I have also confirmed that the datafields are correct.

JQXGrid:

 <script type="text/javascript">

$("#txtSearch").bind("keypress", {}, keypressInBox);

function keypressInBox(e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code == 13) { //Enter keycode
        e.preventDefault();

        loadGrid();
    }
};

$(document).ready(function () {

    loadGrid();

});

function loadGrid() {
    var search = $("#txtSearch").val();

    var url = "/AIR/GetAIRs/?search=" + search;

    // prepare the data
    var source =
    {
        datatype: "json",
        datafields: [

             { text:  'EditLink', type: 'string'},
            { text: 'emissionUnit', type: 'string' },
            { text:  'emissionDesc', type: 'string' },
            { text:  'Process', type: 'string' },
            { text:  'ProcessDescription', type: 'string' },
            { text:  'Buildings', type: 'string' },
            { text: 'LastUpdateDate', type: 'date' },

            { text: 'DeleteLink', type: 'string' }
],
        url: url,
        pager: function (pagenum, pagesize, oldpagenum) {
            // callback called when a page or page size is changed.
        }
    };

    var dataAdapter = new $.jqx.dataAdapter(source);
    $("#jqxgrid").jqxGrid(
    {
        width: '100%',
        source: dataAdapter,
        selectionmode: 'multiplerowsextended',
        sortable: true,
        pageable: true,
        filterable: true,
        filtermode: 'excel',
        autoheight: true,
        columnsheight: 45,
        columnsresize: true,
        autorowheight: true,
        pagerheight: 60,

        columns: [
             { text: "", datafield: "EditLink", width: 80 },
            { text: "Emission Unit", datafield: "emissionUnit", width: 125 },
            { text: "Emission Description", datafield: "emissionDesc", width: 200 },
            { text: "Process", datafield: "Process", width: 125 },
            { text: "Process Description", datafield: "ProcessDescription", width: 200 },
            { text: "Buildings", datafield: "Buildings", width: 150 },
            { text: "Last Update Date", datafield: "LastUpdateDate", cellsformat: 'd', width: 150 },

            { text: "", datafield: "DeleteLink", width: 80 }

        ]
    });
};

Model:

    public class EmissionUnitMatrixModel
{
    [Key]
    [DisplayName("EmissionUnitMatrixID")]
    public int EmissionUnitMatrixID { get; set; }
    [DisplayName("EmissionUnitLookupID")]
    public int? EmissionUnitLookupID { get; set; }
    [DisplayName("ProcessID")]
    public int? ProcessID { get; set; }
    [DisplayName("LastUpdateDate")]
    public DateTime? LastUpdateDate { get; set; }
    [DisplayName("LastUpdateBy")]
    public string LastUpdateBy { get; set; }
    [DisplayName("CreatedDate")]
    public DateTime? CreatedDate { get; set; }
    [DisplayName("CreatedBy")]
    public string CreatedBy { get; set; }
    [DisplayName("Active")]
    public bool? Active { get; set; }
    public string ActiveText { get; set; }
    public string EditLink { get; set; }
    public string DeleteLink { get; set; }
    public string ProcessDescription { get; set; }
    public string Process { get; set; }
    public string emissionUnit { get; set; }
    public string Buildings { get; set; }
    public string emissionDesc { get; set; }

}

Controller:

        public JsonResult GetAIRs(string search)
    {
        var surveys = dashboardService.GetAIRList();
        var json = Json(surveys, JsonRequestBehavior.AllowGet);
        return json;
    }

DAL:

        public List<EmissionUnitMatrixModel> GetAIRList()
    {


        var query = emuserivce.GetAll();



        return query.ToList();
    }

TL;DR

I confirmed that the JSON being sent to my JQXGrid was both valid and correct. The JSON contains 1 row of data. The table renders with the correct # of rows, yet the entire row is blank. Please advice with suggestions or thoughts.

Answer 1

I see a problem in your javascript source part. According to their article on binding json data to grid, each member of datafields should have name and optional type. But in your implementation you have text in place of name.

So it should be like:

// prepare the data
    var source =
    {
        datatype: "json",
        datafields: [    
            { name: 'EditLink', type: 'string'},
            { name: 'emissionUnit', type: 'string' },
            { name: 'emissionDesc', type: 'string' },
            { name: 'Process', type: 'string' },
            { name: 'ProcessDescription', type: 'string' },
            { name: 'Buildings', type: 'string' },
            { name: 'LastUpdateDate', type: 'date' },    
            { name: 'DeleteLink', type: 'string' }
        ],
        url: url,
        pager: function (pagenum, pagesize, oldpagenum) {
            // callback called when a page or page size is changed.
        }
    };