why is my jqGrid is empty eventhough json data is present

Question

Here is my jqGrid, that is not displaying any data.

I'm getting the json response for the grid, but it is not displaying.

Here is what i've done so far.

<script type="text/javascript">
        $.jgrid.no_legacy_api = true;

        function getCompanyData() {
        //debugger;
            $.ajax({
                url: "jqGrid_pureJS.aspx/GetCompanyList",
                data: "{}",  // "{}" For empty input data use "{}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function (result) {
                    //debugger;
                    var grdData = $("#jqGrid")[0];
                    grdData.addJSONData(result.d);
                },
                error: function (result) {
                    //debugger;
                }
            });
        }
        $(function () {
            $("#jqGrid").jqGrid({
                datatype: getCompanyData,
                colNames: ['Id', 'Name', 'Address', 'City', 'Phone'],
                colModel: [
                          { name: 'F1', index: 'invid', width: 55 },
                          { name: 'F2', index: 'invdate', width: 90,editable:true },
                          { name: 'F3', index: 'amount', width: 80,editable:true, align: 'right' },
                          { name: 'F4', index: 'tax', width: 80,editable:true, align: 'right' },
                          { name: 'F5', index: 'total', width: 80,editable:true, align: 'right' }
                ],
                pager: $("#pager"),
                rowNum: 10,
                rowList: [10, 20, 30],
                viewrecords: true,
                caption: 'My first grid',
                width:800

            }).navGrid('#pager', { edit:true,view: true, del: false });
        });

    </script>

And here is my webmethod that posts data.

        [WebMethod]
        [ScriptMethod(ResponseFormat=ResponseFormat.Json,UseHttpGet=false)]
        public static string GetCompanyList()
        {

            var data = GetAllData();
            try
            {
                string response = JsonConvert.SerializeObject(data, Formatting.Indented);
                return response;
            }
            catch (Exception ex)
            {
                return ex.Message;
            }
        }

And here is my json responce captured:

    {"d":"
    [\r\n  
        {\r\n    
        \"F1\": 1.0,\r\n    
        \"F2\": \"Name\",\r\n    
        \"F3\": \"Address\",\r\n    
        \"F4\": \"City\",\r\n    
        \"F5\": \"Phone\"\r\n  
        },
        \r\n  
        {\r\n    
        \"F1\": 10.0,\r\n    
        \"F2\": \"abc\",\r\n    
        \"F3\": \"def\",\r\n    
        \"F4\": \"asd\",\r\n    
        \"F5\": \"998907\"\r\n  
        }
    ]
}

I could see similar question jqgrid not showing data, i've checked it and i did not get rid of my problem though

Why is the json data not appended ? How do i do it ?

Edit

as part of the answer, i've removed my javascript to call the jqGrid and replaced the code for it as posted in the answer by oleg.

Also i've made little changes to the code in the server side.

Here is what the server side code is:

        [WebMethod]
        [ScriptMethod(UseHttpGet = false)]
        public static string GetCompanyList()
        {
            var data = GetAllData();

            //string response = JsonConvert.SerializeObject(data, Formatting.Indented);
            return data;

        }

        public static string GetAllData()
        {
            try
            {
                //Grab the connection string defined in web.config
                var connectionString = ConfigurationManager.ConnectionStrings["Test_3ConnectionString"].ConnectionString;

                DataTable dt = null;

                //Command Text
                string commandText = "SELECT * FROM EmpDetails";

                dt = SQLHelper.ExecuteDataTable(connectionString, CommandType.Text, commandText, "EmpDetails");

                string result = JsonConvert.SerializeObject(dt);

                return result;
            }
            catch (Exception ex)
            {
                throw;
            }

        }

Things going weird hour by hour. When i run my application i've the following grid.

I only have 9 rows in my table and it is displaying viewing 1-10 of 552.

Can someone please help me what is wrong with the serialization

Answer 1

There are may errors in your code. It looks like you used some retro code example which is at least 3 years old.

The main error in the server code is usage of JsonConvert.SerializeObject inside of web method. If you defines ResponseFormat=ResponseFormat.Json then the method should return object of any type and not string. .Net convert the object automatically to JSON. So the type of return value of GetCompanyList() should be the same as the return type of GetAllData(). After the changes the web method should returns the data like

{
    "d": [
        {
            "F1": 1,
            "F2": "Name",
            "F3": "Address",
            "F4": "City",
            "F5": "Phone"
        },
        {
            "F1": 10,
            "F2": "abc",
            "F3": "def",
            "F4": "asd",
            "F5": "998907"
        }
    ]
}

The second problem that you use datatype defined as function. It's low-level way which you should never use if you can get the data with respect jQuery.ajax with some parameters. jqGrid provide a lot of different customization way to change parameters of jQuery.ajax used by jqGrid internally. Typically it's enough to specify the options like

url: "jqGrid_pureJS.aspx/GetCompanyList",
mtype: 'POST',
datatype: 'json',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
    return JSON.stringify(postData);
},
jsonReader: {
    repeatitems: false,
    root: function (obj) { return obj.d; }
},
gridview: true,
height: "auto",
loadonce: true

It's important additionally to remove all index properties from colModel. The usage of index other as name follows to errors if you use loadonce: true option.

If F1 column contains unique values then I recommend you to add key: true property to the definition of the column "F1".

The results of the changes should be like on the demo: