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