jgGrid not getting populated by WCF Rest service call

Question

I am new to jQuery and jqGrid. I have written following code to call a WCF RESTful service and populate a jqGrid. Though the call to WCF RESTful service returns a json output, jqGrid for some reason is not able to interpret this output.

IService Interface:

    [ServiceContract]
    public interface IService
    {
      [OperationContract]
      [WebInvoke(UriTemplate = "/Employees", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, Method = "GET")]
      List<Employee> GetCollection();
    }

    [DataContract(Namespace="")]
    public class Employee
    {
      [DataMember(IsRequired = true, Name = "empId", Order = 1)]
      public string EmpId { get; set; }
      [DataMember(IsRequired = false, Name = "empName", Order = 2)]
      public string EmpName { get; set; }
      [DataMember(IsRequired = false, Name = "dob", Order = 3)]
      public DateTime DOB { get; set; }
      [DataMember(IsRequired = false, Name = "department", Order = 4)]
      public string Department { get; set; }

    }

Service Implementation:

    public List<Employee> GetCollection()
    {           
        List<Employee> empList = new List<Employee>();
        Employee emp = new Employee();
        emp.EmpId = "1";
        emp.DOB = Convert.ToDateTime("21/03/1979");
        emp.EmpName = "Haris";
        emp.Department = "HR";
        empList.Add(emp);

        return empList;            

    }

JQuery Script:

    jQuery(document).ready(function() {        
        $("#jQGrid").html("<table id=\"list\"></table><div id=\"page\"></div>");
          jQuery("#list").jqGrid({
            url:'http://localhost:9002/SampleServices/Service/REST/Employees',
            //datastr: mystr,
            data: "{}",  // For empty input data use "{}",
            dataType: "json",
            type: "GET",
            contentType: "application/json; charset=utf-8",
            colNames: ['Emp Id.', 'Emp Name', 'DOB', 'Department'],
            colModel: [{ name: 'empId', index: 'empId', width: 90, sortable: true },
            { name: 'empName', index: 'empName', width: 130, sortable: false },
            { name: 'dob', index: 'dob', width: 100, sortable: false },
            { name: 'department', index: 'department', width: 180, sortable: false }
            ],
            multiselect: false,
            paging: true,
            rowNum: 1,
            rowList: [1, 5, 10],
            pager: $("#page"),
            loadonce: true,
            caption: "Employee Details",
            success: successFunction
          }).navGrid('#page', { edit: false, add: false, del: false }
        );
    });

Call to "http://localhost:9002/SampleServices/Service/REST/Employees " returns the following: [{"empId":"1","empName":"Haris","dob":"/Date(290851200000-0700)/","department":"HR"}]

Developers could you please help me out with this?

score 0 · Accepted Answer · edited May 23 '17 at 10:34

You current code have a lot of errors. The most important error is the usage of imagination names of jqGrid options. You should examine the documentation and use the options and callbacks which are really supported. Just some examples: you use currently data, dataType, type and contentType options exist in jQuery.ajax. The corresponding jqGrid options should be postData, datatype, mtype and ajaxGridOptions: { contentType: "application/json"}. You should additionally use serializeGridData: function (postData) { return JSON.stringify(postData); }. See the answer for more details.

To be able to read the date in the format "/Date(290851200000-0700)/" you need use formatter: "date". The most important thing which you need to include in jqGrid is the jsonReader which corresponds the data which you use.

So the corresponding code should be about the following:

$(function () {
    'use strict';
    $("#jQGrid").html("<table id=\"list\"></table><div id=\"page\"></div>");
    $("#list").jqGrid({
        url: "HarisFarooqui.json",
        datatype: "json",
        height: "auto",
        jsonReader: {
            root: function (obj) {
                return obj;
            },
            repeatitems: false
        },
        serializeGridData: function (postData) {
            return JSON.stringify(postData);
        },
        colNames: ['Emp Id.', 'Emp Name', 'DOB', 'Department'],
        colModel: [
            { name: 'empId', width: 90, sortable: true, sorttype: "int" },
            { name: 'empName', width: 130, sortable: false },
            { name: 'dob', width: 100, formatter: "date", sortable: false },
            { name: 'department', width: 180, sortable: false }
        ],
        rowNum: 10,
        rowList: [10, 30, 1000],
        loadonce: true,
        rownumbers: true,
        gridview: true,
        pager: "#page",
        caption: "Employee Details"
    });
});

see the demo

enter image description here

jgGrid not getting populated by WCF Rest service call

1 Answers1