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();
        }
    }

You might want to make your return data jason instead of javascriptserlialized (not sure since I don't know what a javascriptserializer does exactly) because your ajax request is expecting json data to be returned — Jeremy C., Jun 10 '15 at 08:12

score 0 · Answer 1 · answered Jun 10 '15 at 08:16

0

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.

answered Jun 10 '15 at 08:16

Jai

74,255
12
74
103

i did the same as u said mType:'json' and remove the data:"{}" but still my jqgrid is not populated – Aazan Abeer Jun 10 '15 at 10:19

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

0

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).

edited May 23 '17 at 10:34

Community

1
1

answered Jun 10 '15 at 11:59

Oleg

220,925
34
403
798

i reached out my question limit because em new here and i didnt know the actual way how to ask question. .if we have a a JqGrid on one page and after clicking on one of the coloumn we move on to the next page like { name: 'name', index: 'name',editable: true,formatter: 'showlink', formatoptions: { baseLinkUrl: 'vendorDetail.aspx' },editrules: {required:true}} ............... on the next page their is another JqGrid now i want to access the coloumn value of previous JqGrid in the next page.. kindly help me if u have some idea – Aazan Abeer Jun 11 '15 at 07:15
@AazanAbeer: There are many ways to implement the scenario. 1) don't divide the code into two pages. You can just hide unneeded parts if required (you can place there in outer div which you can hide/show). It's the simplest way. 2) You can set the same information if Cookie or better in `localStorage`. The only restriction: both URLs have to be from the same web site. 3) You can add URL parameter to the second page provide information to go back. I'm sure that one can suggest more solutions of the same problem. – Oleg Jun 11 '15 at 07:35

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

2 Answers2