angular-slickgrid 3.0.4 → 3.3.0

package/fesm2015/angular-slickgrid.js

@@ -1,6 +1,6 @@
-import { castObservableToPromise, addToArrayWhenNotExists, SharedService, RxJsFacade, Filters, OperatorType, EventNamingStyle, FileType, DelimiterType, getTranslationPrefix, SlickgridConfig as SlickgridConfig$1, BackendUtilityService, GridEventService, CollectionService, ExtensionUtility, FilterFactory, FilterService, ResizerService, SortService, TreeDataService, PaginationService, AutoTooltipExtension, CellExternalCopyManagerExtension, CellMenuExtension, ContextMenuExtension, ColumnPickerExtension, CheckboxSelectorExtension, DraggableGroupingExtension, GridMenuExtension, GroupItemMetaProviderExtension, HeaderButtonExtension, HeaderMenuExtension, RowMoveManagerExtension, RowSelectionExtension, ExtensionService, GridStateService, GridService, GroupingAndColspanService, emptyElement, autoAddEditorFormatterToColumnsWithEditor, GridStateType } from '@slickgrid-universal/common';
+import { castObservableToPromise, addToArrayWhenNotExists, SharedService, RxJsFacade, Filters, OperatorType, EventNamingStyle, FileType, DelimiterType, SlickgridConfig as SlickgridConfig$1, BackendUtilityService, GridEventService, CollectionService, ExtensionUtility, FilterFactory, FilterService, ResizerService, SortService, TreeDataService, PaginationService, AutoTooltipExtension, CellExternalCopyManagerExtension, CellMenuExtension, ContextMenuExtension, ColumnPickerExtension, CheckboxSelectorExtension, DraggableGroupingExtension, GridMenuExtension, GroupItemMetaProviderExtension, HeaderButtonExtension, HeaderMenuExtension, RowMoveManagerExtension, RowSelectionExtension, ExtensionService, GridStateService, GridService, GroupingAndColspanService, emptyElement, autoAddEditorFormatterToColumnsWithEditor, GridStateType } from '@slickgrid-universal/common';
 export * from '@slickgrid-universal/common';
-import { Injectable, ComponentFactoryResolver, ApplicationRef, Injector, Optional, Component, Input, ChangeDetectorRef, ElementRef, Inject, NgModule } from '@angular/core';
+import { Injectable, ComponentFactoryResolver, ApplicationRef, Injector, Optional, Component, ChangeDetectorRef, ElementRef, Inject, Input, NgModule } from '@angular/core';
 import { __awaiter } from 'tslib';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import 'slickgrid/plugins/slick.rowdetailview';
@@ -17,8 +17,9 @@ import 'slickgrid/slick.core';
 import 'slickgrid/slick.grid';
 import 'slickgrid/slick.dataview';
 import 'slickgrid/slick.groupitemmetadataprovider';
-import { SlickFooterComponent } from '@slickgrid-universal/custom-footer-component';
 import { SlickEmptyWarningComponent } from '@slickgrid-universal/empty-warning-component';
+import { SlickFooterComponent } from '@slickgrid-universal/custom-footer-component';
+import { SlickPaginationComponent } from '@slickgrid-universal/pagination-component';
 import { RxJsResource } from '@slickgrid-universal/rxjs-observable';
 import { dequal } from 'dequal/lite';
 import { CommonModule } from '@angular/common';
@@ -527,7 +528,7 @@ class RowDetailViewExtension {
                     awaitedItemDetail = yield castObservableToPromise(this.rxjs, response); // from Angular-http-client
                 }
                 if (!awaitedItemDetail || !awaitedItemDetail.hasOwnProperty(this.datasetIdPropName)) {
-                    throw new Error(`[Angular-Slickgrid] could not process the Row Detail, you must make sure that your "process" callback
+                    throw new Error(`[Angular-Slickgrid] could not process the Row Detail, you must make sure that your "process" callback
           (a Promise or an HttpClient call returning an Observable) returns an item object that has an "${this.datasetIdPropName}" property`);
                 }
                 // notify the plugin with the new item details
@@ -661,10 +662,9 @@ const GlobalGridOptions = {
         syncGridSelectionWithBackendService: false, // but disable it when using backend services
     },
     datasetIdPropertyName: 'id',
-    defaultColumnSortFieldId: 'id',
     defaultFilter: Filters.input,
     defaultBackendServiceFilterTypingDebounce: 500,
-    enableFilterTrimWhiteSpace: false,
+    defaultColumnSortFieldId: 'id',
     defaultFilterPlaceholder: '🔎︎',
     defaultFilterRangeOperator: OperatorType.rangeInclusive,
     editable: false,
@@ -677,6 +677,7 @@ const GlobalGridOptions = {
     enableContextMenu: true,
     enableExcelExport: true,
     enableExport: false,
+    enableFilterTrimWhiteSpace: false,
     enableGridMenu: true,
     enableHeaderMenu: true,
     enableEmptyDataWarningMessage: true,
@@ -799,6 +800,7 @@ const GlobalGridOptions = {
     rowHeight: 35,
     topPanelHeight: 35,
     translationNamespaceSeparator: ':',
+    resetFilterSearchValueAfterOnBeforeCancellation: true,
     resizeByContentOnlyOnFirstLoad: true,
     resizeByContentOptions: {
         alwaysRecalculateColumnWidth: false,
@@ -928,138 +930,6 @@ Constants.VALIDATION_EDITOR_TEXT_MAX_LENGTH_INCLUSIVE = 'Please make sure your t
 Constants.VALIDATION_EDITOR_TEXT_MIN_LENGTH = 'Please make sure your text is more than {{minLength}} character(s)';
 Constants.VALIDATION_EDITOR_TEXT_MIN_LENGTH_INCLUSIVE = 'Please make sure your text is at least {{minLength}} character(s)';
 
-class SlickPaginationComponent {
-    /** Constructor */
-    constructor(translate) {
-        this.translate = translate;
-        this.subscriptions = [];
-        this._enableTranslate = false;
-        // text translations (handled by ngx-translate or by custom locale)
-        this.textItemsPerPage = 'items per page';
-        this.textItems = 'items';
-        this.textOf = 'of';
-        this.textPage = 'Page';
-    }
-    get availablePageSizes() {
-        return this.paginationService.availablePageSizes;
-    }
-    get dataFrom() {
-        return this.paginationService.dataFrom;
-    }
-    get dataTo() {
-        return this.paginationService.dataTo;
-    }
-    /** is the left side pagination disabled? */
-    get isLeftPaginationDisabled() {
-        return this.pageNumber === 1 || this.totalItems === 0;
-    }
-    /** is the right side pagination disabled? */
-    get isRightPaginationDisabled() {
-        return this.pageNumber === this.pageCount || this.totalItems === 0;
-    }
-    get itemsPerPage() {
-        return this.paginationService.itemsPerPage;
-    }
-    get pageCount() {
-        return this.paginationService.pageCount;
-    }
-    get pageNumber() {
-        return this.paginationService.pageNumber;
-    }
-    set pageNumber(page) {
-        // the setter has to be declared but we won't use it, instead we will use the "changeToCurrentPage()" to only update the value after ENTER keydown event
-    }
-    get totalItems() {
-        return this.paginationService.totalItems;
-    }
-    ngOnDestroy() {
-        this.dispose();
-    }
-    ngOnInit() {
-        this._gridOptions = this.gridOptions || {};
-        this._enableTranslate = this._gridOptions && this._gridOptions.enableTranslate || false;
-        this._locales = this._gridOptions && this._gridOptions.locales || Constants.locales;
-        if (this._enableTranslate && !this.translate) {
-            throw new Error('[Angular-Slickgrid] requires "ngx-translate" to be installed and configured when the grid option "enableTranslate" is enabled.');
-        }
-        this.translateAllUiTexts(this._locales);
-        // translate all the text using ngx-translate or custom locales
-        if (this._enableTranslate && this.translate && this.translate.onLangChange) {
-            this.subscriptions.push(this.translate.onLangChange.subscribe(() => this.translateAllUiTexts(this._locales)));
-        }
-    }
-    changeToFirstPage(event) {
-        if (!this.isLeftPaginationDisabled) {
-            this.paginationService.goToFirstPage(event);
-        }
-    }
-    changeToLastPage(event) {
-        if (!this.isRightPaginationDisabled) {
-            this.paginationService.goToLastPage(event);
-        }
-    }
-    changeToNextPage(event) {
-        if (!this.isRightPaginationDisabled) {
-            this.paginationService.goToNextPage(event);
-        }
-    }
-    changeToPreviousPage(event) {
-        if (!this.isLeftPaginationDisabled) {
-            this.paginationService.goToPreviousPage(event);
-        }
-    }
-    changeToCurrentPage(event) {
-        let pageNumber = 1;
-        if (event && event.currentTarget && event.currentTarget.value) {
-            pageNumber = +(event.currentTarget.value);
-        }
-        this.paginationService.goToPageNumber(pageNumber, event);
-    }
-    changeItemPerPage(event) {
-        let itemsPerPage = 1;
-        if (event && event.currentTarget && event.currentTarget.value) {
-            itemsPerPage = +(event.currentTarget.value);
-        }
-        this.paginationService.changeItemPerPage(itemsPerPage, event);
-    }
-    dispose() {
-        // also unsubscribe all Angular Subscriptions
-        this.subscriptions = unsubscribeAllObservables(this.subscriptions);
-    }
-    // --
-    // private functions
-    // --------------------
-    /** Translate all the texts shown in the UI, use ngx-translate service when available or custom locales when service is null */
-    translateAllUiTexts(locales) {
-        if (this._enableTranslate && this.translate && this.translate.instant && this.translate.currentLang) {
-            const translationPrefix = getTranslationPrefix(this._gridOptions);
-            this.textItemsPerPage = this.translate.instant(`${translationPrefix}ITEMS_PER_PAGE`);
-            this.textItems = this.translate.instant(`${translationPrefix}ITEMS`);
-            this.textOf = this.translate.instant(`${translationPrefix}OF`);
-            this.textPage = this.translate.instant(`${translationPrefix}PAGE`);
-        }
-        else if (locales) {
-            this.textItemsPerPage = locales.TEXT_ITEMS_PER_PAGE || 'TEXT_ITEMS_PER_PAGE';
-            this.textItems = locales.TEXT_ITEMS || 'TEXT_ITEMS';
-            this.textOf = locales.TEXT_OF || 'TEXT_OF';
-            this.textPage = locales.TEXT_PAGE || 'TEXT_PAGE';
-        }
-    }
-}
-SlickPaginationComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'slick-pagination',
-                template: "<div class=\"slick-pagination\">\n  <div class=\"slick-pagination-nav\">\n    <nav aria-label=\"Page navigation\">\n      <ul class=\"pagination\">\n        <li class=\"page-item\" [ngClass]=\"isLeftPaginationDisabled ? 'disabled' : ''\">\n          <a class=\"page-link icon-seek-first fa fa-angle-double-left\" aria-label=\"First\"\n             (click)=\"changeToFirstPage($event)\">\n          </a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"isLeftPaginationDisabled ? 'disabled' : ''\">\n          <a class=\"page-link icon-seek-prev fa fa-angle-left\" aria-label=\"Previous\"\n             (click)=\"changeToPreviousPage($event)\">\n          </a>\n        </li>\n      </ul>\n    </nav>\n\n    <div class=\"slick-page-number\">\n      <span>{{textPage}}</span>\n      <input type=\"text\" class=\"form-control\" data-test=\"page-number-input\" [value]=\"pageNumber\" size=\"1\"\n             [readOnly]=\"totalItems === 0\" (change)=\"changeToCurrentPage($event)\">\n      <span>{{textOf}}</span><span data-test=\"page-count\"> {{pageCount}}</span>\n    </div>\n\n    <nav aria-label=\"Page navigation\">\n      <ul class=\"pagination\">\n        <li class=\"page-item\" [ngClass]=\"isRightPaginationDisabled ? 'disabled' : ''\">\n          <a class=\"page-link icon-seek-next text-center fa fa-lg fa-angle-right\" aria-label=\"Next\"\n             (click)=\"changeToNextPage($event)\">\n          </a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"isRightPaginationDisabled ? 'disabled' : ''\">\n          <a class=\"page-link icon-seek-end fa fa-lg fa-angle-double-right\" aria-label=\"Last\"\n             (click)=\"changeToLastPage($event)\">\n          </a>\n        </li>\n      </ul>\n    </nav>\n  </div>\n  <span class=\"slick-pagination-settings\">\n    <select id=\"items-per-page-label\" (change)=\"changeItemPerPage($event)\">\n      <option value=\"{{pageSize}}\" [selected]=\"pageSize === itemsPerPage\" *ngFor=\"let pageSize of availablePageSizes\">{{pageSize}}</option>\n    </select>\n    <span>{{textItemsPerPage}}</span>,\n    <span class=\"slick-pagination-count\">\n      <span *ngIf=\"totalItems\">\n        <span class=\"page-info-from-to\">\n          <span data-test=\"item-from\">{{dataFrom}}</span>-<span data-test=\"item-to\">{{dataTo}}</span>\n          {{textOf}}\n        </span>\n      </span>\n      <span class=\"page-info-total-items\">\n        <span data-test=\"total-items\">{{totalItems}}</span> {{textItems}}\n      </span>\n    </span>\n  </span>\n</div>\n"
-            },] }
-];
-SlickPaginationComponent.ctorParameters = () => [
-    { type: TranslateService, decorators: [{ type: Optional }] }
-];
-SlickPaginationComponent.propDecorators = {
-    gridOptions: [{ type: Input }],
-    paginationService: [{ type: Input }]
-};
-
 // import 3rd party vendor libs
 class AngularSlickgridComponent {
     constructor(angularUtilService, appRef, cd, containerService, elm, translate, translaterService, forRootConfig, externalServices) {
@@ -1106,10 +976,10 @@ class AngularSlickgridComponent {
         const autoTooltipExtension = new AutoTooltipExtension(this.sharedService);
         const cellExternalCopyManagerExtension = new CellExternalCopyManagerExtension(this.extensionUtility, this.sharedService);
         const cellMenuExtension = new CellMenuExtension(this.extensionUtility, this.sharedService, this.translaterService);
-        const contextMenuExtension = new ContextMenuExtension(this.extensionUtility, this.sharedService, this.treeDataService, this.translaterService);
+        const contextMenuExtension = new ContextMenuExtension(this.extensionUtility, this._eventPubSubService, this.sharedService, this.treeDataService, this.translaterService);
         const columnPickerExtension = new ColumnPickerExtension(this.extensionUtility, this.sharedService);
         const checkboxExtension = new CheckboxSelectorExtension(this.sharedService);
-        const draggableGroupingExtension = new DraggableGroupingExtension(this.extensionUtility, this.sharedService);
+        const draggableGroupingExtension = new DraggableGroupingExtension(this.extensionUtility, this._eventPubSubService, this.sharedService);
         const gridMenuExtension = new GridMenuExtension(this.extensionUtility, this.filterService, this.sharedService, this.sortService, this.backendUtilityService, this.translaterService);
         const groupItemMetaProviderExtension = new GroupItemMetaProviderExtension(this.sharedService);
         const headerButtonExtension = new HeaderButtonExtension(this.extensionUtility, this.sharedService);
@@ -1155,15 +1025,15 @@ class AngularSlickgridComponent {
         return this._paginationOptions;
     }
     set paginationOptions(newPaginationOptions) {
-        var _a;
+        var _a, _b, _c;
         if (newPaginationOptions && this._paginationOptions) {
-            this._paginationOptions = Object.assign(Object.assign({}, this._paginationOptions), newPaginationOptions);
+            this._paginationOptions = Object.assign(Object.assign(Object.assign({}, this.gridOptions.pagination), this._paginationOptions), newPaginationOptions);
         }
         else {
             this._paginationOptions = newPaginationOptions;
         }
-        this.gridOptions.pagination = this._paginationOptions;
-        this.paginationService.updateTotalItems((_a = newPaginationOptions === null || newPaginationOptions === void 0 ? void 0 : newPaginationOptions.totalItems) !== null && _a !== void 0 ? _a : 0, true);
+        this.gridOptions.pagination = (_a = this._paginationOptions) !== null && _a !== void 0 ? _a : this.gridOptions.pagination;
+        this.paginationService.updateTotalItems((_c = (_b = this.gridOptions.pagination) === null || _b === void 0 ? void 0 : _b.totalItems) !== null && _c !== void 0 ? _c : 0, true);
     }
     set columnDefinitions(columnDefinitions) {
         this._columnDefinitions = columnDefinitions;
@@ -1204,7 +1074,7 @@ class AngularSlickgridComponent {
         return this.sharedService.hierarchicalDataset;
     }
     set datasetHierarchical(newHierarchicalDataset) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _f;
         const isDatasetEqual = dequal(newHierarchicalDataset, (_b = (_a = this.sharedService) === null || _a === void 0 ? void 0 : _a.hierarchicalDataset) !== null && _b !== void 0 ? _b : []);
         const prevFlatDatasetLn = this._currentDatasetLength;
         this.sharedService.hierarchicalDataset = newHierarchicalDataset;
@@ -1213,9 +1083,8 @@ class AngularSlickgridComponent {
         }
         // when a hierarchical dataset is set afterward, we can reset the flat dataset and call a tree data sort that will overwrite the flat dataset
         if (newHierarchicalDataset && this.slickGrid && ((_d = this.sortService) === null || _d === void 0 ? void 0 : _d.processTreeDataInitialSort)) {
-            this.dataView.setItems([], this.gridOptions.datasetIdPropertyName);
+            this.dataView.setItems([], (_f = this.gridOptions.datasetIdPropertyName) !== null && _f !== void 0 ? _f : 'id');
             this.sortService.processTreeDataInitialSort();
-            this.sortTreeDataset([]);
             // we also need to reset/refresh the Tree Data filters because if we inserted new item(s) then it might not show up without doing this refresh
             // however we need 1 cpu cycle before having the DataView refreshed, so we need to wrap this check in a setTimeout
             setTimeout(() => {
@@ -1224,8 +1093,8 @@ class AngularSlickgridComponent {
                     this.filterService.refreshTreeDataFilters();
                 }
             });
+            this._isDatasetHierarchicalInitialized = true;
         }
-        this._isDatasetHierarchicalInitialized = true;
     }
     get elementRef() {
         return this.elm;
@@ -1244,6 +1113,9 @@ class AngularSlickgridComponent {
     set isDatasetInitialized(isInitialized) {
         this._isDatasetInitialized = isInitialized;
     }
+    set isDatasetHierarchicalInitialized(isInitialized) {
+        this._isDatasetHierarchicalInitialized = isInitialized;
+    }
     get registeredResources() {
         return this._registeredResources;
     }
@@ -1262,7 +1134,7 @@ class AngularSlickgridComponent {
         this._eventPubSubService.publish('onAfterGridDestroyed', true);
     }
     destroy(shouldEmptyDomElementContainer = false) {
-        var _a, _b, _c, _d, _f, _g;
+        var _a, _b, _c, _d, _f, _g, _h;
         // dispose of all Services
         this.serviceList.forEach((service) => {
             if (service && service.dispose) {
@@ -1281,21 +1153,22 @@ class AngularSlickgridComponent {
             this._registeredResources = [];
         }
         // dispose the Components
-        (_a = this.slickFooter) === null || _a === void 0 ? void 0 : _a.dispose();
-        (_b = this.slickEmptyWarning) === null || _b === void 0 ? void 0 : _b.dispose();
-        if ((_c = this._eventHandler) === null || _c === void 0 ? void 0 : _c.unsubscribeAll) {
+        (_a = this.slickEmptyWarning) === null || _a === void 0 ? void 0 : _a.dispose();
+        (_b = this.slickFooter) === null || _b === void 0 ? void 0 : _b.dispose();
+        (_c = this.slickPagination) === null || _c === void 0 ? void 0 : _c.dispose();
+        if ((_d = this._eventHandler) === null || _d === void 0 ? void 0 : _d.unsubscribeAll) {
             this._eventHandler.unsubscribeAll();
         }
-        (_d = this._eventPubSubService) === null || _d === void 0 ? void 0 : _d.unsubscribeAll();
+        (_f = this._eventPubSubService) === null || _f === void 0 ? void 0 : _f.unsubscribeAll();
         if (this.dataView) {
-            if ((_f = this.dataView) === null || _f === void 0 ? void 0 : _f.setItems) {
+            if ((_g = this.dataView) === null || _g === void 0 ? void 0 : _g.setItems) {
                 this.dataView.setItems([]);
             }
             if (this.dataView.destroy) {
                 this.dataView.destroy();
             }
         }
-        if ((_g = this.slickGrid) === null || _g === void 0 ? void 0 : _g.destroy) {
+        if ((_h = this.slickGrid) === null || _h === void 0 ? void 0 : _h.destroy) {
             this.slickGrid.destroy(shouldEmptyDomElementContainer);
         }
         if (this.backendServiceApi) {
@@ -1349,7 +1222,7 @@ class AngularSlickgridComponent {
         }
     }
     initialization(eventHandler) {
-        var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
         this.gridOptions.translater = this.translaterService;
         this._eventHandler = eventHandler;
         // when detecting a frozen grid, we'll automatically enable the mousewheel scroll handler so that we can scroll from both left/right frozen containers
@@ -1419,13 +1292,14 @@ class AngularSlickgridComponent {
         }
         // user could show a custom footer with the data metrics (dataset length and last updated timestamp)
         if (!this.gridOptions.enablePagination && this.gridOptions.showCustomFooter && this.gridOptions.customFooterOptions && this.gridContainerElement) {
-            this.slickFooter = new SlickFooterComponent(this.slickGrid, this.gridOptions.customFooterOptions, this.translaterService);
+            this.slickFooter = new SlickFooterComponent(this.slickGrid, this.gridOptions.customFooterOptions, this._eventPubSubService, this.translaterService);
             this.slickFooter.renderFooter(this.gridContainerElement);
         }
         if (!this.customDataView && this.dataView) {
+            // load the data in the DataView (unless it's a hierarchical dataset, if so it will be loaded after the initial tree sort)
             const initialDataset = ((_j = this.gridOptions) === null || _j === void 0 ? void 0 : _j.enableTreeData) ? this.sortTreeDataset(this._dataset) : this._dataset;
             this.dataView.beginUpdate();
-            this.dataView.setItems(initialDataset || [], this.gridOptions.datasetIdPropertyName);
+            this.dataView.setItems(initialDataset || [], (_k = this.gridOptions.datasetIdPropertyName) !== null && _k !== void 0 ? _k : 'id');
             this.dataView.endUpdate();
             // if you don't want the items that are not visible (due to being filtered out or being on a different page)
             // to stay selected, pass 'false' to the second arg
@@ -1475,13 +1349,13 @@ class AngularSlickgridComponent {
         this.bindResizeHook(this.slickGrid, this.gridOptions);
         // bind the Backend Service API callback functions only after the grid is initialized
         // because the preProcess() and onInit() might get triggered
-        if ((_k = this.gridOptions) === null || _k === void 0 ? void 0 : _k.backendServiceApi) {
+        if ((_l = this.gridOptions) === null || _l === void 0 ? void 0 : _l.backendServiceApi) {
             this.bindBackendCallbackFunctions(this.gridOptions);
         }
         // local grid, check if we need to show the Pagination
         // if so then also check if there's any presets and finally initialize the PaginationService
         // a local grid with Pagination presets will potentially have a different total of items, we'll need to get it from the DataView and update our total
-        if (((_l = this.gridOptions) === null || _l === void 0 ? void 0 : _l.enablePagination) && this._isLocalGrid) {
+        if (((_m = this.gridOptions) === null || _m === void 0 ? void 0 : _m.enablePagination) && this._isLocalGrid) {
             this.showPagination = true;
             this.loadLocalGridPagination(this.dataset);
         }
@@ -1489,11 +1363,11 @@ class AngularSlickgridComponent {
             // Slick Grid & DataView objects
             dataView: this.dataView,
             slickGrid: this.slickGrid,
-            extensions: (_m = this.extensionService) === null || _m === void 0 ? void 0 : _m.extensionList,
+            extensions: (_o = this.extensionService) === null || _o === void 0 ? void 0 : _o.extensionList,
             // public methods
             destroy: this.destroy.bind(this),
             // return all available Services (non-singleton)
-            backendService: (_p = (_o = this.gridOptions) === null || _o === void 0 ? void 0 : _o.backendServiceApi) === null || _p === void 0 ? void 0 : _p.service,
+            backendService: (_q = (_p = this.gridOptions) === null || _p === void 0 ? void 0 : _p.backendServiceApi) === null || _q === void 0 ? void 0 : _q.service,
             filterService: this.filterService,
             gridEventService: this.gridEventService,
             gridStateService: this.gridStateService,
@@ -1535,13 +1409,13 @@ class AngularSlickgridComponent {
      * @param dataset
      */
     refreshGridData(dataset, totalCount) {
-        var _a, _b, _c, _d, _f;
+        var _a, _b, _c, _d, _f, _g;
         if (this.gridOptions && this.gridOptions.enableEmptyDataWarningMessage && Array.isArray(dataset)) {
             const finalTotalCount = totalCount || dataset.length;
             this.displayEmptyDataWarning(finalTotalCount < 1);
         }
         if (Array.isArray(dataset) && this.slickGrid && ((_a = this.dataView) === null || _a === void 0 ? void 0 : _a.setItems)) {
-            this.dataView.setItems(dataset, this.gridOptions.datasetIdPropertyName);
+            this.dataView.setItems(dataset, (_b = this.gridOptions.datasetIdPropertyName) !== null && _b !== void 0 ? _b : 'id');
             if (!this.gridOptions.backendServiceApi && !this.gridOptions.enableTreeData) {
                 this.dataView.reSort();
             }
@@ -1559,11 +1433,11 @@ class AngularSlickgridComponent {
             }
             // display the Pagination component only after calling this refresh data first, we call it here so that if we preset pagination page number it will be shown correctly
             this.showPagination = (this.gridOptions && (this.gridOptions.enablePagination || (this.gridOptions.backendServiceApi && this.gridOptions.enablePagination === undefined))) ? true : false;
-            if (this._paginationOptions && ((_b = this.gridOptions) === null || _b === void 0 ? void 0 : _b.pagination) && ((_c = this.gridOptions) === null || _c === void 0 ? void 0 : _c.backendServiceApi)) {
+            if (this._paginationOptions && ((_c = this.gridOptions) === null || _c === void 0 ? void 0 : _c.pagination) && ((_d = this.gridOptions) === null || _d === void 0 ? void 0 : _d.backendServiceApi)) {
                 const paginationOptions = this.setPaginationOptionsWhenPresetDefined(this.gridOptions, this._paginationOptions);
                 // when we have a totalCount use it, else we'll take it from the pagination object
                 // only update the total items if it's different to avoid refreshing the UI
-                const totalRecords = (totalCount !== undefined) ? totalCount : ((_f = (_d = this.gridOptions) === null || _d === void 0 ? void 0 : _d.pagination) === null || _f === void 0 ? void 0 : _f.totalItems);
+                const totalRecords = (totalCount !== undefined) ? totalCount : ((_g = (_f = this.gridOptions) === null || _f === void 0 ? void 0 : _f.pagination) === null || _g === void 0 ? void 0 : _g.totalItems);
                 if (totalRecords !== undefined && totalRecords !== this.totalItems) {
                     this.totalItems = +totalRecords;
                 }
@@ -1650,9 +1524,10 @@ class AngularSlickgridComponent {
             if (gridOptions.enableTranslate) {
                 this.translateColumnHeaderTitleKeys();
                 this.translateColumnGroupKeys();
-                this.translateCustomFooterTexts();
             }
             this.subscriptions.push(this.translate.onLangChange.subscribe(() => {
+                // publish event of the same name that Slickgrid-Universal uses on a language change event
+                this._eventPubSubService.publish('onLanguageChange');
                 if (gridOptions.enableTranslate) {
                     this.extensionService.translateCellMenu();
                     this.extensionService.translateColumnHeaders();
@@ -1660,7 +1535,6 @@ class AngularSlickgridComponent {
                     this.extensionService.translateContextMenu();
                     this.extensionService.translateGridMenu();
                     this.extensionService.translateHeaderMenu();
-                    this.translateCustomFooterTexts();
                     this.translateColumnHeaderTitleKeys();
                     this.translateColumnGroupKeys();
                     if (gridOptions.createPreHeaderPanel && !gridOptions.enableDraggableGrouping) {
@@ -1669,32 +1543,6 @@ class AngularSlickgridComponent {
                 }
             }));
         }
-        if (!this.customDataView) {
-            // bind external sorting (backend) when available or default onSort (dataView)
-            if (gridOptions.enableSorting) {
-                // bind external sorting (backend) unless specified to use the local one
-                if (gridOptions.backendServiceApi && !gridOptions.backendServiceApi.useLocalSorting) {
-                    this.sortService.bindBackendOnSort(grid);
-                }
-                else {
-                    this.sortService.bindLocalOnSort(grid);
-                }
-            }
-            // bind external filter (backend) when available or default onFilter (dataView)
-            if (gridOptions.enableFiltering) {
-                this.filterService.init(grid);
-                // bind external filter (backend) unless specified to use the local one
-                if (gridOptions.backendServiceApi && !gridOptions.backendServiceApi.useLocalFiltering) {
-                    this.filterService.bindBackendOnFilter(grid);
-                }
-                else {
-                    this.filterService.bindLocalOnFilter(grid);
-                }
-            }
-            // load any presets if any (after dataset is initialized)
-            this.loadColumnPresetsWhenDatasetInitialized();
-            this.loadFilterPresetsWhenDatasetInitialized();
-        }
         // if user set an onInit Backend, we'll run it right away (and if so, we also need to run preProcess, internalPostProcess & postProcess)
         if (gridOptions.backendServiceApi) {
             const backendApi = gridOptions.backendServiceApi;
@@ -1728,16 +1576,41 @@ class AngularSlickgridComponent {
             this.gridEventService.bindOnCellChange(grid);
             this.gridEventService.bindOnClick(grid);
             if (dataView && grid) {
+                // bind external sorting (backend) when available or default onSort (dataView)
+                if (gridOptions.enableSorting) {
+                    // bind external sorting (backend) unless specified to use the local one
+                    if (gridOptions.backendServiceApi && !gridOptions.backendServiceApi.useLocalSorting) {
+                        this.sortService.bindBackendOnSort(grid);
+                    }
+                    else {
+                        this.sortService.bindLocalOnSort(grid);
+                    }
+                }
+                // bind external filter (backend) when available or default onFilter (dataView)
+                if (gridOptions.enableFiltering) {
+                    this.filterService.init(grid);
+                    // bind external filter (backend) unless specified to use the local one
+                    if (gridOptions.backendServiceApi && !gridOptions.backendServiceApi.useLocalFiltering) {
+                        this.filterService.bindBackendOnFilter(grid);
+                    }
+                    else {
+                        this.filterService.bindLocalOnFilter(grid);
+                    }
+                }
+                // load any presets if any (after dataset is initialized)
+                this.loadColumnPresetsWhenDatasetInitialized();
+                this.loadFilterPresetsWhenDatasetInitialized();
                 // When data changes in the DataView, we need to refresh the metrics and/or display a warning if the dataset is empty
                 const onRowCountChangedHandler = dataView.onRowCountChanged;
                 this._eventHandler.subscribe(onRowCountChangedHandler, (_e, args) => {
                     grid.invalidate();
-                    this.handleOnItemCountChanged(args.current || 0, dataView.getItemCount());
+                    this.handleOnItemCountChanged(this.dataView.getFilteredItemCount() || 0, dataView.getItemCount());
                 });
                 const onSetItemsCalledHandler = dataView.onSetItemsCalled;
                 this._eventHandler.subscribe(onSetItemsCalledHandler, (_e, args) => {
                     var _a;
-                    this.handleOnItemCountChanged(dataView.getLength(), args.itemCount);
+                    grid.invalidate();
+                    this.handleOnItemCountChanged(this.dataView.getFilteredItemCount(), args.itemCount);
                     // when user has resize by content enabled, we'll force a full width calculation since we change our entire dataset
                     if (args.itemCount > 0 && (this.gridOptions.autosizeColumnsByCellContentOnFirstLoad || this.gridOptions.enableAutoResizeColumnsByCellContent)) {
                         this.resizerService.resizeColumnsByCellContent(!((_a = this.gridOptions) === null || _a === void 0 ? void 0 : _a.resizeByContentOnlyOnFirstLoad));
@@ -1757,7 +1630,7 @@ class AngularSlickgridComponent {
                 });
             }
         }
-        // does the user have a colspan callback?
+        // did the user add a colspan callback? If so, hook it into the DataView getItemMetadata
         if (gridOptions && gridOptions.colspanCallback && dataView && dataView.getItem && dataView.getItemMetadata) {
             dataView.getItemMetadata = (rowNumber) => {
                 let callbackResult = null;
@@ -1847,7 +1720,6 @@ class AngularSlickgridComponent {
             this.resizerService.resizeGrid();
         }
         if (options.enableAutoResize) {
-            this.resizerService.bindAutoResizeDataGrid();
             if (grid && options.autoFitColumnsOnFirstLoad && options.enableAutoSizeColumns) {
                 grid.autosizeColumns();
             }
@@ -1898,7 +1770,10 @@ class AngularSlickgridComponent {
                 if ((_b = this.gridOptions) === null || _b === void 0 ? void 0 : _b.backendServiceApi) {
                     (_c = this.backendUtilityService) === null || _c === void 0 ? void 0 : _c.refreshBackendDataset(this.gridOptions);
                 }
+                this.renderPagination(this.showPagination);
             }));
+            // also initialize (render) the pagination component
+            this.renderPagination();
             this._isPaginationInitialized = true;
         }
         this.cd.detectChanges();
@@ -2081,6 +1956,26 @@ class AngularSlickgridComponent {
         this.paginationService.addRxJsResource(this.rxjs);
         this.containerService.registerInstance('RxJsResource', this.rxjs);
     }
+    /**
+     * Render (or dispose) the Pagination Component, user can optionally provide False (to not show it) which will in term dispose of the Pagination,
+     * also while disposing we can choose to omit the disposable of the Pagination Service (if we are simply toggling the Pagination, we want to keep the Service alive)
+     * @param {Boolean} showPagination - show (new render) or not (dispose) the Pagination
+     * @param {Boolean} shouldDisposePaginationService - when disposing the Pagination, do we also want to dispose of the Pagination Service? (defaults to True)
+     */
+    renderPagination(showPagination = true) {
+        var _a;
+        if (((_a = this.gridOptions) === null || _a === void 0 ? void 0 : _a.enablePagination) && !this._isPaginationInitialized && showPagination) {
+            this.slickPagination = new SlickPaginationComponent(this.paginationService, this._eventPubSubService, this.sharedService, this.translaterService);
+            this.slickPagination.renderPagination(this.gridContainerElement);
+            this._isPaginationInitialized = true;
+        }
+        else if (!showPagination) {
+            if (this.slickPagination) {
+                this.slickPagination.dispose();
+            }
+            this._isPaginationInitialized = false;
+        }
+    }
     /**
      * Takes a flat dataset with parent/child relationship, sort it (via its tree structure) and return the sorted flat array
      * @param {Array<Object>} flatDatasetInput - flat dataset input
@@ -2135,13 +2030,6 @@ class AngularSlickgridComponent {
             return Object.assign(Object.assign({}, column), { editor: column.editor && column.editor.model, internalColumnEditor: Object.assign({}, column.editor) });
         });
     }
-    /** Translate all Custom Footer Texts (footer with metrics) */
-    translateCustomFooterTexts() {
-        var _a, _b;
-        if (this.slickFooter && ((_a = this.translaterService) === null || _a === void 0 ? void 0 : _a.translate)) {
-            (_b = this.slickFooter) === null || _b === void 0 ? void 0 : _b.translateCustomFooterTexts();
-        }
-    }
     translateColumnHeaderTitleKeys() {
         // translate all columns (including hidden columns)
         this.extensionUtility.translateItems(this.sharedService.allColumns, 'nameKey', 'name');
@@ -2178,7 +2066,7 @@ class AngularSlickgridComponent {
 AngularSlickgridComponent.decorators = [
     { type: Component, args: [{
                 selector: 'angular-slickgrid',
-                template: "<div id=\"slickGridContainer-{{gridId}}\" class=\"gridPane\">\n  <div attr.id='{{gridId}}' class=\"slickgrid-container\" style=\"width: 100%\">\n  </div>\n\n  <!-- Pagination section under the grid -->\n  <slick-pagination id=\"slickPagingContainer-{{gridId}}\" *ngIf=\"showPagination\"\n                    [gridOptions]=\"gridOptions\"\n                    [paginationService]=\"paginationService\">\n  </slick-pagination>\n</div>",
+                template: "<div id=\"slickGridContainer-{{gridId}}\" class=\"gridPane\">\r\n  <div attr.id='{{gridId}}' class=\"slickgrid-container\" style=\"width: 100%\">\r\n  </div>\r\n</div>",
                 providers: [
                     // make everything transient (non-singleton)
                     AngularUtilService,
@@ -2231,11 +2119,9 @@ AngularSlickgridModule.decorators = [
                 ],
                 declarations: [
                     AngularSlickgridComponent,
-                    SlickPaginationComponent
                 ],
                 exports: [
                     AngularSlickgridComponent,
-                    SlickPaginationComponent
                 ],
                 entryComponents: [AngularSlickgridComponent]
             },] }
@@ -2245,5 +2131,5 @@ AngularSlickgridModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AngularSlickgridComponent, AngularSlickgridModule, AngularUtilService, BsDropDownService, RowDetailViewExtension, SlickPaginationComponent, SlickgridConfig, unsubscribeAllObservables, ContainerService as ɵb, TranslaterService as ɵc };
+export { AngularSlickgridComponent, AngularSlickgridModule, AngularUtilService, BsDropDownService, RowDetailViewExtension, SlickgridConfig, unsubscribeAllObservables, ContainerService as ɵb, TranslaterService as ɵc };
 //# sourceMappingURL=angular-slickgrid.js.map