Add more inline editors. changed all date formatters and filterCondition to use columnDef type field for knowing which date format to use. Exposed grid and dataview object at the component level to get access to all Slickgrid events.

Author: Ghislain Beaulac

.angular-cli.json

@@ -20,6 +20,7 @@
       "prefix": "app",
       "styles": [
         "../node_modules/bootstrap/dist/css/bootstrap.css",
+        "../node_modules/flatpickr/dist/flatpickr.min.css",
         "../node_modules/font-awesome/css/font-awesome.css",
         "app/slickgrid-custom-variables.scss",
         "styles.scss"
@@ -28,24 +29,7 @@
         "../node_modules/jquery/dist/jquery.js",
         "../node_modules/bootstrap/dist/js/bootstrap.js",
         "../node_modules/slickgrid/lib/jquery-ui-1.11.3.js",
-        "../node_modules/slickgrid/lib/jquery.event.drag-2.3.0.js",
-        "../node_modules/slickgrid/slick.core.js",
-        "../node_modules/slickgrid/slick.dataview.js",
-        "../node_modules/slickgrid/slick.grid.js",
-        "../node_modules/slickgrid/slick.dataview.js",
-        "../node_modules/slickgrid/plugins/slick.autotooltips.js",
-        "../node_modules/slickgrid/plugins/slick.cellcopymanager.js",
-        "../node_modules/slickgrid/plugins/slick.cellexternalcopymanager.js",
-        "../node_modules/slickgrid/plugins/slick.cellrangedecorator.js",
-        "../node_modules/slickgrid/plugins/slick.cellrangeselector.js",
-        "../node_modules/slickgrid/plugins/slick.cellselectionmodel.js",
-        "../node_modules/slickgrid/plugins/slick.checkboxselectcolumn.js",
-        "../node_modules/slickgrid/plugins/slick.headerbuttons.js",
-        "../node_modules/slickgrid/plugins/slick.headermenu.js",
-        "../node_modules/slickgrid/plugins/slick.rowmovemanager.js",
-        "../node_modules/slickgrid/plugins/slick.rowselectionmodel.js",
-        "../node_modules/slickgrid/controls/slick.columnpicker.js",
-        "../node_modules/slickgrid/controls/slick.pager.js"
+        "../node_modules/slickgrid/lib/jquery.event.drag-2.3.0.js"
       ],
       "environmentSource": "environments/environment.ts",
       "environments": {

src/app/app.module.ts

@@ -1,4 +1,4 @@
-import { GridOdataService } from './modules/angular-slickgrid/services';
+import { GridOdataService, ResizerService } from './modules/angular-slickgrid/services';
 import { AppRoutingRoutingModule } from './app-routing.module';
 import { BrowserModule } from '@angular/platform-browser';
 import { HttpClientModule } from '@angular/common/http';
@@ -33,7 +33,7 @@ import { AngularSlickgridModule } from './modules/angular-slickgrid/modules/angu
     HttpClientModule,
     AngularSlickgridModule
   ],
-  providers: [GridOdataService],
+  providers: [GridOdataService, ResizerService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

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

@@ -3,9 +3,28 @@
     <h2>{{title}}</h2>
     <div class="subtitle" [innerHTML]="subTitle"></div>
 
-    <angular-slickgrid gridId="grid2"
-              [columnDefinitions]="columnDefinitions"
-              [gridOptions]="gridOptions"
-              [dataset]="dataset">
-    </angular-slickgrid>
-  </div>
+    <div class="col-sm-4">
+        <label>autoEdit setting</label>
+        <br/>
+        <span id="radioAutoEdit">
+            <label class="radio-inline control-label" for="radioTrue">
+                <input type="radio" name="inlineRadioOptions" id="radioTrue" checked [value]="isAutoEdit" (change)="setAutoEdit(true)"> ON (single-click)
+            </label>
+            <label class="radio-inline control-label" for="radioFalse">
+                <input type="radio" name="inlineRadioOptions" id="radioFalse" [value]="isAutoEdit" (change)="setAutoEdit(false)"> OFF (double-click)
+            </label>
+        </span>
+    </div>
+
+    <div class="col-sm-8">
+        <div class="alert alert-info" *ngIf="updatedObject">
+            <strong>Update Object:</strong> {{updatedObject | json}}
+        </div>
+    </div>
+
+    <div class="col-sm-12">
+        <angular-slickgrid gridId="grid2" (dataviewChanged)="dataviewReady($event)" (gridChanged)="gridReady($event)"
+            [columnDefinitions]="columnDefinitions" [gridOptions]="gridOptions" [dataset]="dataset">
+        </angular-slickgrid>
+    </div>
+</div>

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

@@ -1,9 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+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';
 
 @Component({
-  templateUrl: './grid-formatter.component.html'
+  templateUrl: './grid-editor.component.html'
 })
 export class GridEditorComponent implements OnInit {
   title = 'Example 4: Editors';
@@ -12,11 +13,27 @@ export class GridEditorComponent implements OnInit {
   columnDefinitions: Column[];
   gridOptions: GridOption;
   dataset: any[];
+  isAutoEdit: boolean = true;
+  updatedObject: any;
+  gridObj: any;
+  dataviewObj: any;
+
+  constructor(private resizer: ResizerService) {}
 
   ngOnInit(): void {
     this.columnDefinitions = [
-      { id: 'id', field: 'id',
-        formatter: Formatters.editPencil,
+      {
+        id: 'edit', field: 'id',
+        formatter: Formatters.editIcon,
+        maxWidth: 30,
+        onCellClick: (args: OnCellClickArgs) => {
+          console.log(args);
+          console.log(this);
+        }
+      },
+      {
+        id: 'delete', field: 'id',
+        formatter: Formatters.deleteIcon,
         maxWidth: 30,
         onCellClick: (args: OnCellClickArgs) => {
           console.log(args);
@@ -25,10 +42,10 @@ export class GridEditorComponent implements OnInit {
       },
       { 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: '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: '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 }
+      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: Formatters.checkmark, type: FieldType.number, editor: Editors.checkbox }
     ];
 
     this.gridOptions = {
@@ -37,20 +54,21 @@ export class GridEditorComponent implements OnInit {
         sidePadding: 15
       },
       editable: true,
+      enableColumnPicker: true,
       enableCellNavigation: true,
       asyncEditorLoading: false,
-      autoEdit: true
+      autoEdit: this.isAutoEdit
     };
 
     // mock a dataset
-    this.dataset = [];
-    for (let i = 0; i < 5; i++) {
+    let mockedDataset = [];
+    for (let i = 0; i < 1000; 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] = {
+      mockedDataset[i] = {
         id: i,
         title: 'Task ' + i,
         duration: Math.round(Math.random() * 100) + '',
@@ -61,5 +79,36 @@ export class GridEditorComponent implements OnInit {
         effortDriven: (i % 5 === 0)
       };
     }
+    this.dataset = mockedDataset;
+  }
+
+  gridReady(grid) {
+    this.gridObj = grid;
+
+    grid.onCellChange.subscribe((e, args) => {
+      console.log('onCellChange', args);
+      this.updatedObject = args.item;
+      this.resizer.resizeGrid(this.gridObj, this.gridOptions, 10);
+    });
+    grid.onClick.subscribe((e, args) => {
+      const column = GridExtraUtils.getColumnDefinitionAndData(args);
+      console.log('onClick', args, column);
+      if (column.columnDef.id === 'delete') {
+        if (confirm('Are you sure?')) {
+          this.dataviewObj.deleteItem(column.dataContext.id);
+          this.dataviewObj.refresh();
+        }
+      }
+    });
+
+  }
+  dataviewReady(dataview) {
+    this.dataviewObj = dataview;
+  }
+
+  setAutoEdit(isAutoEdit) {
+    this.isAutoEdit = isAutoEdit;
+    this.gridObj.setOptions({ autoEdit: isAutoEdit }); // change the grid option dynamically
+    return true;
   }
 }

src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts

@@ -1,6 +1,26 @@
+// import 3rd party vendor libs
+import 'slickgrid/lib/jquery-ui-1.11.3';
+import 'slickgrid/lib/jquery.event.drag-2.3.0';
+import 'slickgrid/slick.core';
+import 'slickgrid/slick.dataview';
+import 'slickgrid/slick.grid';
+import 'slickgrid/slick.dataview';
+import 'slickgrid/plugins/slick.autotooltips';
+import 'slickgrid/plugins/slick.cellcopymanager';
+import 'slickgrid/plugins/slick.cellexternalcopymanager';
+import 'slickgrid/plugins/slick.cellrangedecorator';
+import 'slickgrid/plugins/slick.cellrangeselector';
+import 'slickgrid/plugins/slick.cellselectionmodel';
+import 'slickgrid/plugins/slick.checkboxselectcolumn';
+import 'slickgrid/plugins/slick.headerbuttons';
+import 'slickgrid/plugins/slick.headermenu';
+import 'slickgrid/plugins/slick.rowmovemanager';
+import 'slickgrid/plugins/slick.rowselectionmodel';
+import 'slickgrid/controls/slick.columnpicker';
+import 'slickgrid/controls/slick.pager';
 import { castToPromise } from './../services/utilities';
 import { Column, ColumnFilters, FormElementType, GridOption } from './../models';
-import { AfterViewInit, Component, Injectable, Input, OnInit } from '@angular/core';
+import { AfterViewInit, Component, EventEmitter , Injectable, Input, Output, OnInit } from '@angular/core';
 import { FilterService, GridEventService, SortService, ResizerService } from './../services';
 import { GlobalGridOptions } from './../global-grid-options';
 
@@ -32,8 +52,9 @@ export class AngularSlickgridComponent implements AfterViewInit, OnInit {
   gridHeightString: string;
   gridWidthString: string;
   showPagination = false;
-  onFilter = new Slick.Event();
 
+  @Output() dataviewChanged = new EventEmitter<any>();
+  @Output() gridChanged = new EventEmitter<any>();
   @Input() gridId: string;
   @Input() columnDefinitions: Column[];
   @Input() gridOptions: GridOption;
@@ -68,6 +89,8 @@ export class AngularSlickgridComponent implements AfterViewInit, OnInit {
 
     this.grid = new Slick.Grid(`#${this.gridId}`, this._dataView, this.columnDefinitions, this._gridOptions);
     this.grid.setSelectionModel(new Slick.RowSelectionModel());
+    this.gridChanged.emit(this.grid);
+    this.dataviewChanged.emit(this._dataView);
 
     if (this._gridOptions.enableColumnPicker) {
       const columnpicker = new Slick.Controls.ColumnPicker(this.columnDefinitions, this.grid, this._gridOptions);
@@ -145,7 +168,7 @@ export class AngularSlickgridComponent implements AfterViewInit, OnInit {
         grid.autosizeColumns();
       }
     } else {
-      this.resizer.resizeGrid(grid, options, { height: this.gridHeight, width: this.gridWidth });
+      this.resizer.resizeGrid(grid, options, 0, { height: this.gridHeight, width: this.gridWidth });
     }
   }
 
@@ -186,10 +209,8 @@ export class AngularSlickgridComponent implements AfterViewInit, OnInit {
       }
       if (this._gridOptions.enableAutoResize) {
         // resize the grid inside a slight timeout, in case other DOM element changed prior to the resize (like a filter/pagination changed)
-        setTimeout(() => {
-          this.resizer.resizeGrid(this.grid, this._gridOptions);
+        this.resizer.resizeGrid(this.grid, this._gridOptions, 10);
           // this.grid.autosizeColumns();
-        });
       }
     }
   }

src/app/modules/angular-slickgrid/editors/checkboxEditor.ts

@@ -1,17 +1,13 @@
-// import flatpickr from 'flatpickr';
-// import 'flatpickr/dist/flatpickr.min.css';
 import $ from 'jquery';
 import { Editor, KeyCode } from './../models';
 
 /*
  * An example of a 'detached' editor.
- * The UI is added onto document BODY and .position(), .show() and .hide() are implemented.
  * KeyDown events are also handled to provide handling for Tab, Shift-Tab, Esc and Ctrl-Enter.
  */
 export class CheckboxEditor implements Editor {
-  $input;
-  $wrapper;
-  defaultValue;
+  $input: any;
+  defaultValue: boolean;
 
   constructor(private args: any) {
     this.init();
@@ -23,15 +19,15 @@ export class CheckboxEditor implements Editor {
     this.$input.focus();
   }
 
-  destroy() {
+  destroy(): void {
     this.$input.remove();
   }
 
-  focus() {
+  focus(): void {
     this.$input.focus();
   }
 
-  loadValue(item) {
+  loadValue(item: any) {
     this.defaultValue = !!item[this.args.column.field];
     if (this.defaultValue) {
       this.$input.prop('checked', true);
@@ -44,11 +40,11 @@ export class CheckboxEditor implements Editor {
     this.$input.prop('checked', !this.$input.prop('checked'));
   }
 
-  serializeValue() {
+  serializeValue(): boolean {
     return this.$input.prop('checked');
   }
 
-  applyValue(item, state) {
+  applyValue(item: any, state: any) {
     item[this.args.column.field] = state;
   }