Unable to bind the jqGrid Column

Question

I am trying to use the jqGrid. Grid is getting appear but the backend value is not getting bind into the grid. The Rows are getting display as blank.

There are only two rows coming from back end. Row are generating properly and paging is correct but the value into the column are not getting bind.

When I am going to inspect only &nbps is there.

Thanks In advance.

<script>
        $(function () {
            debugger;
            $("#grid").jqGrid
                ({
                    url: "/client/GetAllClient",
                    datatype: 'json',
                    mtype: 'Get',
                    //table header name
                    colNames: ['Id', 'Client ID'],
                    //colModel takes the data from controller and binds to grid
                    colModel: [
                        {
                            key: true,
                            hidden: true,
                            name: 'Id',
                            index: 'Id',
                            editable: true
                        }, {
                            key: false,
                            name: 'ClientID',
                            index: 'ClientID',
                            editable: true
                        }],

                    pager: jQuery('#pager'),
                    rowNum: 10,
                    rowList: [10, 20, 30, 40],
                    height: '100%',
                    viewrecords: true,
                    caption: 'Jq grid sample Application',
                    emptyrecords: 'No records to display',
                    jsonReader:
                    {
                        root: "rows",
                        page: "page",
                        total: "total",
                        records: "records",
                        repeatitems: false,
                        Id: "0"
                    },
                    autowidth: true,
                    multiselect: false
                    //pager-you have to choose here what icons should appear at the bottom
                    //like edit,create,delete icons
                }).navGrid('#pager',
                    {
                        edit: true,
                        add: true,
                        del: true,
                        search: false,
                        refresh: true
                    });
        });
    </script>

  <table id="grid"></table>
        <div id="pager"></div>

Here is my code ---

var Results = _objModel.Select(x => new
            {
                x.ClientID
            });

            var jsonData = new
            {
                total = totalPages,
                page,
                records = totalRecords,
                rows = Results
            };
            return Json(jsonData);

The JqGrid Looks Like Now:

Answer 1

Problem has been solved. It was a silly mistake of case sensitivity. At the the of binding i was using "ClientID" in place of "clientID".

Now it works fine.