Add column inline onCellChange property.

Author: Ghislain Beaulac

README.md

@@ -13,24 +13,19 @@ The goal is of course to be able to run SlickGrid within Angular 4+ but also to
 ### NPM Package
 [Angular-Slickgrid on NPM](https://www.npmjs.com/package/angular-slickgrid)
 
-<a name="wiki"></a>
-
 ## Wiki / Documentation
 The Wiki is where all the documentation and instructions will go, so please consult the [Angular-Validation - Wiki](https://github.com/ghiscoding/angular-slickgrid/wiki) before opening any issues. The [Wiki - HOWTO](https://github.com/ghiscoding/angular-slickgrid/wiki/HOWTO---Step-by-Step) is a great place to start with.
 
 
-<a name="main-features"></a>
-
 ## Main features
 You can see some screenshots below and the instructions down below.
 
 This is a work in progress, but so far here are some of the features that `angular-slickgrid` brings (on top of Slickgrid itself):
 - Easier use of SlickGrid within `Angular` as it is just a component (simply pass a column definitions and a dataset and you're good to go)
 - Bootstrap Theme with SASS variables for extra customization (if you create a theme, then please make a PR)
 - Auto-resize (boolean flag), will resize the datagrid viewport with available space even on browser resize (basically takes available space of it's container)
-- Integrated Plugins.
-    - Column Picker (show/hide any column by doing `right+click` in the header, click [here to see print screen](/screenshots/columnPicker.png)).
-    - ... more to come
+- Inline Editors
+- Support all SlickGrid Plugins.
 - Server side (backend) Services (filtering, sorting, pagination)
     - [GraphQL](https://github.com/ghiscoding/Angular-Slikgrid/wiki/GraphQL)
     - [OData](https://github.com/ghiscoding/Angular-Slickgrid/wiki/OData)
@@ -40,20 +35,15 @@ This is a work in progress, but so far here are some of the features that `angul
   - Formatters (a few default ones were added, and you can easily create custom ones too)
   - Optimized DataView which brings a lot of functionalities (sort, grouping, and more)
     - even server side data is saved into the SlickGrid DataView
+  - All the [SlickGrid Events](https://github.com/6pac/SlickGrid/wiki/Grid-Events) are supported, see the [Wiki](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Grid-&-DataView-Events)
 - ... more to come
 
-<a name="missing-features"></a>
-
 ## Missing features (planned items, not necessarily in order of execution)
 The following are SlickGrid features which are not yet included in this library but will be in the eventual future.
-- Inline Editors
 - Filters to support multi-select dropdown and eventually custom filters
-- Plugins (Header Menu, Grid Menu, Column Header Buttons)
-- Row selection, will probably provide a `onRowsChanged()` in the `gridOptions` object
-- Cell click, will probably provide a `onCellClicked()` in the `gridOptions` object
 
 ### License
-[MIT License](https://github.com/ghiscoding/Angular-Slickgrid/blob/master/LICENSE)
+[MIT License](LICENSE)
 
 ## Use it, like it?
 You like and use this great library `Angular-Slickgrid`? You can always upvote :star: and/or contribute :)

screenshots/column-picker.png

@@ -1,3 +1,6 @@
 .body-content {
   margin-top: 60px;
 }
+.red {
+  color: red;
+}

screenshots/editors.png

@@ -1,14 +1,14 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { Editors, Formatters } from './../modules/angular-slickgrid';
 import { GridExtraUtils, ResizerService } from './../modules/angular-slickgrid/services';
-import { OnCellClickArgs, Column, FieldType, Formatter, GridOption } from './../modules/angular-slickgrid/models/index';
+import { OnEventArgs, Column, FieldType, Formatter, GridOption } from './../modules/angular-slickgrid/models/index';
 
 @Component({
   templateUrl: './grid-editor.component.html'
 })
 export class GridEditorComponent implements OnInit {
   title = 'Example 4: Editors';
-  subTitle = `inline editors (not yet implement) and onCellClick editor (execute an action, e.g: open a modal window)`;
+  subTitle = `Inline Editors and onCellClick Editor (execute an action, e.g: open a modal window)`;
 
   columnDefinitions: Column[];
   gridOptions: GridOption;
@@ -26,24 +26,27 @@ export class GridEditorComponent implements OnInit {
         id: 'edit', field: 'id',
         formatter: Formatters.editIcon,
         maxWidth: 30,
-        onCellClick: (args: OnCellClickArgs) => {
+        onCellClick: (args: OnEventArgs) => {
           console.log(args);
-          console.log(this);
         }
       },
       {
         id: 'delete', field: 'id',
         formatter: Formatters.deleteIcon,
         maxWidth: 30,
-        onCellClick: (args: OnCellClickArgs) => {
+        onCellClick: (args: OnEventArgs) => {
           console.log(args);
-          console.log(this);
         }
       },
       { 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 },
+      { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number, editor: Editors.text,
+        onCellChange: (args: OnEventArgs) => {
+        alert('onCellChange directly attached to the column definition');
+        console.log(args);
+        }
+      },
       { id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, editor: Editors.integer },
-      { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, editor: Editors.date },
+      { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.date/*, editor: Editors.date*/ },
       { id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, sortable: true, type: FieldType.date },
       { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: Formatters.checkmark, type: FieldType.number, editor: Editors.checkbox }
     ];

src/app/app.component.scss

@@ -0,0 +1,10 @@
+import { GridOption } from './gridOption.interface';
+import { Column } from './column.interface';
+
+export interface OnEventArgs {
+  columnDef: Column;
+  dataContext: any;
+  dataView: any; // TODO replace by a DataView interface
+  grid: any;    // TODO replace by a SlickGrid interface
+  gridDefinition: GridOption;
+}

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

@@ -1,4 +1,4 @@
-import { OnCellClickArgs, CellArgs, GridOption } from './../models/index';
+import { OnEventArgs, CellArgs, GridOption } from './../models/index';
 
 export class GridEventService {
   /* OnMouseHover (Enter/Leave) Events */
@@ -16,6 +16,32 @@ export class GridEventService {
     });
   }
 
+  /* OnCellChange Event */
+  attachOnCellChange(grid: any, gridOptions: GridOption, dataView: any) {
+    // subscribe to this Slickgrid event of onCellChange
+    grid.onCellChange.subscribe((e: Event, args: CellArgs) => {
+      if (!e || !args || !args.grid || args.cell === undefined || !args.grid.getColumns || !args.grid.getDataItem) {
+        return;
+      }
+      const column = args.grid.getColumns()[args.cell];
+
+      // if the column definition has a onCellChange property (a callback function), then run it
+      if (typeof column.onCellChange === 'function') {
+        // add to the output gridOptions & dataView since we'll need them inside the AJAX column.onCellChange
+        const returnedArgs: OnEventArgs = {
+          dataView,
+          gridDefinition: gridOptions,
+          grid,
+          columnDef: column,
+          dataContext: args.grid.getDataItem(args.row)
+        };
+
+        // finally call up the Slick.column.onCellChanges.... function
+        column.onCellChange(returnedArgs);
+        // e.stopImmediatePropagation();
+      }
+    });
+  }
   /* OnClick Event */
   attachOnClick(grid: any, gridOptions: GridOption, dataView: any) {
 
@@ -25,19 +51,19 @@ export class GridEventService {
       }
       const column = args.grid.getColumns()[args.cell];
 
-      // so if the columns definition does have an column.onCellClick property (a function attached), then run it
+      // if the column definition has a onCellClick property (a callback function), then run it
       if (typeof column.onCellClick === 'function') {
-        // attach both "this._gridOptions" and "_slickDataViewObj" since we'll need them inside the AJAX column.onClick
-        const onCellClickArgs: OnCellClickArgs = {
+        // add to the output gridOptions & dataView since we'll need them inside the AJAX column.onClick
+        const returnedArgs: OnEventArgs = {
           dataView,
           gridDefinition: gridOptions,
           grid,
           columnDef: column,
           dataContext: args.grid.getDataItem(args.row)
         };
 
-        // finally call up the Slick.column.onClicks.... function
-        column.onCellClick(onCellClickArgs);
+        // finally call up the Slick.column.onCellClick.... function
+        column.onCellClick(returnedArgs);
         e.stopImmediatePropagation();
       }