jquery - jqGrid - vertical scrollbar not showing

Question

I'm working on jquery jqgrid plugin. In this grid, I have 1,000,000 records with scroll: 1 option. and also I have rowNum: 10 option in my grid. But just first 10 row displayed in the grid and vertical scroll bar is missing. in the caption, I have "display 1-10 from 1,000,000" string. this means that the total number calculation is correct, but I don't know why scroll bar is missing. Can anyone help me to solve this problem?

EDIT: My jqGrid version is: 4.6.0. Here is my javascript code:

 $(document).ready(function() {
            var colModel = [
                {name: "id", width: 200, align: "center", searchoptions: {clearSearch: false}, hidden: true, hiddenlg: true},
                {name: "ordernumber", width: 200, align: "center", searchoptions: {clearSearch: false}},
                {name: "customer.fname", width: 200, align: "center", searchoptions: {clearSearch: false}},
                {name: "customer.lname", width: 200, align: "center", searchoptions: {clearSearch: false}},
            ];
            $("#list").jqGrid({
                url: "/orders/listGrid",
                datatype: "json",
                mtype: "POST",
                colNames: ["", "1", "2", "3"],
                colModel: colModel,
                pager: "#pager",
                rowNum: 10,
                rowList: [10, 20, 30],
                viewrecords: true,
                multiSort: false,
                gridview: true,
                autoencode: true,
                shrinkToFit: false,
                autowidth: true,
                scroll: 1,
                direction: "rtl",
                height: 230,
                caption: "Test",
                hidegrid: false,
                ajaxGridOptions: {
                    contentType: "application/json; charset=utf-8"
                },
                serializeGridData: function(data) {
                    return JSON.stringify(data);
                },

            });
        });

And this is my html code:

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

Answer 1

The problem exist probably because you use very large number of rows and the current implementation of virtual scrolling don't allows to display such number of rows. The exact restriction of the maximal number of rows depend on the web browser which you use. Look at the bug report which I posted some years before. See the post additionally.

The problem is the following. jqGrid uses div outside of the grid and try to set its height to the value parseInt(ts.p.records,10) * rowHeight (see the line) where rowHeight is 23px. So jqGrid will try to set height to 23000000px in your case, but it will don't change the height value and one will see no vertical scroll bar.

One can try to make some tricks like the usage of the code like

jsonReader: {
    records: function (obj) {
        // return not so large value of records
        return Math.min(66692, obj.records);
    }
},
loadComplete: function (data) {
    var $self = $(this), p = $self.jqGrid("getGridParam"),
        numberFormat = $.fmatter.util.NumberFormat || $.fmatter.NumberFormat,
        fmt = $.jgrid.formatter.integer || {},
        from = numberFormat(parseInt(p.page,10), fmt),
        to = numberFormat((parseInt(p.page,10)-1)*parseInt(p.rowNum,10) + p.reccount, fmt),
        total = numberFormat(parseInt(data.records,10), fmt); // use correct value

    // fix the displayed row numbers
    $(".ui-paging-info", p.pager)
        .html($.jgrid.format(p.recordtext, from, to, total));
}

see the demo. But such trick will allows to display only some first pages of the grid. The make jqGrid really able to display large number of rows in case of virtual scrolling (scroll: 1) one needs to rewrite some parts of jqGrid code.

I would suggest you better to use standard paging instead of virtual scrolling. The usage will have to use First/Previous/Next/Last buttons of the pager, but the most users who need to examine 1,000,000 rows of data can do this.

To tell the trust nobody will scroll over 1,000,000 rows. Instead of that one need provide good filtering/searching possibility. For example to use filterToolbar and advanced searching. After setting the corresponding filter the filtered data can be displayed in 1 till 10 pages and such data could be really interesting to display.