jqGrid not loading data.The grid is shown but data is not displayed in it

Question

I wrote a code for jqGrid but I cant get the data into my jqGrid.

$(document).ready(function () {
    jQuery("#jqgrid").jqGrid({
        url:"/VendorDetailList.ashx",
        dataType: "json",
        data: "{}",
        height: 'auto',
        postData: {
            Entity: function () {
                return 'vendor';
            }
        },
        colNames: ['vendorrep_id','vendor_id','Name', 'Phone Number', 'Job Title', 'Email','Entity'],
        colModel: [{
            name: 'vendorrep_id',
            index: 'vendorrep_id',
            key: true,
            search:false,
            hidden: true,
            editable: true,
            editrules: { edithidden: false, readonly: true },
            search:false
        },
        {
            name: 'vendor_id',
            index: 'vendor_id',
            key: true,
            search:false,
            hidden: true,
            editable: true,
            editrules: { edithidden: false, readonly: true },
            search:false
        },
        {
            name: 'name',
            index: 'name',
            editable: true,
            editrules: {required:true}
        }, {
            name: 'phone',
            index: 'phone',
            editable: true
        }, {
            name: 'jobtitle',
            index: 'jobtitle',
            editable: true
        }, {
            name: 'email',
            index: 'email',
            editable: true
        }, 
       {
           name: 'Entity', hidden: true, editable: true, editrules: { edithidden: false }, formatter: function () {
               return 'Vendor';
           },
       }
        ],
        data: JSON.parse(result),
        rowNum: 10,
        mtype: 'POST',
        loadonce: true,
        rowList: [10, 20, 30],
        pager: '#pjqgrid',
        sortname: 'CompanyName',
        multiselect: true,
        multipleSearch:true,
        autowidth: true,
        height: 'auto',
        scrollOffset: 0,
        shrinkToFit: true,
        //toppager: true,
        cloneToTop: true,
        ignoreCase: true,
        viewrecords: true,

        gridview: true,
        sortorder: 'asc',
        caption: "Vendor Rep",
        editurl: '/VendorDetailList.ashx'
    });
});

HTTP handler code is here:

public class VendorList : IHttpHandler, IReadOnlySessionState
{
    string MethodName = string.Empty;
    string CallBackMethodName = string.Empty;
    object Parameter = string.Empty;
    DbVendor _DbVendor = new DbVendor();
    public void ProcessRequest(HttpContext context)
    {

        context.Response.ContentType = "application/json";
        MethodName = context.Request.Params["oper"];
        Parameter = context.Request.Params;
        CallBackMethodName = context.Request.Params["callbackmethod"];
        switch (MethodName)
        {
            case null:
                context.Response.Write(GetVendor());
                break;
            case "getbyid":
                context.Response.Write(GetById());
                break;
            case "add":
                context.Response.Write(Insert(context));
                break;
            case "edit":
                context.Response.Write(Update(context));
                break;
            case "del":
                context.Response.Write(Delete(context));
                break;
        }
    }

    public string GetVendor()
    {

        JsonResponse _response = new JsonResponse();
        System.Web.Script.Serialization.JavaScriptSerializer jSearializer =
                       new System.Web.Script.Serialization.JavaScriptSerializer();
        try
        {


            System.Collections.Generic.List<vendor> _Vendor = _DbVendor.GetVendorDetails();
            _response.IsSucess = true;
            _response.Message = string.Empty;
            _response.CallBack = CallBackMethodName;
            _response.ResponseData = _Vendor;
        }
        catch (Exception ex)
        {
            _response.Message = ex.Message;
            _response.IsSucess = false;
        }
        return jSearializer.Serialize(_response);
    }

getVendorDetails() function is here:

SqlConnection _con = new SqlConnection(ConfigurationManager.ConnectionStrings["junaidcrmConnectionString"].ConnectionString);

    public List<VendorRep> GetVendorDetails()
    {
        try
        {
            List<VendorRep> _lstVendor = new List<VendorRep>();
            VendorRep _Vendor = null;
            if (_con.State != System.Data.ConnectionState.Open)
                _con.Open();
            SqlCommand _cmd = _con.CreateCommand();
            _cmd.CommandText = "Select * From vendorrep";
            SqlDataReader _Reader = _cmd.ExecuteReader();

            while (_Reader.Read())
            {

                _Vendor = new VendorRep();
                _Vendor.vendor_id = Convert.ToInt32(_Reader["vendor_id"]);
                _Vendor.name = _Reader["name"].ToString();
                _Vendor.phone = _Reader["phone"].ToString();
                _Vendor.email = _Reader["email"].ToString();
                _Vendor.jobtitle = _Reader["jobtitle"].ToString();
                _Vendor.vendorrep_id =Convert.ToInt32(_Reader["adress"].ToString());

                _lstVendor.Add(_Vendor);

            }
            return _lstVendor;
        }
        catch (Exception ex)
        {
            throw ex;
        }
        finally
        {
            if (_con.State != System.Data.ConnectionState.Closed)
                _con.Close();
        }
    }

Answer 1

The most important error in your code is the usage of dataType: "json" instead of datatype: "json". The options like data: JSON.parse(result), with undefined result needed be removed of case. You can't place key: true property for more as one column. I would recommend you to include loadError callback in your code too (see the answer).

Answer 2

You can try changing these:

jQuery("#jqgrid").jqGrid({
        url:"/VendorDetailList.ashx",
        mType: "json", // change to mtype and remove data:"{}" as you are using postData.
        height: 'auto',
        postData: {
            Entity: function () {
                return 'vendor';
            }
        },

and url:"/VendorDetailList.ashx", from this url return a valid json then your jqgrid will be populated.