CODEWITHSUNDEEP
jqueryjqgridjqgrid-asp.net
Ein2012
Ein2012

Reputation: 1103

Json data is not binding to jqgrid

This is my first example with jQGrid ,I've written the following code .Grid is displayed but data is not bound.I've looked many examples but found no answer

This is my Jquery Code

jQuery("#jQGridDemo").jqGrid({
                            url: 'http://localhost:7887/application/get',
                            datatype: "json",
                            contentType: 'application/json; charset=utf-8',
                            page: 1,
                            loadonce: true,
                            gridView: true,
                            loadonce: true,

                            colNames: ['Application ID', 'Application Name', 'PageLink', 'CreatedDate'],
                            colModel: [
                                { name: 'ApplicationId', key: true, width: 75 },
                                { name: 'ApplicationName', width: 150 },
                                { name: 'PageLink', width: 150 },
                                { name: 'CreatedDate', width: 150 }

                            ],

                            width: 750,
                            height: 250,
                            rowNum: 20,
                            scroll: 1, // set the scroll property to 1 to enable paging with scrollbar - virtual loading of records
                            emptyrecords: 'Scroll to bottom to retrieve new page', // the message will be displayed at the bottom 
                        })

I'm using web API 2 this is the c# code

    [Route("get")]
    [HttpGet]
public HttpResponseMessage GetApplicationData()
{
    //string pno = Request.RequestUri.ToString();

    DataSet ds = new DataSet();

    FillDataSet(ref ds);

    DataTable dt = ds.Tables[0];
    var Jsonresponse = JsonConvert.SerializeObject(dt);
    return Request.CreateResponse(HttpStatusCode.OK, Jsonresponse);
}

Reponse looks in the following format ..

"[{\"ApplicationId\":1,\"ApplicationName\":\"Home\",\"PageLink\":\"~/web/Index.aspx\",\"CreatedDate\":\"2013-08-14T12:09:07.93\"},{\"ApplicationId\":2,\"ApplicationName\":\"Identify\",\"PageLink\":\"~/Web/Material/Home.aspx\",\"CreatedDate\":\"2013-08-14T12:09:07.93\"}........]"

Can any one tell me why this data is not bound to grid and pls suggest a few references to get learning for working with JQGrid

Upvotes: 0

Views: 3276

Answers (1)

Oleg
Oleg

Reputation: 221997

I recommend you to do the following:

  1. remove http://localhost:7887 prefix from url: 'http://localhost:7887/application/get'. Corresponds to Same-origin policy you can't make Ajax requests per default to another source as the source of HTML page (no other server or other port). So it's better to use absolute paths '/application/get' or relative paths 'application/get' in the URLs.
  2. You should remove syntax error in your JavaScript code. For example the usage of loadonce: true twice is the syntax error.
  3. JavaScript is case sensitive language. So you should be carefully in the case of all parameters which you use. For example there are no gridView option. You should use gridview: true instead.
  4. I don't recommend you to use scroll: 1 at least at the beginning. Virtual scrolling have many small problems and restrictions in the usage of other methods. Instead of that you can add the standard pager by using of toppager: true for example.
  5. I would recommend you to use height: "auto" and autoencode: true options.
  6. jqGrid has no contentType option. You mean probably ajaxGridOptions: {contentType: 'application/json; charset=utf-8'}

Now I think you have problem in the server part of your code. If you use datatype: "json" then the HTTP request will have Accept: application/json in the HTTP header. So one uses typically something like IEnumerable<Application> as the result value of GetApplicationData(). The Web API 2 will convert the resulting object to JSON automatically based on Accept: application/json. If you makes unneeded manual translation to JSON then Web API 2 will suppose that the string (and not array of items) is the returned type of data. Corresponds to JSON standard all quotes " will be escaped. So the response contains the string

"[{\"ApplicationId\":1,\"ApplicationName\":\"Home\",...}...]"

instead of

[{"ApplicationId":1,"ApplicationName":"Home",...}...]

To fix the problem you should change the return type of GetApplicationData() and to remove unneeded manual call of JsonConvert.SerializeObject.

I recommend you to use Fiddler or Developer Tools of IE/Chrome/Firefox (press F12 to start) to trace HTTP traffic between the client and the server. It's very important for common understanding and for troubleshooting.

Upvotes: 1

Related Questions