How to show all rows in the jqGrid?

Question

jqGrid exposes a property rowNum where you can set the number of rows to display for each page. How do you set the grid to just display ALL rows?

Right now I'm just setting the rowNum to something really high like <%= int.MaxValue %> but I'm wondering if there is a better way.

Answer 1

You can also go into jquery.jqGrid.js and change "rowNum:20" to "rowNum:Some-Really-Large-Number". When you define your jqGrid, don't specify rowNum. Then return your entire dataset back to jqGrid.

Answer 2

I've got this working:

$('#bla').jqGrid({
        ...
        'rowNum'      : 0,
        'loadOnce'    : true,
        'loadComplete': function(data) {
            $(this).jqGrid('setGridParam', 'rowNum', data.total);
        },
        ...
});

This works with and without the loadOnce option set to true. Note that you have to set the rowNum option to 0 first, if you leave out this option it'll still default to the 20 records to show. Also, I'm assuming you're returning the total rows from the server in the documented JSON reader format.

Answer 3

By default the JQ grid show 20 rows Max ,if you are using not using pagination:

// To over come with this problem ,you can just write the bold    mark
   (rowNum:10000,):
   $("#MasterDataDefinationGrid").jqGrid({
            url: 'FetchData.aspx/GetDataFromDB',
            datatype: 'json',
            mtype: 'POST',
            height: 300,
            autowidth: true,
            serializeGridData: function (postData) {
                return JSON.stringify(postData);
            },
            ajaxGridOptions: { contentType: "application/json" },
            loadonce: true,
            colNames: [Your column names],
            colModel: [Your model],
            formatter: 'actions',
            pager: '#MasterDataDefinationPager', pgbuttons: false,pgtext:false,
            multiselect: false,
            ignoreCase: true,
            **rowNum: 10000,**
            loadtext: 'Loading ...',
            gridview: true,
            hidegrid: false,
            jsonReader: {
                page: function (obj) { return 1; },
                total: function (obj) { return 1; },
                records: function (obj) { return obj.d.length; },
                root: function (obj) { return obj.d; },
                repeatitems: false,
                id: "0"
            },
            caption: 'Data'
        });

Answer 4

jqgrid (3.5 anyway) doesn't seem to have an elegant built in way to do this. The best I have found so far is to add something like the following to your grid options:

rowList:[10,20,30,100000000],
loadComplete: function() {
    $("option[value=100000000]").text('All');
},

Where the 100000000 is some arbitrarily higher number than the maximum # of rows you will ever return, and the option[value=] line is so your user interface looks a little nicer. Jenky, but works for me.

Answer 5

if you dont wish to use paging at all then change you server side code to simply return all the rows. dont use the rows parameter at all.

if you want to have the rowlist but also have an option to show all then do something like this in the grid properties

jQuery("#statement_mods").jqGrid({
  rowList:['ALL',30,50,100,200]
});

and then in the serverside code make sure that you ignore the rows parameter if GET['rows']='ALL'

Answer 6

loadComplete: function (data) {
                //set our "ALL" select option to the actual number of found records
                $(".ui-pg-selbox option[value='ALL']").val(data.records);
}

This changes the "ALL" option to the actual number of records in the dataset.