jqGrid loads all rows, ignoring rowNum

Question

I'm having an issue using rowNum in my jqGrid. I'm trying to make the grid only load the number of rows that I specify in rowNum. Currently the grid is loading all of the data in the array.

Here's my grid:

$(function () {
    var width = $(window).width() - 50;
    $("#category_grid").jqGrid({
        datatype: "local",
        width: width,
        height: "auto",
        search: true,
        autowidth: false,
        shrinkToFit: true,
        colNames: ['ID', 'Name', 'Abbr.', 'Last Update', 'Last Update User', 'Active?', 'Edit'],
        colModel: [
            { name: 'ID', width: 5, align: 'center', sorttype: 'int' },
            { name: 'Name', width: 15, align: 'left' },
            { name: 'Abbreviation', width: 10, align: 'left' },
            { name: 'LastUpdateDateTime', width: 8, align: 'left', formatter: dateFix, sorttype: 'date' },
            { name: 'LastUpdateUser', width: 15, align: 'left', sorttype: 'string' },
            { name: 'Active', width: 5, align: 'center', formatter: activeFix },
            { name: 'Edit', width: 5, align: 'center' },
        ],
        rowNum: 20,
        rowList: [20, 50, 100, 1000, 100000],
        viewrecords: true,
        pager: "#gridpager",
        sortname: "ID",
        sortable: true,
        ignoreCase: true,
        headertitles: true,
        sortorder: "desc",
        onSelectRow: function (rowId)
        {
            var id = $("#category_grid").getCell(rowId, 'ID');
            document.location.href = '/Administration/EditCategoryRecord/'+ id;
        },
    }).navGrid("#gridpager", { edit: false, add: false, del: false }, {}, {}, {}, { multipleSearch: true, multipleGroup: false, showQuery: false, recreateFilter: true });
    $("#category_grid").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: 'cn' })
    setTimeout(function () { getCategories(); }, 200);
});

function getCategories() {
    var data;
    var request = $.ajax({
        url: "@Url.Action("GetCategories", "Administration")",
            type: "GET",
            cache: false,
            async: true,
            data: data,
            dataType: "json",
        });
    request.done(function (orders) {
            var thegrid = $("#category_grid");
            thegrid.clearGridData();
            setTimeout(function () {
                for (var i = 0; i < orders.length; i++) {
                    thegrid.addRowData(i + 1, orders[i]);
                }
            }, 500);
            //alert(thegrid.jqGrid('getGridParam', 'rowNum'));
            thegrid.trigger("reloadGrid");
            //alert(thegrid.jqGrid('getGridParam', 'rowNum'));

        });
        request.fail(function (orders) {
            alert("The request in the getCategories function failed. The grid will not be filled.");
        });
}

And here's the Controller Action that sends the grid the data:

    public JsonResult GetCategories()
    {
        // Holds all of the Categories as an array to fill the jqGrid
        object data;

        // Holds all of the Categories in the db
        List<Category> Categories;

        // Holds all of the Categories in the db with Usernames as a string instead of an int ID
        List<Category> CategoriesWithUserNames = new List<Category>();

        // Get all of the current Categories
        using (TicketDeskContext context = new TicketDeskContext())
            Categories = context.Categories.ToList();

        // For every Category, add to the List of Categories with Usernames as a string
        foreach (Category Category in Categories)
        {
            string LastUpdateUser = Functions.GetUserNameByID(Category.LastUpdateUserID);
            CategoriesWithUserNames.Add(new Category(Category.ID, Category.Active, Category.Name, Category.Abbreviation, Category.LastUpdateDateTime, LastUpdateUser));
        }

        // Convert the filtered Category List to the data array
        data = CategoriesWithUserNames.ToArray();

        // Return the filtered Category List
        return Json(data, JsonRequestBehavior.AllowGet);
    }

Is there something that I'm doing wrong here? When the grid loads it doesn't stop at 20 (since I set rowNum to 20), it just loads all of the data (which is currently 27 Categories).

Answer 1

I resolved this issue by triggering the grid reload inside of setTimeout.

function getCategories() 
{
    var data;

    var request = $.ajax({
        url: "@Url.Action("GetCategories", "Administration")",
            type: "GET",
            cache: false,
            async: true,
            data: data,
            dataType: "json",
        });

    request.done(function (orders) {
            var thegrid = $("#category_grid");
            thegrid.clearGridData();
            setTimeout(function () {
                for (var i = 0; i < orders.length; i++) 
                {
                    thegrid.addRowData(i + 1, orders[i]);
                }
                // Triggering a grid reload here loads the grid with the number specified in rowNum
                thegrid.trigger("reloadGrid"); 
            }, 500);
        });
        request.fail(function (orders) 
        {

        });
}

Answer 2

Add loadonce: true after rowNum: 20,. This Should fix the paging issue.