> For the complete documentation index, see [llms.txt](https://ghiscoding.gitbook.io/angular-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/angular-slickgrid/slick-grid-dataview-objects/slickgrid-dataview-objects.md).

# Slick Grid/DataView Objects

In some cases you might want a feature that is not yet available in `Angular-Slickgrid` but exists in the original `SlickGrid`, what should you do? Fear not, we got you covered. `Angular-Slickgrid` exposes the SlickGrid `Grid` and `DataView` objects through Event Emitters, these objects are created when Angular-Slickgrid initialize the grid (with `ngAfterViewInit`). The ones we want to use for our usage would be `onGridCreated` and `onDataviewCreated`, depending on which object you want to obtain.

**The new preferred way is now to use the `AngularGridInstance` via the `onAngularGridCreated` Event Emitter**

#### Event Emitter

Angular-Slickgrid have the following Event Emitters that you can hook to

* `onAngularGridCreated`
* `onDataviewCreated`
* `onGridCreated`
* `onBeforeGridCreate`
* `onBeforeGridDestroy`

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 `onAngularGridCreated`

Since version `1.x`, we can now access the Slick `Grid` & `DataView` objects directly from the `AngularGridInstance` through the `(onAngularGridCreated)` Event Emitter, for example:

**View**

```html
<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"
          [columns]="columns"
          [options]="gridOptions"
          [dataset]="dataset"
          (onAngularGridCreated)="angularGridReady($event.detail">
</angular-slickgrid>
```

**Component**

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

export class MyApp {
  angularGrid: AngularGridInstance;
  columns: 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();
  }
}
```

#### SlickGrid Events (original SlickGrid)

You have access to all original SlickGrid events which you can subscribe, for more info refer to the [Docs - Grid & DataView Events](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/docs/events/grid-dataview-events.md)

#### Usage

There's already all the necessary information on how to use this on the [Docs - Grid & DataView Events](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/docs/events/grid-dataview-events.md#view) page, so I suggest you to head over to that Documentation page on how to use the `SlickGrid` and `DataView` objects