> For the complete documentation index, see [llms.txt](https://ghiscoding.gitbook.io/aurelia-slickgrid/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ghiscoding.gitbook.io/aurelia-slickgrid/events/grid-dataview-events.md).

# On Events

SlickGrid has a nice amount of events, see the full list of [Available Events](/aurelia-slickgrid/events/available-events.md), which you can use by simply hook a `subscribe` to them (the `subscribe` are a custom `SlickGrid Event`). There are 2 options to get access to all these events (For the first 2 you will have to get access to the `Grid` and the `DataView` objects which are exposed in `Aurelia-Slickgrid`):

**From the list below, the number 1. is by far the easiest and preferred way**

1. with `delegate` Event Dispatch binding so you can add event handlers in your view. This library bubbles all events for the Grid and DataView by converting the camelcase methods to kebab case (ie. onMouseEnter will be on-mouse-enter. Slickgrid's EventData and Args parameters will be passed via $event.detail.eventData and $event.detail.args
2. with `bindable` values, so you can just call `gridChanged` and/or `dataviewChanged`

#### 1. Example with `delegate` Event Dispatch `(asgOnX)`

**Event Dispatch is the preferred way to access any of the** [**Available Events**](/aurelia-slickgrid/events/available-events.md)

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

**View**

```html
<aurelia-slickgrid
    grid-id="gridId"
    columns.bind="columnDefs"
    options.bind="gridOptions"
    dataset.bind="myDataset"
    on-aurelia-grid-created.trigger="aureliaGridReady($event.detail)"
    on-click.trigger="onCellClicked($event.detail.eventData, $event.detail.args)"
    on-cell-change.trigger="onCellChanged($event.detail.eventData, $event.detail.args)"
    on-mouse-enter.trigger="onMouseEntered($event.detail.eventData, $event.detail.args)">
</aurelia-slickgrid>
```

**Component**

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

```typescript
export class GridExample {
  aureliaGrid: AureliaGridInstance;
  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;

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

  attached() {
    // populate the grid
  }

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

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

  onMouseEntered(e, args) {
    // do something
  }
}
```

**Available Dispatched Events**

| Dispatched Events             |
| ----------------------------- |
| on-before-export-to-excel     |
| on-after-export-to-excel      |
| on-before-export-to-text-file |
| on-after-export-to-text-file  |
| on-grid-state-changed         |
| on-items-added                |
| on-items-deleted              |
| on-items-updated              |
| on-items-upserted             |
| on-grid-before-resize         |
| on-grid-after-resize          |

#### 2. Example with Bindable Grid/Dataview

**View**

Bind `dataview.bind` and `grid.bind`

```html
<aurelia-slickgrid
  gridId="grid2"
  dataview.bind="dataviewObj"
  grid.bind="gridObj"
  columns.bind="columns"
  options.bind="gridOptions"
  dataset.bind="dataset">
</aurelia-slickgrid>
```

**ViewModel**

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

```ts
export class GridEditorComponent {
  gridObjChanged(grid) {
    this.gridObj = grid;
  }
}
```

**How to use Grid/Dataview Events**

Once the `Grid` and `DataView` are ready, see all [Available Events](/aurelia-slickgrid/events/available-events.md). See below for the `gridChanged(grid)` and `dataviewChanged(dataview)` functions.

* The `GridExtraUtils` is to bring easy access to common functionality like getting a `column` from it's `row` and `cell` index.
* 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 `Aurelia-Slickgrid`, so it's ok to call the `dataViewObj` within some code of the `gridObjChanged()` function since `DataView` object will already be available at that time.

**Note** The example below is demonstrated with `bind` with event `Changed` hook on the `grid` and `dataview` objects. However you can also use the `EventAggregator` as shown earlier. It's really up to you to choose the way you want to call these objects.

**ViewModel**

```ts
import { inject, bindable } from 'aurelia-framework';
import { Editors, Formatters, GridExtraUtils } from 'aurelia-slickgrid';

export class GridEditorComponent {
  @bindable() gridObj: any;
  @bindable() dataviewObj: any;
  columns: Column[];
  gridOptions: GridOption;
  dataset: any[];
  dataviewObj: any;
  onCellChangeSubscriber: any;
  onCellClickSubscriber: any;

  constructor(private controlService: ControlAndPluginService) {
    // define the grid options & columns and then create the grid itself
    this.defineGrid();
  }

  detached() {
    // don't forget to unsubscribe to the Slick Grid Events
    this.onCellChangeSubscriber.unsubscribe();
    this.onCellClickSubscriber.unsubscribe();
  }

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

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

  // with bindable Dataview and Changed event
  dataviewObjChanged(dataview) {
    this.dataviewObj = dataview;
  }

  // with bindable Grid and Changed event
  gridObjChanged(grid) {
    this.gridObj = grid;
    this.subscribeToSomeGridEvents(grid);
  }

  subscribeToSomeGridEvents(grid) {
    this.onCellChangeSubscriber = grid.onCellChange.subscribe((e, args) => {
      console.log('onCellChange', args);
      // for example, CRUD with WebAPI calls
    });

    this.onCellClickSubscriber = 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();
        }
      }
    });
  }
}
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://ghiscoding.gitbook.io/aurelia-slickgrid/events/grid-dataview-events.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.