add few inline editors & example page, also finished the onCellClick callback in the grid options

Author: Ghislain Beaulac

package.json

@@ -47,6 +47,7 @@
     "@types/moment": "^2.13.0",
     "bootstrap": "^3.3.7",
     "core-js": "^2.5.1",
+    "flatpickr": "^4.0.6",
     "font-awesome": "^4.7.0",
     "graphql-query-builder": "^1.0.7",
     "jquery": "^3.2.1",

src/app/app-routing.module.ts

@@ -1,5 +1,6 @@
 import { GridBasicComponent } from './examples/grid-basic.component';
 import { GridClientSideComponent } from './examples/grid-clientside.component';
+import { GridEditorComponent } from './examples/grid-editor.component';
 import { GridFormatterComponent } from './examples/grid-formatter.component';
 import { GridOdataComponent } from './examples/grid-odata.component';
 import { GridGraphqlComponent } from './examples/grid-graphql.component';
@@ -8,6 +9,7 @@ import { Routes, RouterModule } from '@angular/router';
 
 const routes: Routes = [
   { path: 'basic', component: GridBasicComponent },
+  { path: 'editor', component: GridEditorComponent },
   { path: 'formatter', component: GridFormatterComponent },
   { path: 'clientside', component: GridClientSideComponent },
   { path: 'odata', component: GridOdataComponent },

src/app/app.component.html

@@ -20,7 +20,10 @@
         <a [routerLink]="['/basic']">Basic Grid</a>
       </li>
       <li routerLinkActive="active">
-        <a [routerLink]="['/formatter']">Formatter</a>
+        <a [routerLink]="['/editor']">Editors</a>
+      </li>
+      <li routerLinkActive="active">
+        <a [routerLink]="['/formatter']">Formatters</a>
       </li>
       <li routerLinkActive="active">
         <a [routerLink]="['/clientside']">Client Side Sort/Filter</a>

src/app/app.module.ts

@@ -7,6 +7,7 @@ import { NgModule } from '@angular/core';
 import { AppComponent } from './app.component';
 import { GridBasicComponent } from './examples/grid-basic.component';
 import { GridClientSideComponent } from './examples/grid-clientside.component';
+import { GridEditorComponent } from './examples/grid-editor.component';
 import { GridFormatterComponent } from './examples/grid-formatter.component';
 import { GridOdataComponent } from './examples/grid-odata.component';
 import { GridGraphqlComponent } from './examples/grid-graphql.component';
@@ -21,6 +22,7 @@ import { AngularSlickgridModule } from './modules/angular-slickgrid/modules/angu
     AppComponent,
     GridBasicComponent,
     GridClientSideComponent,
+    GridEditorComponent,
     GridFormatterComponent,
     GridOdataComponent,
     GridGraphqlComponent

src/app/examples/grid-basic.component.scss

@@ -5,8 +5,7 @@ import { Column, GridOption } from './../modules/angular-slickgrid/models';
 declare var Slick: any;
 
 @Component({
-  templateUrl: './grid-basic.component.html',
-  styleUrls: ['./grid-basic.component.scss']
+  templateUrl: './grid-basic.component.html'
 })
 export class GridBasicComponent implements OnInit {
   title = 'Basic Grid';
@@ -29,7 +28,7 @@ export class GridBasicComponent implements OnInit {
       enableAutoResize: false
     };
 
-    // fake a dataset
+    // mock a dataset
     this.dataset = [];
     for (let i = 0; i < 1000; i++) {
       const randomYear = 2000 + Math.floor(Math.random() * 10);

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

@@ -7,8 +7,7 @@ function randomBetween(min, max) {
 }
 
 @Component({
-  templateUrl: './grid-clientside.component.html',
-  styleUrls: ['./grid-clientside.component.scss']
+  templateUrl: './grid-clientside.component.html'
 })
 export class GridClientSideComponent implements OnInit {
   title = 'Client Side Sort/Filter';
@@ -63,7 +62,7 @@ export class GridClientSideComponent implements OnInit {
       enableCellNavigation: true
     };
 
-    // fake a dataset
+    // mock a dataset
     this.dataset = [];
     for (let i = 0; i < 1000; i++) {
       const randomYear = randomBetween(2000, 2025);

src/app/examples/grid-clientside.component.scss

@@ -0,0 +1,11 @@
+<!--The content below is only a placeholder and can be replaced.-->
+<div class="container">
+    <h2>{{title}}</h2>
+    <div class="subtitle" [innerHTML]="subTitle"></div>
+
+    <angular-slickgrid gridId="grid2"
+              [columnDefinitions]="columnDefinitions"
+              [gridOptions]="gridOptions"
+              [dataset]="dataset">
+    </angular-slickgrid>
+  </div>

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

@@ -0,0 +1,65 @@
+import { Component, OnInit } from '@angular/core';
+import { Editors, Formatters } from './../modules/angular-slickgrid';
+import { OnCellClickArgs, Column, FieldType, Formatter, GridOption } from './../modules/angular-slickgrid/models';
+
+@Component({
+  templateUrl: './grid-formatter.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)`;
+
+  columnDefinitions: Column[];
+  gridOptions: GridOption;
+  dataset: any[];
+
+  ngOnInit(): void {
+    this.columnDefinitions = [
+      { id: 'id', field: 'id',
+        formatter: Formatters.editPencil,
+        maxWidth: 30,
+        onCellClick: (args: OnCellClickArgs) => {
+          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: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, editor: Editors.integer, sortable: true },
+      { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.dateIso, 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, sortable: true }
+    ];
+
+    this.gridOptions = {
+      autoResize: {
+        containerId: 'demo-container',
+        sidePadding: 15
+      },
+      editable: true,
+      enableCellNavigation: true,
+      asyncEditorLoading: false,
+      autoEdit: true
+    };
+
+    // mock a dataset
+    this.dataset = [];
+    for (let i = 0; i < 5; i++) {
+      const randomYear = 2000 + Math.floor(Math.random() * 10);
+      const randomMonth = Math.floor(Math.random() * 11);
+      const randomDay = Math.floor((Math.random() * 29));
+      const randomPercent = Math.round(Math.random() * 100);
+
+      this.dataset[i] = {
+        id: i,
+        title: 'Task ' + i,
+        duration: Math.round(Math.random() * 100) + '',
+        percentComplete: randomPercent,
+        percentCompleteNumber: randomPercent,
+        start: new Date(randomYear, randomMonth, randomDay),
+        finish: new Date(randomYear, (randomMonth + 1), randomDay),
+        effortDriven: (i % 5 === 0)
+      };
+    }
+  }
+}