I'm working with angular-slickgrid v6 in angular 16.While using (onClick)="onCellClicked($event.detail.eventData, $event.detail.args)"
to fetch the selected row,I get this error Property 'detail' does not exist on type 'Event'. (onClick)="onCellClicked($event.detail.eventData, $event.detail.args)"
.Now how to get the selected row ? Below I'm attaching my code:
html file:
<angular-slickgrid gridId="grid1"
[columnDefinitions]="columnDefinitions"
[gridOptions]="gridOptions"
[dataset]="dataset"
(onClick)="onCellClicked($event.detail.eventData, $event.detail.args)"
>
</angular-slickgrid>
Now adding typescript file:
this.gridOptions = {
enableAutoResize: false,
enableSorting: true,
gridHeight: 400,
gridWidth: 1500,
enableFiltering: true,
enableExcelExport: true, registerExternalResources: [new ExcelExportService()]
};
onCellClicked(e:any,args:any) {
// let row=args.item;
// console.log(e.detail.args.grid.getData())
// console.log(e.detail.eventData)
}
You most probably have strictTemplates
enabled (which is enabled by default when creating a new project from the CLI) and this is causing issues in Angular-Slickgrid because all the SlickGrid and Angular-Slickgrid events are Custom Event which Angular complains about because it doesn't find its types, this is extensively discussed in this Angular-Slickgrid discussion Template error and I also opened a Stack Overflow question on that matter as well.
How to use Custom Event (not Event Emitter) without `strictTemplates` to complain about `$event` not being a Custom Event type?
Also see Angular type checking docs
You have 3 approaches to deal with this
strictTemplates
in your tsconfig.json
config$any
type$any($event)
for example $any($event).detail.eventData
<angular-slickgrid gridId="grid1"
(onClick)="onCellClicked($any($event))"
</angular-slickgrid>
CustomEvent
<angular-slickgrid gridId="grid1"
(onClick)="onCellClicked($event)"
</angular-slickgrid>
onCellClicked(e: CustomEvent) {
const { eventData, args } = (event as CustomEvent).detail as any;
}
// or simply
onCellClicked(e: any) {
const eventData = event.detail.eventData;
}
The simplest is obviously the option 1 but you lose the strictness on the view templates (which personally I don't care that much and I usually disable it myself).
I added a Troubleshooting Section on the Angular-Slickgrid readme.
It was also explained in the On Events - Wiki