JQGrid with webservice not loading data

Question

I am using a JQGrid in .net application. I used online code samples, it does not throw any error but it do not work either not sure what iam doing wrong. Can some one who worked on JQgrid before go through my code and show me some light on what iam doing wrong. I am able to step into server side code and it does not throw any errors.Really not quite sure what iam doing wrong.

Here is the aspx page:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link rel="stylesheet" type="text/css" media="screen" href="jquery-ui-1.8.17.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="ui.jqgrid.css" />

    <script src="jquery.js" type="text/javascript"></script>

    <script src="grid.locale-en.js" type="text/javascript"></script>

    <script src="jquery.dataTables.min.js" type="text/javascript"></script>

    <script src="jquery.jqGrid.min.js" type="text/javascript"></script>

Calling gquery to load grid

    <script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery("#list").jqGrid({
                type: "GET",
                url: "MyService.asmx/GetRecipie",
                contentType: "application/json; charset=utf-8",
                dataType: "json",

                colNames: ['Inv No', 'Date', 'Amount'],
                colModel: [
      { name: 'job_id', index: 'job_id', width: 55 },
      { name: 'job_num', index: 'job_num', width: 90 },
      { name: 'order_num', index: 'order_num', width: 80, align: 'right'}],
                pager: jQuery('#pager'),
                rowNum: 10,
                rowList: [10, 20, 30],
                sortname: 'id',
                sortorder: "desc",
                viewrecords: true,
                imgpath: 'themes/basic/images',
                caption: 'My first grid',
                loadError: Error

            });
        });

        function Error(xhr, st, err) {
            jQuery("#rsperror").html("Type: " + st + "; Response: " + xhr.status + " " + xhr.statusText);
        }


    </script>

</head>
<body>
    <table id="list" class="scroll">
    </table>
    <div id="pager" class="scroll" style="text-align: center;">
    </div>
</body>
</html>

My Webservice

        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = false)]
        public string GetRecipie()
        {
            string strQuery = "SELECT * FROM job where job_id like '%2345%'";
            DataTable dtRecipie = null;
            Recipie objRecipie = default(Recipie);
            SqlConnection con = new SqlConnection("Integrated Security=SSPI;Persist Security Info=False;DATABASE=TESTDB;Data Source=SQL;");
            using (con)
            {
                con.Open();
                using (SqlDataAdapter sqlAdapter = new SqlDataAdapter(strQuery, con))
                {
                    dtRecipie = new DataTable();
                    sqlAdapter.Fill(dtRecipie);
                }
            }
            List<Recipie> drlist = new List<Recipie>();
            foreach (DataRow dr in dtRecipie.Rows)
            {
                objRecipie = new Recipie();
                objRecipie.jobId = Convert.ToInt32(dr["job_id"].ToString());
                objRecipie.JobNumber = dr["job_num"].ToString();
                objRecipie.OrderNumber = dr["order_num"].ToString();
                drlist.Add(objRecipie);
            }

            JavaScriptSerializer jSearializer = new JavaScriptSerializer();
            return jSearializer.Serialize(drlist);

        }
    }


    public class Recipie
    {
        public int jobId;
        public string JobNumber;
        public string OrderNumber;
    }


}

Is it because you have UseHttpGet = false, but your Ajax call is made with a GET instead of POST? — Tuan, Feb 09 '12 at 20:16
@Tuan: In general you are right, but the HTTP GET will be used not because of `type: "GET"`, but because the correct name of the parameter should be `mtype: "POST"`. The parameter `dataType: "json"` is also wrong (wrong case). So default `datatype: "xml"` will be used by jqGrid. The published code contains so many errors that the list will be too long. For example instead of return `drlist` object (`List`) from the web method one call `JavaScriptSerializer.Serialize` manually. The resulting string will be JSON encoded one more time. I can continue... — Oleg, Feb 09 '12 at 20:48
@user1098028: I recommend you to read [the answer](http://stackoverflow.com/a/3161542/315935). [Here](http://stackoverflow.com/a/4031603/315935) and [here] you can find some links to demo projects which you can download. I hope that you can modify the demos to your environment. — Oleg, Feb 09 '12 at 20:52

score 0 · Answer 1 · answered Feb 09 '12 at 20:48

1 - You're serializing the list of your entities without changing them to the format that jqgrid understands.

You should return a Json that looks like this:

{ 
    "page":"1",
    "total":4,
    "records":"10",

    "rows":[
        {"id":"1","cell":["Prabir","Shrestha"]},
        {"id":"2","cell":["Bill","Gates"]},
        {"id":"3","cell":["Steve","Ballmer"]}
    ] 
}

From: http://blog.prabir.me/post/Using-jqGrid-with-ASPNET-Web-Forms-e28093-Part-I.aspx. This site explains how you can convert your data to this format.

There's other thing, in your webservice you're using UseHttpGet = false, while you're initializing jqgrid with type: "GET". You need to change one of those.

JQGrid with webservice not loading data

1 Answers1