SlickGrid angular2+, making a column clickable

Issue

I want to make a specific column in slickgrid clickable.i have tried one possible solution but its doesn't seem to work properly.

Here is the code...

      routeToDetailsPage(mpn,manufacturer_name){
      this.router.navigate(['/dashboard/part/detail/' + encodeURIComponent(mpn) + '/' 
      + 'itemNumber'], {
      relativeTo: this.activatedRoute,
      queryParams: {
      flag: 'partIqMonitoring',
      manufacture: manufacturer_name,
      mpn: mpn,
      part_type: 'non-electronic'
      }
    });
   }

here is the

    routeDetails(value,dataContext){
    return '<span 
    (click)=routeToDetailsPage(dataContext.mpn,dataContext.manufacturer_name)></span>'

}

Solution

Your question seems incomplete, I'm not sure if you meant cell clicking or column header clicking? Also note that adding Angular code will not be interpreted because SlickGrid is a plain JavaScript library and it doesn't know what to do with that code. What will work is probably what is shown below

If you meant cell click and you use Angular-Slickgrid, then you can use the Angular-Slickgrid onClick() or directly on the column definition onCellClick, the later is easier since it is defined directly on the column you want (as oppose to the (click) which is triggered from any column)

For the cell click defined on the column definition, you can do it this way

this.columnDefinitions = [
  {
    id: 'delete', field: 'id', formatter: Formatters.deleteIcon,

    // on cell click callback
    onCellClick: (e: Event, args: OnEventArgs) => {
      console.log(args);
      if (confirm('Are you sure?')) {
        this.angularGrid.gridService.deleteItemById(args.dataContext.id);
      }
    }
  }
];

or from the (onClick) triggered by any columns

<angular-slickgrid gridId="grid22"
                       [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>

then in your Component

onCellClicked(e: Event, args: any) {
  const metadata = this.angularGrid.gridService.getColumnFromEventArguments(args);
  console.log(metadata);

  if (metadata.columnDef.id === 'delete') {
    if (confirm('Are you sure?')) {
      this.angularGrid.gridService.deleteItemById(metadata.dataContext.id);
    }
  }
}

Also note that I'm the author of Angular-Slickgrid if that is what you are using. If you are not using Angular-Slickgrid, then you should probably take a look at it, since it has all necessary code to work with Angular.

Answered By - ghiscoding