@PostConstruct
    private passBeansUp(): void {
        super.setBeans({
            gridOptionsWrapper: this.gridOptionsWrapper,
            eventService: this.eventService,
            context: this.context,
            loggerFactory: this.loggerFactory,
            dragAndDropService: this.dragAndDropService
        });

        let localeTextFunc = this.gridOptionsWrapper.getLocaleTextFunc();
        let emptyMessage = localeTextFunc('pivotColumnsEmptyMessage', 'Drag here to set column labels');
        let title = localeTextFunc('pivots', 'Column Labels');

        super.init({
            dragAndDropIcon: DragAndDropService.ICON_GROUP,
            icon: Utils.createIconNoSpan('pivotPanel', this.gridOptionsWrapper, null),
            emptyMessage: emptyMessage,
            title: title
        });

        this.addDestroyableEventListener(this.eventService, Events.EVENT_COLUMN_EVERYTHING_CHANGED, this.refresh.bind(this));
        this.addDestroyableEventListener(this.eventService, Events.EVENT_COLUMN_PIVOT_CHANGED, this.refresh.bind(this));
        this.addDestroyableEventListener(this.eventService, Events.EVENT_COLUMN_PIVOT_MODE_CHANGED, this.checkVisibility.bind(this));

        this.refresh();
    }

    protected isColumnDroppable(column: Column): boolean {
        if (this.gridOptionsWrapper.isFunctionsReadOnly()) { return false; }

        // we never allow grouping of secondary columns
        if (!column.isPrimary()) { return false; }

        let allowPivot = column.isAllowPivot();
        let columnNotAlreadyPivoted = !column.isPivotActive();
        return allowPivot && columnNotAlreadyPivoted;
    }

    protected isColumnDroppable(column: Column): boolean {
        if (this.gridOptionsWrapper.isFunctionsReadOnly()) { return false; }

        // we never allow grouping of secondary columns
        if (!column.isPrimary()) { return false; }

        let columnValue = column.isAllowValue();
        let columnNotValue= !column.isValueActive();
        return columnValue && columnNotValue;
    }

 private onBtPivotMode(): void {
     let newValue = this.cbPivotMode.isSelected();
     if (newValue !== this.columnController.isPivotMode()) {
         this.columnController.setPivotMode(newValue, "toolPanelUi");
         const api = this.gridOptionsWrapper.getApi();
         if(api) {
             api.refreshHeader();
         }
     }
 }

 protected updateColumns(columns: Column[]): void {
     if (this.gridOptionsWrapper.isFunctionsPassive()) {
         let event: ColumnPivotChangeRequestEvent = {
             type: Events.EVENT_COLUMN_PIVOT_CHANGE_REQUEST,
             columns: columns,
             api: this.gridApi,
             columnApi: this.columnApi
         };
         this.eventService.dispatchEvent(event);
     } else {
         this.columnController.setPivotColumns(columns, "toolPanelUi");
     }
 }

    private onRowGroupChanged(): void {
        if (!this.rowGroupComp) {
            return;
        }

        let rowGroupPanelShow = this.gridOptionsWrapper.getRowGroupPanelShow();

        if (rowGroupPanelShow === Constants.ALWAYS) {
            this.rowGroupComp.setVisible(true);
        } else if (rowGroupPanelShow === Constants.ONLY_WHEN_GROUPING) {
            let grouping = !this.columnController.isRowGroupEmpty();
            this.rowGroupComp.setVisible(grouping);
        } else {
            this.rowGroupComp.setVisible(false);
        }
    }

    @PostConstruct
    private passBeansUp():void {
        super.setBeans({
            gridOptionsWrapper: this.gridOptionsWrapper,
            eventService: this.eventService,
            context: this.context,
            loggerFactory: this.loggerFactory,
            dragAndDropService: this.dragAndDropService
        });

        let localeTextFunc = this.gridOptionsWrapper.getLocaleTextFunc();
        let emptyMessage = localeTextFunc('rowGroupColumnsEmptyMessage', 'Drag here to set row groups');
        let title = localeTextFunc('groups', 'Row Groups');

        super.init({
            dragAndDropIcon: DragAndDropService.ICON_GROUP,
            icon: Utils.createIconNoSpan('rowGroupPanel', this.gridOptionsWrapper, null),
            emptyMessage: emptyMessage,
            title: title
        });

        this.addDestroyableEventListener(this.eventService, Events.EVENT_COLUMN_ROW_GROUP_CHANGED, this.refreshGui.bind(this));
    }

    private checkVisibility(): void {
        let pivotMode = this.columnController.isPivotMode();

        if (this.isHorizontal()) {
            // what we do for horizontal (ie the pivot panel at the top) depends
            // on the user property as well as pivotMode.
            switch (this.gridOptionsWrapper.getPivotPanelShow()) {
                case 'always':
                    this.setVisible(pivotMode);
                    break;
                case 'onlyWhenPivoting':
                    let pivotActive = this.columnController.isPivotActive();
                    this.setVisible(pivotMode && pivotActive);
                    break;
                default:
                    // never show it
                    this.setVisible(false);
                    break;
            }
        } else {
            // in toolPanel, the pivot panel is always shown when pivot mode is on
            this.setVisible(pivotMode);
        }
    }

 private createTemplate(): string {
     let localeTextFunc = this.gridOptionsWrapper.getLocaleTextFunc();
     return `<div class="ag-pivot-mode-panel">
             <ag-checkbox class="ag-pivot-mode-select" label="${localeTextFunc('pivotMode', 'Pivot Mode')}"></ag-checkbox>
         </div>`;
 }