Question

I want to disable the paging but want to keep the plus button on the left. The picture below is what I end up with. There is still a drop down page size visible. I have already took out the paging option for that. But still…

Here is the code

jQuery("#detFlex101_1").jqGrid({
    url: root + mod + '/detaillistview',
    datatype: "local",
    colNames:[' ', '@Resources.Xdt_Parameter.param_display_name', '@Resources.Xdt_Parameter.param_tooltip_desc', '@Resources.Xdt_Parameter.param_data_type', ' ', ' ', '@Resources.Xdt_QueryParameter.qupa_required_flag', '@Resources.Xdt_QueryParameter.qupa_default_value'],
    colModel:[
        {name:'myac', width:80, fixed:true, sortable:false, resize:false, formatter:'actions', formatoptions:{keys:true, editbutton : false, delbutton : false, delOptions: {reloadAfterSubmit:false},editOptions: {reloadAfterSubmit:false}}},
        {name:'display_name',index:'display_name', width:100},
        {name:'tooltip_description',index:'tooltip_description', width:300},
        {name:'data_type',index:'data_type', width:100},
        {name:'parameter_id',index:'parameter_id', width:100,hidden:true},
        {name:'query_id',index:'query_id', width:100,hidden:true},
        {name:'required_flag',index:'required_flag', width:100},
        {name:'default_value',index:'default_value', width:100}
        ],
    width: $('.body').width()-40,
    height: 120,

    pager: '#pagerFlex101_1',
    rowList: [],        // disable page size dropdown
    pgbuttons: false,     // disable page control like next, back button
    pgtext: null,         // disable pager text like 'Page 0 of 10'
    viewrecords: false,   // disable current view record text like 'View 1-10 of 100'

    sortname: 'parameter_id',
    sortorder: "desc",
    editurl: root + mod + '/detailpost',
    caption:"@Resources.Xdt_QueryParameter.qupa_param_title",
    onSelectRow: function(id){
        activedf = "#detFlex101_1";
    },
    afterInsertRow: function () {
        var grid = $(this),
        iCol = getColumnIndexByName(grid,'myac'); // 'act' - name of the actions column
        grid.find(">tbody>tr.jqgrow>td:nth-child(" + (iCol + 1) + ")")
        .each(function() {
            if ($(this).find(">div>div").length == 2)
            {
                $("<div>",
                    {
                        title: "Delete",
                        mouseover: function() {
                            $(this).addClass('ui-state-hover');
                        },
                        mouseout: function() {
                            $(this).removeClass('ui-state-hover');
                        },
                        click: function(e) {
                            df_delete_1($(e.target).closest("tr.jqgrow").attr("id"));
                        }
                    }
                  ).css({float:"left"})
                   .addClass("ui-pg-div ui-inline-edit")
                   .append('<span class="ui-icon ui-icon-trash"></span>')
                   .prependTo($(this).children("div"));

                $("<div>",
                    {
                        title: "Edit",
                        mouseover: function() {
                            $(this).addClass('ui-state-hover');
                        },
                        mouseout: function() {
                            $(this).removeClass('ui-state-hover');
                        },
                        click: function(e) {
                            df_edit_1($(e.target).closest("tr.jqgrow").attr("id"));
                        }
                    }
                  ).css({float:"left"})
                   .addClass("ui-pg-div ui-inline-edit")
                   .append('<span class="ui-icon ui-icon-pencil"></span>')
                   .prependTo($(this).children("div"));

                $("<div>",
                    {
                        title: "Up",
                        mouseover: function() {
                            $(this).addClass('ui-state-hover');
                        },
                        mouseout: function() {
                            $(this).removeClass('ui-state-hover');
                        },
                        click: function(e) {
                            jqGridMoveRow('up', grid, $(e.target).closest("tr.jqgrow").attr("id"));
                        }
                    }
                  ).css({float:"left"})
                   .addClass("ui-pg-div ui-inline-edit")
                   .append('<span class="ui-icon ui-icon-arrowthick-1-n"></span>')
                   .prependTo($(this).children("div"));

                $("<div>",
                    {
                        title: "Down",
                        mouseover: function() {
                            $(this).addClass('ui-state-hover');
                        },
                        mouseout: function() {
                            $(this).removeClass('ui-state-hover');
                        },
                        click: function(e) {
                            jqGridMoveRow('down', grid, $(e.target).closest("tr.jqgrow").attr("id"));
                        }
                    }
                  ).css({float:"left"})
                   .addClass("ui-pg-div ui-inline-edit")
                   .append('<span class="ui-icon ui-icon-arrowthick-1-s"></span>')
                   .prependTo($(this).children("div"));
            }
        });
    }
});

jQuery("#detFlex101_1").jqGrid('navGrid','#pagerFlex101_1',{edit:false,del:false,search:false, addfunc: df_add_1});
jQuery("#detFlex101_1").jqGrid('gridResize', {minWidth:350, maxWidth:1920, minHeight:80, maxHeight:1080} );
jQuery("#detFlex101_1").jqGrid({pgbuttons:false, recordtext:'', pgtext:''});

Anyone know what to do?

Answer 1

The usage of virtual scrolling (scroll: 1) is not the same as no paging.

If you just need to have empty pager you need use some jqGrid options (see the documentation):

rowNum: 10000,      // !!! it's important to increase default 20 value
pginput: false,
pgbuttons: false,
rowList: [],        // it's default setting
viewrecords: false, // it's also default setting

The most important would be not forget to define rowNum with some large enough value. If you don’t do this then only 20 rows from the first page will be displayed in the grid.