-
-
Notifications
You must be signed in to change notification settings - Fork 119
Grid & DataView Events
- Example with Event Dispatch
- Example with Custom Event
- Example with
(onAngularGridCreated)
- Error thrown in the IDE when using
strictTemplates
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 Custom Event (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:
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 (onX)
and that's it, for example
<angular-slickgrid
gridId="grid2"
[columnDefinitions]="columnDefinitions"
[gridOptions]="gridOptions"
[dataset]="dataset"
(onAngularGridCreated)="angularGridReady($event.detail)"
(onCellChange)="onCellChanged($event.detail.eventData, $event.detail.args)"
(onClick)="onCellClicked($event.detail.eventData, $event.detail.args)">
</angular-slickgrid>
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
}
}
Angular-Slickgrid can trigger the following custom events 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
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>
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 theDataView
. - Technically, the
Grid
andDataView
are created at the same time byAngular-Slickgrid
, so it's ok to call thedataViewObj
within some code of thegridReady()
function sinceDataView
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;
}
}
Angular-Slickgrid now also expose the Slick Grid and DataView objects through the (onAngularGridCreated)
event, for example:
<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.detail)">
</angular-slickgrid>
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();
}
}
You might get some error thrown in your editor by the Angular-Language-Service, the error might 1 of these
Event onAngularGridCreated is not emitted by any applicable directives nor by angular-slickgrid element
or
error TS2339: Property 'detail' does not exist on type 'Event'.
There are 3 possible solutions to fix this issue
- disabled
strictTemplates
- define argument type as
Event
to avoid error then later cast it as aCustomEvent
angularGridReady(event: Event) {
this.angularGrid = (event as CustomEvent).detail as AngularGridInstance;
}
- use
$any()
in the View
<angular-slickgrid gridId="grid1"
[columnDefinitions]="columnDefinitions"
[gridOptions]="gridOptions"
[dataset]="dataset"
(onAngularGridCreated)="angularGridReady($any($event).detail)">
</angular-slickgrid>
You can read more on the subject at:
- Stack Overflow question Cannot use onAngularGridCreated emitter
- Discussion #815
Contents
- Angular-Slickgrid Wiki
- Installation
- Styling
- Interfaces/Models
- Testing Patterns
- Column Functionalities
- Global Grid Options
- Localization
- Events
- Grid Functionalities
- Auto-Resize / Resizer Service
- Resize by Cell Content
- Composite Editor
- Context Menu
- Custom Tooltip
- Add/Delete/Update or Highlight item
- Dynamically Change Row CSS Classes
- Excel Copy Buffer
- Export to Excel
- Export to File (CSV/Txt)
- Grid State & Presets
- Grouping & Aggregators
- Row Detail
- SlickGrid Controls
- SlickGrid Plugins
- Pinning (frozen) of Columns/Rows
- Tree Data Grid
- SlickGrid & DataView objects
- Addons (controls/plugins)
- Backend Services