Angular-slickgrid Paginator's item per page is not displayed according to configured values

Question

I'm using angular-slickgrid: "^2.17.11". I'm quite new with it. Here is how I configured the grid option to display the pagination and items per page. In the config I have given the page sizes as [5, 10, 15, 20, 25, 50, 75] but in the UI it is coming as [5, 10, 15, 20, 25, 50, 75, 75, 100]. Not sure how it is happening. Did I missed something?

{
      enableSorting: true,
      enableFiltering: true,
      enablePagination: true,
      pagination: {
        pageSizes: [5, 10, 15, 20, 25, 50, 75],
        pageSize: 5
      },
      autoResize: {
        containerId: 'tableSection_details',
        sidePadding: 5
      },
      alwaysShowVerticalScroll: false,
      excelExportOptions: {
        filename: "DoC",
        sheetName: this._exportSheetName
      },
      enableExcelExport: true,
      gridMenu: {
        onCommand: (e, args) => {
          if (args.command === 'toggle-preheader') {
            // in addition to the grid menu pre-header toggling (internally), we will also clear grouping
            this.clearGrouping();
          }
        },
      },
      enableDraggableGrouping: true,
      createPreHeaderPanel: true,
      showPreHeaderPanel: true,
      preHeaderPanelHeight: 40,
      draggableGrouping: {
        dropPlaceHolderText: 'Drop column header here to group by the column',
        deleteIconCssClass: 'fa fa-times',
        onGroupChanged: (e, args) => this.onGroupChanged(args),
        onExtensionRegistered: (extension) => this.draggableGroupingPlugin = extension,
      }
    }

That seems to be a bug, I can reproduce. I remember having issues in the lib itself because this is an object and using shallow copy, instead of deep copy of these grid options (shallow copy is spreading, which is probably why we see this problem). Can you open a bug on the lib and I'll look into it before next release. — ghiscoding, May 13 '20 at 14:28
I've opened a new GitHub [issue #456](https://github.com/ghiscoding/Angular-Slickgrid/issues/456) on the lib. I'm aiming for a new features release next week, I'll try to include a fix for this — ghiscoding, May 14 '20 at 15:22
This is now fixed and released as well under the new version `2.18.x` — ghiscoding, May 19 '20 at 22:21

ghiscoding · Accepted Answer · 2020-06-04T12:49:37.917

Note that I'm the author of Angular-Slickgrid.

That was a bug in the Angular-Slickgrid lib and got fixed in this PR. A new version is however pending for another week or so. (It's now fixed and released, see version)

The code will now internally check if user provided custom page sizes and if so will use them, else it will use the ones defined in the global grid options (which defaults to [5, 10, 15, 20, 25, 50, 75, 100]).

Code fix

// using jQuery extend to do a deep clone has an unwanted side on objects and pageSizes but ES6 spread has other worst side effects
// so we will just overwrite the pageSizes when needed, this is the only one causing issues so far.
// jQuery wrote this on their docs:: On a deep extend, Object and Array are extended, but object wrappers on primitive types such as String, Boolean, and Number are not.
if (gridOptions.enablePagination && gridOptions.pagination && Array.isArray(gridOptions.pagination.pageSizes)) {
    options.pagination.pageSizes = gridOptions.pagination.pageSizes;
}

EDIT

This was fixed and available under the new Angular-Slickgrid new version

Angular-slickgrid Paginator's item per page is not displayed according to configured values

1 Answers1