Add row and cell in the column definition onCellChange

Author: Ghislain Beaulac

src/app/examples/grid-editor.component.ts

@@ -8,6 +8,11 @@ export class GridEditorComponent implements OnInit {
   title = 'Example 3: Editors';
   subTitle = `
   Grid with Inline Editors and onCellClick actions (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Editors">Wiki link</a>).
+  <ul>
+    <li>When using "enableCellNavigation: true", clicking on a cell will automatically make it active &amp; selected.
+    <ul><li>If you don't want this behavior, then you should disable "enableCellNavigation"</li></ul>
+    <li>Inline Editors requires "enableCellNavigation: true" (not sure why though)</li>
+  </ul>
   `;
 
   columnDefinitions: Column[];
@@ -27,25 +32,24 @@ export class GridEditorComponent implements OnInit {
         formatter: Formatters.editIcon,
         minWidth: 30,
         maxWidth: 30,
-        /*
         // use onCellClick OR grid.onClick.subscribe which you can see down below
         onCellClick: (args: OnEventArgs) => {
           console.log(args);
           alert(`Editing: ${args.dataContext.title}`);
-        }*/
+          this.gridExtraService.highlightRow(args.row, 1500);
+          this.gridExtraService.setSelectedRow(args.row);
+        }
       },
       {
         id: 'delete', field: 'id',
         formatter: Formatters.deleteIcon,
         minWidth: 30,
         maxWidth: 30,
-        /*
         // use onCellClick OR grid.onClick.subscribe which you can see down below
         onCellClick: (args: OnEventArgs) => {
           console.log(args);
           alert(`Deleting: ${args.dataContext.title}`);
         }
-        */
       },
       { id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, editor: Editors.longText },
       { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number, editor: Editors.text,
@@ -102,6 +106,9 @@ export class GridEditorComponent implements OnInit {
       this.updatedObject = args.item;
       this.resizer.resizeGrid(this.gridObj, this.gridOptions, 10);
     });
+
+    // You could also subscribe to grid.onClick
+    // Note that if you had already setup "onCellClick" in the column definition, you cannot use grid.onClick
     grid.onClick.subscribe((e, args) => {
       const column = GridExtraUtils.getColumnDefinitionAndData(args);
       console.log('onClick', args, column);

src/app/modules/angular-slickgrid/models/onEventArgs.interface.ts

@@ -2,6 +2,8 @@ import { GridOption } from './gridOption.interface';
 import { Column } from './column.interface';
 
 export interface OnEventArgs {
+  row: number;
+  cell: number;
   columnDef: Column;
   dataContext: any;
   dataView: any; // TODO replace by a DataView interface

src/app/modules/angular-slickgrid/services/gridEvent.service.ts

@@ -14,6 +14,8 @@ export class GridEventService {
       if (typeof column.onCellChange === 'function') {
         // add to the output gridOptions & dataView since we'll need them inside the AJAX column.onCellChange
         const returnedArgs: OnEventArgs = {
+          row: args.row,
+          cell: args.cell,
           dataView,
           gridDefinition: gridOptions,
           grid,
@@ -40,6 +42,8 @@ export class GridEventService {
       if (typeof column.onCellClick === 'function') {
         // add to the output gridOptions & dataView since we'll need them inside the AJAX column.onClick
         const returnedArgs: OnEventArgs = {
+          row: args.row,
+          cell: args.cell,
           dataView,
           gridDefinition: gridOptions,
           grid,