SlickGrid & DataView Objects

updated doc to 2.x version

In some cases you might want a feature that is not yet available in Aurelia-Slickgrid but exists in the original SlickGrid, what should you do? Fear not, we got you covered. Aurelia-Slickgrid exposes the SlickGrid Grid and DataView objects through Event Aggregators, these objects are created when Aurelia-Slickgrid initialize the grid (with attached()). So if you subscribe to the Event Aggregator, you will get the SlickGrid and DataView objects and from there you can call any of the SlickGrid features.

The new preferred way is now to use the AureliaGridInstance

Event Aggregator

Aurelia-Slickgrid (starting with version 1.3.x) have the following Events that you can subscribe to with an Event Aggregator:

• onDataviewCreated
• onGridCreated
• onBeforeGridCreate
• onBeforeGridDestroy
• onAfterGridDestroyed

The ones we want to use for our usage would be onGridCreated and onDataviewCreated, depending on which object you want to obtain.

Grid & DataView objects through AureliaGridCreated

Since version 2.x, we can now access the Slick Grid & DataView objects directly from the AureliaGridInstance through the asg-on-aurelia-grid-created Event Dispatch, for example:

View

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

<aurelia-slickgrid
      grid-id="grid1"
      column-definitions.bind="columnDefinitions"
      grid-options.bind="gridOptions"
      dataset.bind="dataset"
      asg-on-aurelia-grid-created.delegate="aureliaGridReady($event.detail)">
</aurelia-slickgrid>

Component

import { AureliaGridInstance, Column, GridOption } from 'aurelia-slickgrid';

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


  aureliaGridReady(aureliaGrid: AureliaGridInstance) {
    this.aureliaGrid = aureliaGrid;

    // the Aurelia Grid Instance exposes both Slick Grid & DataView objects
    this.gridObj = aureliaGrid.slickGrid;
    this.dataViewObj = aureliaGrid.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();
  }
}

Grid & DataView objects & Services through instances bindable

You could also get all the Service instances via the new instances bindable property

<aurelia-slickgrid grid-id="grid19" 
    column-definitions.bind="columnDefinitions" 
    grid-options.bind="gridOptions"
    dataset.bind="dataset"
    extensions.bind="extensions"
    instances.bind="aureliaGrid">
  </aurelia-slickgrid>

Component

import { AureliaGridInstance, Column, GridOption } from 'aurelia-slickgrid';

export class MyApp {
  aureliaGrid: AureliaGridInstance;

  exportToExcel() {
    this.aureliaGrid.excelExportService.exportToExcel({
      filename: 'Export',
      format: FileType.xlsx
    });
  }

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

SlickGrid Events (original SlickGrid)

You have access to all original SlickGrid events which you can subscribe, for more info refer to the Wiki - Grid & DataView Events

Usage

There's already all the necessary information on how to use this on the Wiki - Grid & DataView Events page, so I suggest you to head over to that Wiki page on how to use the SlickGrid and DataView objects