jqGrid with datatype: "jsonstring" only displaying first page

Question

My JqGrid receive data from the server with JSON, I use those parameter:

_self.GridParams = { rows: 7, page: 1, sidx: '', sord: '' }

After, the data is put in the variable data:

Object
colModel: Array[194]
colNames: Array[194]
groupHeaders: Array[48]
page: 1
records: 17
rows: Array[4]
total: 3

I only receive the first page with 7 elements but the pager didn't work and show "View 1 - 7 of 7".

I created my grid with this code:

function _CreateGrid(queryId) {
    var gridWidth = ...;

    //Load data with JSON
    Utilities.JsonGet("/GetList?QueryId=" + queryId + "&ZoomLevel=" + _self.ZoomLevel + "&Start=" + _self.StartDate.toISOString().slice(0, 10) + "&End=" + _self.EndDate.toISOString().slice(0, 10), _self.GridParams, function (data) {
        console.log(data);

        //Dymamicly create column model
        for (var i = 0; i < data.colModel.length; i++) {
            var row = data.colModel[i];
            row.cellattr = row.isSchedulerColumn ? _self.SchedulerCellAttr : _self.NonSchedulerCellAttr;
            row.formatter = row.isSchedulerColumn ? _self.SchedulerCellFormatter : _self.NonSchedulerCellFormatter;
            data.colModel[i] = row;

            //Set width
            if (row.isSchedulerColumn) {
                var zoomColWidth = 0;
                switch (_self.ZoomLevel) {
                    case 0: zoomColWidth = _self.HourColumnWidth; break;
                    case 1: zoomColWidth = _self.QuarterColumnWidth; break;
                    case 2: zoomColWidth = _self.TenColumnWidth; break;
                }
                if (zoomColWidth > 5) {
                    row.width = (zoomColWidth - 5);
                    _self.SchedulerCellWidth = 0;
                }
            }


            if (row.isSchedulerColumn && _self.SchedulerCellWidth === 0) {
                _self.SchedulerCellWidth = row.width + 5; //Account for the loss of padding/borders  
            }
        }

        // Clean up previous version of the grid.
        $("#" + _self.SchedulerGridBaseId + "-container").remove();

        // Create the grid's container.
        Ui.CreateJQGridContainer(_schedulerGridWrapper, _self.SchedulerGridBaseId);

        _$jqGrid = jQuery("#" + _self.SchedulerGridBaseId + "-table").jqGrid({
            datatype: "jsonstring",
            colNames: data.colNames,
            colModel: data.colModel,
            datastr: data,
            height: 280,
            width: gridWidth,
            shrinkToFit: false,
            jsonReader: {
                repeatitems: false
            },
            viewrecords: true,
            gridview: true,
            hoverrows: false,
            pager: "#" + _self.SchedulerGridBaseId + "-pager",
            toolbar: [true, "top"],
            onPaging: _OnGridPaging,
            beforeSelectRow: function () {
                return false;
            }
        });

        _$jqGrid.jqGrid('setGroupHeaders', {
            useColSpanStyle: false,
            groupHeaders: data.groupHeaders
        });

        _$jqGrid.jqGrid('setFrozenColumns');

        //Set row height
        var ids = _$jqGrid.getDataIDs();
        for (i = 0; i < ids.length; i++) {
            _$jqGrid.setRowData(ids[i], false, { height: _self.RowHeight });
        }
    }, function () { }, true);
}

Answer 1

pageSize attribute is missing in paging parameters for more details
http://yassershaikh.com/how-to-use-jqgrid-with-asp-net-mvc/