Addons, Extensions (SlickGrid controls,plugins)

updated for version 4.x

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 slickgrid-react you can add them just be enabling certain flags (enableColumnPicker, enableGridMenu, ...). All of these SlickGrid controls/plugins have dedicated SlickGrid classes (e.g. new SlickRowDetail()) and so each addon is being instantiated internally by slickgrid-react, 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 slickgrid-react 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 slickgrid-react, 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? slickgrid-react 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 (onReactGridCreated) and then use getExtensionInstanceByName()
3. use the (onReactGridCreated) and reference the addon instance via the extensions.[addonName].instance

Option 1. onExtensionRegistered

Component

export export class GridBasicComponent extends React.Component<Props, State> {
  rowDetailInstance: SlickRowDetailView;
  columnDefinitions: Column[];

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

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

Option 2. onReactGridCreated with getExtensionInstanceByName()

Component

export class MyComponent extends React.Component<Props, State> {
  rowDetailInstance: SlickRowDetailView;
  reactGrid: SlickgridReactInstance;
  columnDefinitions: Column[];

  reactGridReady(reactGrid: SlickgridReactInstance) {
    this.reactGrid= reactGrid;
    this.rowDetailInstance = reactGrid.extensionService.getExtensionInstanceByName(ExtensionName.rowDetailView);
  }

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

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

Option 3. onReactGridCreated

Component

interface Props {}
interface State {
  columnDefinitions: Column[];
  gridOptions: GridOption;
  dataset: any[];
}
export class MyComponent extends React.Component<Props, State> {
  rowDetailInstance: SlickRowDetailView;
  reactGrid: SlickgridReactInstance;

  componentDidMount() {
    this.defineGrid();
  }

  reactGridReady(reactGrid: SlickgridReactInstance) {
    this.reactGrid = reactGrid;
    this.rowDetailInstance = reactGrid.extensions.rowDetailView.instance;
  }

  defineGrid() {
    const columnDefinitions = [/*...*/];
    const gridOptions = {
      enableRowDetailView: true,
      rowDetailView: {
        // ... other options
      }
    };
    this.setState((state: State) => ({
      ...state,
      gridOptions,
      columnDefinitions,
      dataset: this.getData(),
    }));
  }

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

  render() {
    return (
      <SlickgridReact gridId="grid1"
        columnDefinitions={this.state.columnDefinitions}
        gridOptions={this.state.gridOptions}
        dataset={this.state.dataset}
        onReactGridCreated={$event => this.reactGridReady($event.detail)}
        onGridStateChanged={$event => this.gridStateChanged($event.detail)}
      />
    );
  }
}