Addons, Extensions (SlickGrid controls,plugins)

updated doc to 4.x version

Description

SlickGrid, the core library, has multiple controls and plugins that can be added to SlickGrid to provide more capabilities. They are really addons that can be added and there are a few (Column Picker, Header Menu, Grid Menu, Draggable Grouping, Row Detail, ...). Within Angular-Slickgrid you can add them just be enabling certain flags (enableColumnPicker, enableGridMenu, ...). and so each addon is being instantiated internally by Angular-Slickgrid, typically you don't really need to know or use these instances but in some cases you might, so just read more below.

The wordings

Addon, Controls, Plugins, Extensions... this is all confusing, what is what? So to know exactly what is what, I decided to use the following wordings

• controls are extra SlickGrid addon like: Column Picker, Grid Menu (the full list is here)
• plugins are extra SlickGrid addon like: Cell Menu, Header Menu, Grid Menu, Draggable Grouping, Row Detail, ... (the full list is here)
• addon is what I decided to represent as being both controls and plugins together
• extension is what I decided to represent as the class that I created in Angular-Slickgrid that will instantiate the addon
  • for example the RowDetailViewExtension will internally instantiate the SlickGrid addon via addonInstance = new SlickRowDetail()

How to get the Addon instance?

Sometime you maybe want to use some function of the addon, for example if we use the Row Detail in Angular-Slickgrid, we enable the flag enableRowDetailView: true (which internally will call new SlickRowDetail()) and we pass a few options through the rowDetailView grid options... but what if we want to collapse all the rows? Angular-Slickgrid doesn't expose that directly but what you can do is get the addon instance and call the collapseAll() from it.

We can get the addon instance in 3 different ways, you choose whichever is easier for you (we'll demo with the Row Detail addon). The Option 1 or Option 3 are probably the best way of getting the instance.

1. use onExtensionRegistered from the rowDetailView grid options
2. use the (onAngularGridCreated) and then use getExtensionInstanceByName()
3. use the (onAngularGridCreated) and reference the addon instance via the extensions.[addonName].instance

Option 1. onExtensionRegistered

Component

export class MyComponent {
  rowDetailInstance: any;
  columnDefinitions: Column[];

  initGrid() {
    this.gridOptions = {
      enableRowDetailView: true,
      rowDetailView: {
        // ... other options
        onExtensionRegistered: (addon) => this.rowDetailInstance = addon,
      }
    };
  }

  closeAllRowDetail() {
    if (this.rowDetailInstance) {
      this.rowDetailInstance.collapseAll();
    }
  }
}

Option 2. (onAngularGridCreated) with getExtensionInstanceByName()

View

<angular-slickgrid gridId="grid2"
          [columnDefinitions]="columnDefinitions"
          [gridOptions]="gridOptions"
          [dataset]="dataset"
          (onAngularGridCreated)="angularGridReady($event.detail)">
</angular-slickgrid>

Component

export class MyComponent {
  rowDetailInstance: any;
  angularGrid: AngularGridInstance;
  columnDefinitions: Column[];

  angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;
    this.rowDetailInstance = angularGrid.extensionService.getExtensionInstanceByName(ExtensionName.rowDetailView);
  }

  initGrid() {
    this.gridOptions = {
      enableRowDetailView: true,
      rowDetailView: {
        // ... other options
      }
    };
  }

  closeAllRowDetail() {
    if (this.rowDetailInstance) {
      this.rowDetailInstance.collapseAll();
    }
  }
}

Option 3. (onAngularGridCreated) with extensions.[addonName].instance

View

<angular-slickgrid gridId="grid2"
          [columnDefinitions]="columnDefinitions"
          [gridOptions]="gridOptions"
          [dataset]="dataset"
          (onAngularGridCreated)="angularGridReady($event.detail)">
</angular-slickgrid>

Component

export class MyComponent {
  rowDetailInstance: any;
  angularGrid: AngularGridInstance;
  columnDefinitions: Column[];

  angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;
    this.rowDetailInstance = angularGrid.extensions.rowDetailView.instance;
  }

  initGrid() {
    this.gridOptions = {
      enableRowDetailView: true,
      rowDetailView: {
        // ... other options
      }
    };
  }

  closeAllRowDetail() {
    if (this.rowDetailInstance) {
      this.rowDetailInstance.collapseAll();
    }
  }
}