jQuery Grid Plugin - jqGrid

Hi All,

I am pretty new to jqGrid. Could someone guide me where i am going wrong in binding JSON to jqGrid?

Please note – i dont any control over web service so cannot modify json sent from web service.

Your help will be greatly appreciated.

JSON format:

[{"DepositType":0,"DepositId":0,"ReceiptNumber":"","CompanyId":2," Company":"Cosmos cooperative ","EmployeeId":1," EmployeeName ":"Abhilash Shah","MaturityDate":"2012-08-11T00:00:00","MaturityAmount":23311.0,"DateInvested":"2011-03-05T00:00:00","AmountInvested":20000.0,"ROI":10.25,"Term":16,","IsWithdrawn":false,"Purpose":"","Comments":""},{"DepositType":1,"DepositId":0,"ReceiptNumber":"9993","CompanyId":1,"Company":" Janta Sahakari Ltd","EmployeeId":3,"EmployeeName":"Sheela Shah","MaturityDate":"2013-06-11T00:00:00","MaturityAmount":253644.0,"DateInvested":"2012-06-11T00:00:00","AmountInvested":0.0,"ROI":0.0,"Term":12," ","IsWithdrawn":false,"Purpose":"","Comments":""},{"DepositType":0,"DepositId":0,"ReceiptNumber":"","CompanyId":1,"Company":"Solapur Janta Sahakari  Ltd","EmployeeId":3,"EmployeeName":"Sheela Shah","MaturityDate":"2013-08-30T00:00:00","MaturityAmount":125161.0,"DateInvested":"2011-05-30T00:00:00","AmountInvested":100000.0,"ROI":10.1,"Term":27, "IsWithdrawn":false,"Purpose":"","Comments":""},{"DepositType":0,"DepositId":0,"ReceiptNumber":"226575","CompanyId":6,"Company":" of Maharashtra","EmployeeId":3,"EmployeeName":"Sheela Shah","MaturityDate":"2013-10-05T00:00:00","MaturityAmount":100000.0,"DateInvested":"2012-10-05T00:00:00","AmountInvested":100000.0,"ROI":10.05,"Term":12, "IsWithdrawn":false,"Purpose":"","Comments":""}]

Below is the code snippet, simplified grid to contain only one column:

<script type="text/javascript">

        jQuery(document).ready(function () {

            jQuery("#depositGrid").jqGrid({

                url: 'http://localhost:50570/api/com&hellip;..s&#39;,

                datatype: 'json',

                type: "POST",

                colNames: ['Employee Name'],

                colModel: [

                { name: 'EmployeeName', index: ' EmployeeName ', align: "center", sortable: true }

                ],

                pager: jQuery('#pager'),

                rowNum: 10,

                rowList: [10, 20, 30],

                viewrecords: true,

                imgpath: 'themes/basic/images',

                caption: 'Company deposits'

            });

            jQuery("#depositGrid").navGrid('#Pager', {

                edit: true, add: true, del: true, search: true

            }).navButtonAdd('#Pager', {

                caption: "Add", buttonimg: "fullpath/row_add.gif", onClickButton: function () { alert("Adding Row") }, position: "last"

            }).navButtonAdd('#Pager', {

                caption: "Del", buttonimg: "fullpath/row_del.gif", onClickButton: function (id) { alert("Deleting Row: " + id) }, position: "last"

            });

        });

    </script>

    <div id="jqgrid">

        <table id="depositGrid"></table>

        <div id="Pager"></div>

    </div>

Regards,

Abhilash