Paging, Sorting, Searching on jQgrid

Question

Hello Everyone,

I have some problems with jQgrid regarding Sorting, paging and Searching.
I had created a jQgrid in which some data is bind using the webservice, data is shown in grid, all of it's components are also shown like tool for searching, Adding, updating and so on---,

SORTING:- I had applied sorting on one of the column but if I click on the column name it's not sorted, it shows that it's "loading" and after that it again come in the same format.

PAGING:- Paging is also not working on it, it only shows one page even if data is more than number of rows.

SEARCHING:- As I click on Search button, it displays a panel where I enter some text according to which the Grid should be filtered, but Search button also not working.

Here is my code:

            $('#<%=lbl.ClientID%>').click(function () {

                debugger;

                $.extend($.jgrid.defaults,

                  { datatype: 'json' },

                  {

                      ajaxGridOptions: {

                          contentType: "application/json",

                          success: function (data, textStatus) {

                              debugger;

                              if (textStatus == "success") {

                                  debugger;

                                  var thegrid = $("#contactsList")[0];

                                  var gr = thegrid.rows;

                                  var output = eval(data.d.rows);

                                  var trying;

                                  var newArr = [];

                                  for (trying = 0; trying < output.length; trying++) {

                                      debugger;

                                      newArr.push({

                                          Recognition_Type: output[trying].cell[0],

                                          Recognition_Number: output[trying].cell[1]

                                      });

                                  }

                                  thegrid.addJSONData(newArr);

                                  thegrid.grid.hDiv.loading = false;

                                  switch (thegrid.p.loadui) {

                                      case "disable":

                                          break;

                                      case "enable":

                                          $("#load_" + thegrid.p.id).hide();

                                          break;

                                      case "block":

                                          $("#lui_" + thegrid.p.id).hide();

                                          $("#load_" + thegrid.p.id).hide();

                                          break;

                                  }

                              }

                          }

                      }

                  });

                $("#contactsList").jqGrid({

                    mtype: 'POST',

                    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },

                    url: 'WebService.asmx/GetDataTable',

                    datatype: 'json',

                    serializeGridData: function (postData) {

                        return JSON.stringify(postData);

                    },

                    jsonReader: { repeatitems: false, root: "d.rows", page: "d.page", total: "d.total", records: "d.records" },

                    colNames: ['Recognition_Type', 'Recognition_Number'],

                    colModel: [

                        { name: 'Recognition_Type', index: 'Recognition_Type', width: 280, sortable: true, sorttype: 'text', align: "center", hidden: false },

                        { name: 'Recognition_Number',index:'Recognition_Number', width: 300, hidden: false }

                    ],

                    rowNum: 4,

                    rowList: [4, 20, 300],

                    pager: "#gridpager",

                    viewrecords: true,

                    multiSort: true,

                    jsonReader: {

                        repeatitems: false

                    },

                    sortname: 'Recognition_Type asc, Recognition_Number',

                    sortorder: 'desc',

                    gridview: true,

                    rownumbers: true,

                    autowidth: true,

                    height: 230,

                    caption: 'Reports'

                })

                $("#contactsList").jqGrid('navGrid', '#gridpager', { edit: true, add: true, del: false, search: true },

                    {},

                    {},

                    {},

                    { multipleSearch: true, multipleGroup: true });

            })

        });