Grid & DataView Events

updated doc to 1.x version

index

• Example with Event Dispatch
• Example with Event Emitters
• Example with (onAngularGridCreated) Event Emitter

Description

SlickGrid has a nice amount of Grid Events or DataView Events which you can use by simply hooking a subscribe to them (please note, subscribe are custom SlickGrid Event and are NOT RxJS Observables, however they are very similar concept). To get access to all these events, you will have to bind to the Grid and the DataView objects which are exposed in Angular-Slickgrid with EventEmitter (Angular-Slickgrid uses emit after the Grid and DataView becomes ready). Once these are called, it basically mean that the Grid and DataView are ready and we can subscribe to any of the SlickGrid Events. There are 2 options to get access to all these events:

Example with Event Dispatch (sgOnX)

Event Dispatch is the preferred way to access any Slick Grid or DataView Events

All the Slick Grid events (and DataView) are exposed through Event Dispatch and are available as (sgOnX)and that's it, for example

View

<angular-slickgrid 
     gridId="grid2"
     [columnDefinitions]="columnDefinitions" 
     [gridOptions]="gridOptions" 
     [dataset]="dataset"
     (onAngularGridCreated)="angularGridReady($event)"
     (sgOnCellChange)="onCellChanged($event.detail.eventData, $event.detail.args)"
     (sgOnClick)="onCellClicked($event.detail.eventData, $event.detail.args)">
</angular-slickgrid>

Component

Hook yourself to the Changed event of the bindable grid object.

export class GridEditorComponent {
  angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;

    // the Angular Grid Instance exposes both Slick Grid & DataView objects
    this.gridObj = angularGrid.slickGrid;
    this.dataViewObj = angularGrid.dataView;

    // it also exposes all the Services
    // this.angularGrid.resizerService.resizeGrid(10);
  }

  onCellChanged(e, args) {
    this.updatedObject = args.item;
    this.angularGrid.resizerService.resizeGrid(10);
  }

  onCellClicked(e, args) {
    // do something
  }
}

Example with Event Emitters

Angular-Slickgrid have the following Event Emitters that you can hook to. However please note that onDataviewCreated and onGridCreated are a lot less used now since onAngularGridCreated now exposes both the Slick Grid & DataView objects.

• onAngularGridCreated
• onDataviewCreated
• onGridCreated
• onBeforeGridCreate
• onBeforeGridDestroy
• onAfterGridDestroyed

View

Bind (onDataviewCreated) and (onGridCreated) if you want to call any SlickGrid legacy functions.

<angular-slickgrid 
  gridId="grid2" 
  (onDataviewCreated)="dataviewReady($event)" 
  (onGridCreated)="gridReady($event)"
  [columnDefinitions]="columnDefinitions" 
  [gridOptions]="gridOptions" 
  [dataset]="dataset">
</angular-slickgrid>

Component

Once the Grid and DataView are ready, you can subscribe to any SlickGrid Events (click to see the full list) and don't forget to unsubscribe to avoid unwanted behaviors and memory leak when your component is destroyed. See below for the gridReady(grid) and dataviewReady(dataview) functions.

• The example shown below is subscribing to onClick and ask the user to confirm a delete, then will delete it from the DataView.
• Technically, the Grid and DataView are created at the same time by Angular-Slickgrid, so it's ok to call the dataViewObj within some code of the gridReady() function since DataView object will already be available at that time.

import { Component, Input, OnInit } from '@angular/core';
import { Editors, Formatters, GridExtraUtils } from 'angular-slickgrid';

@Component({
  templateUrl: './grid-editor.component.html'
})
export class GridEditorComponent implements OnInit {
  columnDefinitions: Column[];
  gridOptions: GridOption;
  dataset: any[];  
  dataviewObj: any;

  constructor() {}

  ngOnInit(): void {
    this.columnDefinitions = [
      { id: 'delete', field: 'id', formatter: Formatters.deleteIcon, maxWidth: 30 }
      // ...
    ];

    this.gridOptions = {
      editable: true,
      enableCellNavigation: true,
      autoEdit: true
    };
  }

  gridReady(grid) {
    grid.onCellChange.subscribe((e, args) => {
      console.log('onCellChange', args);
      // for example, CRUD with WebAPI calls
    });
    grid.onClick.subscribe((e, args) => {
      const column = GridExtraUtils.getColumnDefinitionAndData(args);

      if (column.columnDef.id === 'delete') {
        if (confirm('Are you sure?')) {
          this.dataviewObj.deleteItem(column.dataContext.id);
          this.dataviewObj.refresh();
        }
      }
    });

  }
  dataviewReady(dataview) {
    this.dataviewObj = dataview;
  }
}

Example with (onAngularGridCreated) Event Emitter

Angular-Slickgrid now also expose the Slick Grid and DataView objects through the (onAngularGridCreated) Event Emitter, for example:

View

<span id="radioAutoEdit">
    <label class="radio-inline control-label" for="radioTrue">
        <input type="radio" name="inlineRadioOptions" id="radioTrue" checked [value]="isAutoEdit" (change)="setAutoEdit(true)"> ON (single-click)
    </label>
    <label class="radio-inline control-label" for="radioFalse">
        <input type="radio" name="inlineRadioOptions" id="radioFalse" [value]="isAutoEdit" (change)="setAutoEdit(false)"> OFF (double-click)
    </label>
</span>

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

Component

import { AngularGridInstance, Column, GridOption } from 'angular-slickgrid';

export class MyApp {
  angularGrid: AngularGridInstance;
  columnDefinitions: Column[];
  gridOptions: GridOption;
  dataset: any[];
  isAutoEdit = true;
  gridObj: any;
  dataViewObj: any;


  angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;
    this.gridObj = angularGrid.slickGrid;
    this.dataViewObj = angularGrid.dataView;
  }

  /** Change dynamically `autoEdit` grid options */
  setAutoEdit(isAutoEdit) {
    this.isAutoEdit = isAutoEdit;
    this.gridObj.setOptions({ autoEdit: isAutoEdit }); // change the grid option dynamically
    return true;
  }

  collapseAllGroups() {
    this.dataviewObj.collapseAllGroups();
  }

  expandAllGroups() {
    this.dataviewObj.expandAllGroups();
  }
}