Search code examples
jqueryjqgridjqgrid-asp.net

jqGrid - disable page size dropdown


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...

result

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?


Solution

  • 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.