0

I am using jgGrid to bind JSON response received from web service. I am facing 2 issue with sort functionality-

1.Data in grid is not sorted initially with parameters provided -

sortname: "BankName",
sortorder: "asc",

2.Sort icon is not displayed on column. Neither clicking on column header works for me.

JSON data received:

[{"Id":1,"BankId":2,"BankName":"State bank","EmployeeId":2539,"EmployeeName":"John C.","JoiningDate":"2005-07-05T00:00:00","SalaryAmount":50000.0,"Comments":""},
{"Id":2,"BankId":2,"BankName":"State bank","EmployeeId":2232,"EmployeeName":"xxx","JoiningDate":"2001-12-23T00:00:00","SalaryAmount":30000.0,"Comments":"test"},
{"Id":3,"BankId":4,"BankName":"National bank","EmployeeId":2322,"EmployeeName":"yyyy","JoiningDate":"2002-09-23T00:00:00","SalaryAmount":90000.0,"Comments":""},
{"Id":4,"BankId":3,"BankName":"Punjab bank","EmployeeId":2432,"EmployeeName":"ppp","JoiningDate":"2003-01-31T00:00:00","SalaryAmount":60000.0,"Comments":" "},
{"Id":5,"BankId":1,"BankName":"Bank of Maharashtra","EmployeeId":2892,"EmployeeName":"zzz y.","JoiningDate":"2000-10-11T00:00:00","SalaryAmount":80000.0,"Comments":"test 2"}
]

jqGrid declaration and binding:

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#employeeSalarysGrid").jqGrid({
            height: 250,
            url: 'http://localhost:50570/api/Test/GetEmployeeSalaries',
            mtype: "GET",
            contentType: "application/json; charset=utf-8",
            datatype: "json",
            serializeGridData: function (postData) {
                return JSON.stringify(postData);
            },
            jsonReader: {
                root: function (obj) { return obj; },
                page: function (obj) { return 1; },
                total: function (obj) { return 1; },
                records: function (obj) { return obj.length; },
                id: "0",
                cell: "",
                repeatitems: false
            },
            datatype: "json",
            colNames: ['Id', 'Bank Name', 'Employee name', 'Joining date', 'Salary amount', 'Comments'],
            colModel: [
            { name: 'Id', index: 'Id', align: "center", key: true },
            { name: 'BankName', index: 'BankName', align: "center" },
            { name: 'EmployeeName', index: 'EmployeeName', align: "center" },
            { name: 'JoiningDate', index: 'JoiningDate', align: "center" },
            { name: 'SalaryAmount', index: 'SalaryAmount', align: "center" },
            { name: 'Comments ', index: 'Comments', align: "center" }
            ],
            sortname: "BankName",
            sortorder: "asc",
            viewrecords: true,
            rowNum: 10,
            rowList: [10, 15, 20],
            pager: '#employeeSalarysPager',
            caption: "Employee Salary list"
        });
    });
</script>

Also note, these are 5 files i have added to page:

<link href="../Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<link href="../Content/jquery.jqGrid/jquery-ui-custom.css" rel="stylesheet" />
<script src="../Scripts/jquery-1.9.1.min.js"></script>
<script src="../Scripts/jquery.jqGrid.js"></script>
<script src="../Scripts/i18n/grid.locale-en.js"></script>

Please help me figure out why sorting is not working.

Thanks in advance, I would really appreciate your help on this.

Regards,

Abhilash

AbSharp
  • 119
  • 2
  • 6
  • 20

1 Answers1

0

If you use datatype: "json" then the server get parameters from the options sortname: "BankName" and sortorder: "asc" as sidx (sort index) and sord (sort direction). So the server is responsible for at least initial sorting of returned data.

I would recommend you to add loadonce: true option which means that you loads all data from the server at once (not just 10 rows of data, see rowNum: 10 option) without implementing server side paging of data. So the server need just makes initial sorting of data. jqGrid will save all the data in internal parameters data and _index. It changes additionally the datatype from "json" to "local" after the first loading of data. So all later paging, sorting, filtering (see filterToolbar) or searching (see here or here) of data will be implemented on the client side. So you will need to write minimal JavaScript code to have the required functionality.

Additional I recommend you to remove http://localhost:50570 prefix from the URL, remove index properties from all items of colModel, add gridview: true and autoencode: true options and consider to use ignoreCase: true and height: "auto" (instead of height: 250 which you use currently).

I would recommend you to verify that you use the current version of jqGrid (version 4.6.0). You can download the current version from trirand site.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thanks @Oleg, this worked, however I still cannot see sort icon on column header, any thoughts? – AbSharp Mar 17 '14 at 11:08
  • @Abhilash: You are welcome! Look at [the demo](http://www.ok-soft-gmbh.com/jqGrid/Abhilash.htm). I don't see any problems with sort icons. – Oleg Mar 17 '14 at 20:37
  • @Oleg- I think issue is with the version and files I have used. Could you share details of which .js and .css files you have included? – AbSharp Mar 18 '14 at 03:41
  • @Oleg- As mentioned issue was with .js and .css files used. I followed this steps mentioned here and it worked - http://www.trirand.com/jqgridwiki/doku.php?id=wiki:how_to_install Many thanks! – AbSharp Mar 18 '14 at 06:16
  • @Abhilash: I use just the current version of jqGrid which you can download from trirand (see my answer). The code of the demo you can see if you opens page source in the web browser (click on right button of the mouse in web browser and choose the corresponding menu item). – Oleg Mar 18 '14 at 07:00
  • I need one more help on same application. I am not able to Add/update/delete the data using web api. I am very new to this kind of programming of invoking web api via jqquery. Could you please help me with this? http://stackoverflow.com/questions/22477090/add-edit-delete-in-jqgrid-with-web-api – AbSharp Mar 19 '14 at 14:14