Call WebMethod from jqGrid

Question

I am learning jqGrid and following this link. However demo is build in Asp.Net MVC and I am trying it using Asp.Net WebForms. My debugger is not stepping in into WebMethod

Here is my code

$("#tblDemo").jqGrid(
            {
                url: 'Default.aspx/GetGridData',
                datatype: "json",
                mtype: 'GET',
                colNames: ['Id', 'First Name', 'Last Name'],
                colModel: [
                { name: 'Id', index: 'EmloyeeId', width: 20, stype: 'text' },
                { name: 'FirstName', index: 'FirstName', width: 150 },
                { name: 'LastName', index: 'LastName', width: 150 }]
                , rowNum: 10,
                sortname: 'Id',
                viewrecords: true,
                sortorder: "desc",
                caption: "List Employee Details",
                scrollOffset: 0
            });

The problem doesn't seems to be with WebMethod because it is being called if I use $.ajax (just to test WebMethod). Still have a look at WebMethod.

Here are files I referenced.

    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <link href="js/css/ui.jqgrid.css" rel="stylesheet" />
    <script src="js/js/jquery.jqGrid.min.js"></script>
    <script src="js/js/i18n/grid.locale-en.js"></script>
    <link href="http://code.jquery.com/ui/jquery-ui-git.css" />
    <script src="js/js/jquery.json.min.js"></script>

There is no error on console. Please help me figure out this.

Update 1

Changed my jqGrid code as suggested. Now it look like this

$("#tblDemo").jqGrid(
            {
                url: '/Default.aspx/GetGridData',
                datatype: "json",
                mtype: 'GET',   
                colNames: ['Id', 'First Name', 'Last Name'],
                loadonce : true,
                colModel: [
                { name: 'Id',  width: 20, stype: 'text' },
                { name: 'FirstName',  width: 150 },
                { name: 'LastName',  width: 150 }]
                , rowNum: 10,

                sortname: 'Id',
                viewrecords: true,
                sortorder: "desc",
                caption: "List Employee Details",
                scrollOffset: 0,
                gridview: true,
                autoencode: true,
                ajaxGridOptions: { contentType: "application/json" },
                serializeGridData: function (postData) {
                    return JSON.stringify(postData);
                },
                jsonReader: {
                    root: "d.rows",
                    page: "d.page",
                    total: "d.total",
                    records: "d.records"
                }
            });

I did not include definition of GetData because it was not causing problem as debugger was not even hitting first line of my WebMethod. Basically it is getting data from database into DataTable

[WebMethod]
        //[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static string GetGridData()
        {
            return JsonConvert.SerializeObject(GetData());
        }

        public static DataTable GetData()
        {
            string conStr = System.Configuration.ConfigurationManager.ConnectionStrings["dbConString"].ToString();

            DataTable dt = new DataTable();

            using (var con = new SqlConnection(conStr))
            {
                using (var cmd = new SqlCommand("Select * From MyTest",con))
                {
                    SqlDataAdapter da = new SqlDataAdapter(cmd);
                    da.Fill(dt);
                }
            }
            return dt;
        }

Update 2

As suggested by Oleg, I have changed my code as below

[WebMethod]
        //[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static string GetGridData()
        {
             return JsonConvert.SerializeObject(GetData());
        }

        public static DataTable GetData()
        {
            string conStr = System.Configuration.ConfigurationManager.ConnectionStrings["dbConString"].ToString();

            DataTable dt = new DataTable();

            using (var con = new SqlConnection(conStr))
            {
                using (var cmd = new SqlCommand("Select * From MyTest",con))
                {
                    SqlDataAdapter da = new SqlDataAdapter(cmd);
                    da.Fill(dt);
                }
            }
            return dt;
        }



$("#tblDemo").jqGrid(
            {
                url: '/Default.aspx/GetGridData',
                datatype: "json",
                mtype: 'GET',   
                colNames: ['Id', 'First Name', 'Last Name'],
                loadonce : true,
                colModel: [
                { name: 'Id', key: true, width: 20, stype: 'text' },
                { name: 'FirstName',  width: 150 },
                { name: 'LastName',  width: 150 }]
                , rowNum: 10,

                sortname: 'Id',
                viewrecords: true,
                sortorder: "desc",
                caption: "List Employee Details",
                scrollOffset: 0,
                gridview: true,
                postData: "{}",
                autoencode: true,
                loadError : function(xhr,st,err) { 
                    alert("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText);
                },
                ajaxGridOptions: { contentType: "application/json" },
                serializeGridData: function (postData) {
                    return JSON.stringify(postData);
                },
                jsonReader: {
                    repeatitems: false,
                    root: function (obj) {
                        return typeof obj.d === "string" ? $.parseJSON(obj.d) : obj.d;
                    }
                }
            });

Update 3

Added screenshot on how demo shows response body

Answer 1

You don't posted the server side code or at least the definition of GetGridData. Moreover you should always include information about the version of jqGrid which you use.

I suppose that you use ASMX-WebMethod. In the case you should include the following parameters

gridview: true,
autoencode: true,
ajaxGridOptions: { contentType: "application/json"},
serializeGridData: function (postData) {
    return JSON.stringify(postData);
},
jsonReader: {
    root: "d.rows",
    page: "d.page",
    total: "d.total",
    records: "d.records"
}

Additionally you should remove all index properties of colModel and consider to use loadonce: true option, if you don't plan to implement server side paging.

If you have any problems with loading the data in jqGrid you should always include loadError callback in jqGrid. See the answer for more details.