Updated GridOption of the Angular slickgrid

Question

is it possible to update the options showPreHeaderPanel and createPreHeaderPanel by clicking a button. I tried to modify this.gridOptions and I tried to use this.angularGrid.slickGrid.setOptions but the grid doesn't update it.

import { Component, OnInit } from '@angular/core';
import { Column, GridOption, AngularGridInstance } from 'angular-slickgrid';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'ngSlickGrid';

  angularGrid: AngularGridInstance;
  columnDefinitions: Column[] = [];
  gridOptions: GridOption = {};
  dataset: any[] = [];

  angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;
  }

  ngOnInit(): void {
    this.columnDefinitions = [
      { id: 'title', name: 'Title', field: 'title', sortable: true, columnGroup: "test 1" },
      { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, columnGroup: "test 1" },
      { id: '%', name: '% Complete', field: 'percentComplete', sortable: true, columnGroup: "test 2" },
      { id: 'start', name: 'Start', field: 'start', columnGroup: "test 2" },
      { id: 'finish', name: 'Finish', field: 'finish' },
      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', sortable: true }
    ];
    this.gridOptions = {
      enableCellNavigation: true,
      showPreHeaderPanel: true,
      createPreHeaderPanel: true
    };

    this.dataset = [];

    for (let i = 0; i < 1000; i++) {
      const randomYear = 2000 + Math.floor(Math.random() * 10);
      const randomMonth = Math.floor(Math.random() * 11);
      const randomDay = Math.floor((Math.random() * 28));
      const randomPercent = Math.round(Math.random() * 100);

      this.dataset[i] = {
        id: i, // again VERY IMPORTANT to fill the "id" with unique values
        title: 'Task ' + i,
        duration: Math.round(Math.random() * 100) + '',
        percentComplete: randomPercent,
        start: `${randomMonth}/${randomDay}/${randomYear}`,
        finish: `${randomMonth}/${randomDay}/${randomYear}`,
        effortDriven: (i % 5 === 0)
      };
    }
  }

  public deleteMultiHeader(): void {
    console.log("deleteMultiHeader");
    // this.gridOptions.showPreHeaderPanel = false;
    // this.gridOptions.createPreHeaderPanel = false;
    const gridOpt: GridOption = {
      showPreHeaderPanel: false,
      createPreHeaderPanel: false
    }
    this.angularGrid.slickGrid.setOptions(gridOpt, true);
  }

  public createMultiHeader(): void {
    console.log("createMultiHeader");
    // this.gridOptions.showPreHeaderPanel = true;
    // this.gridOptions.createPreHeaderPanel = true;
    const gridOpt: GridOption = {
      showPreHeaderPanel: true,
      createPreHeaderPanel: true
    }
    this.angularGrid.slickGrid.setOptions(gridOpt, true);
  }
}

<div class="container">
  <button (click)="deleteMultiHeader()" data-test="auto-commit">
    Delete multi header
  </button>
  <button (click)="createMultiHeader()" data-test="auto-commit">
    Create multi header
  </button>
  <angular-slickgrid gridId="grid1" [columnDefinitions]="columnDefinitions" [gridOptions]="gridOptions"
    [dataset]="dataset" (onAngularGridCreated)="angularGridReady($event)">
  </angular-slickgrid>
</div>

Answer 1

Note that I'm the author of Angular-Slickgrid and I did not try the code below but I expect it to work.

First of, you should also define a height with preHeaderPanelHeight (default is 25) and then you assume that the option will redraw the grid and everything and that is where you misunderstand how it works, it's just an option it doesn't do anything by itself. It should work if you first create the preheader in your grid options but just don't show it if you don't want it to show up at first and then later you call the method to toggle its visibility which is setPreHeaderPanelVisibility

initializeGrid() {
  this.gridOptions = {
    preHeaderPanelHeight: 35,
    showPreHeaderPanel: false,
    createPreHeaderPanel: true
  }
}

public deleteMultiHeader(): void {
  // signature is setTopPanelVisibility(visible, animate)
  this.angularGrid.slickGrid.setPreHeaderPanelVisibility(false, true);
}

public createMultiHeader(): void {
  this.angularGrid.slickGrid.setPreHeaderPanelVisibility(true, true);
}

I don't think you can change, neither create on the fly with createPreHeaderPanel, it probably won't work (but you can try) because it needs to rebuild the html and the setPreHeaderPanelVisibility method only does a show/hide not a create.

Also note there are a few of these visibility methods for each of the elements that can be shown/hidden on the fly

• setTopPanelVisibility
• setHeaderRowVisibility
• setColumnHeaderVisibility

It's highly encouraged to look at the source code, you'll find a lot of info, the setPreHeaderPanelVisibility method is shown on this line line and you can see all the public options/methods of SlickGrid on this line