Add functionality of Add/Update datagrid item with demo

Author: Ghislain Beaulac

src/app/app-routing.module.ts

@@ -1,5 +1,4 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { GridAddItemComponent } from './examples/grid-additem.component';
 import { GridMenuComponent } from './examples/grid-menu.component';
 import { GridBasicComponent } from './examples/grid-basic.component';
 import { GridClientSideComponent } from './examples/grid-clientside.component';
@@ -10,8 +9,11 @@ import { GridHeaderMenuComponent } from './examples/grid-headermenu.component';
 import { GridOdataComponent } from './examples/grid-odata.component';
 import { GridGraphqlComponent } from './examples/grid-graphql.component';
 import { GridRowSelectionComponent } from './examples/grid-rowselection.component';
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
 
 const routes: Routes = [
+  { path: 'additem', component: GridAddItemComponent },
   { path: 'basic', component: GridBasicComponent },
   { path: 'editor', component: GridEditorComponent },
   { path: 'formatter', component: GridFormatterComponent },

src/app/app.component.html

@@ -46,6 +46,9 @@
       <li routerLinkActive="active">
         <a [routerLink]="['/selection']">10- Row Selection</a>
       </li>
+      <li routerLinkActive="active">
+        <a [routerLink]="['/additem']">11- Add/Update Grid Item</a>
+      </li>
     </ul>
   </div>
 </section>

src/app/app.module.ts

@@ -6,6 +6,7 @@ import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
+import { GridAddItemComponent } from './examples/grid-additem.component';
 import { GridBasicComponent } from './examples/grid-basic.component';
 import { GridClientSideComponent } from './examples/grid-clientside.component';
 import { GridEditorComponent } from './examples/grid-editor.component';
@@ -25,6 +26,7 @@ import { AngularSlickgridModule } from './modules/angular-slickgrid/modules/angu
 @NgModule({
   declarations: [
     AppComponent,
+    GridAddItemComponent,
     GridBasicComponent,
     GridClientSideComponent,
     GridEditorComponent,

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

@@ -0,0 +1,19 @@
+<!--The content below is only a placeholder and can be replaced.-->
+<div class="container">
+    <h2>{{title}}</h2>
+    <div class="subtitle" [innerHTML]="subTitle"></div>
+
+    <div class="col-sm-12">
+        <span>
+            <button class="btn btn-sm btn-default" (click)="addNewItem()">Add New Mocked Item</button>
+            <button class="btn btn-sm btn-default" (click)="updateSecondItem()">Update 2nd Row Item with Random Duration</button>
+            <button class="btn btn-sm btn-default" (click)="highlighFifthRow()">Highlight 5th Row</button>
+        </span>
+        <hr/>
+    </div>
+
+    <div class="col-sm-12">
+        <angular-slickgrid gridId="grid2" [columnDefinitions]="columnDefinitions" [gridOptions]="gridOptions" [dataset]="dataset">
+        </angular-slickgrid>
+    </div>
+</div>

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

@@ -0,0 +1,110 @@
+import { Component, OnInit } from '@angular/core';
+import { Column, Editors, FieldType, Formatter, Formatters, GridExtraService, GridExtraUtils, GridOption, OnEventArgs, ResizerService } from './../modules/angular-slickgrid';
+
+@Component({
+  templateUrl: './grid-additem.component.html'
+})
+export class GridAddItemComponent implements OnInit {
+  title = 'Example 11: Add / Update / Highlight a Datagrid Item';
+  subTitle = `
+  Add / Update / Hightlight an Item from the Datagrid (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Add,-Update-or-Highlight-a-Datagrid-Item" target="_blank">Wiki link</a>).
+  <ul>
+    <li><b>Note:</b> this demo is <b>only</b> on the datagrid (client) side, you still need to deal with the backend yourself</li>
+    <li>Adding an item, will always be showing as the 1st item in the grid because that is the best visual place to add it</li>
+    <li>Add/Update an item requires a valid Slickgrid Selection Model, you have 2 choices to deal with this:</li>
+    <ul><li>You can enable "enableCheckboxSelector" or "enableRowSelection" to True</li></ul>
+    <li>Click on any of the buttons below to test this out</li>
+    <li>You can change the highlighted color &amp; animation by changing the SASS variables:</li>
+    <ul>
+      <li>"$row-highlight-background-color" or "$row-highlight-fade-animation"</li>
+      <li>Take a look at the available <a href="https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/modules/angular-slickgrid/styles/_variables.scss" target="_blank">SASS Variables</a></li>
+    </ul>
+  </ul>
+  `;
+
+  columnDefinitions: Column[];
+  gridOptions: GridOption;
+  dataset: any[];
+  updatedObject: any;
+
+  constructor(private gridExtraService: GridExtraService, private resizer: ResizerService) {}
+
+  ngOnInit(): void {
+    this.columnDefinitions = [
+      { 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,
+        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: '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 }
+    ];
+
+    this.gridOptions = {
+      asyncEditorLoading: false,
+      autoResize: {
+        containerId: 'demo-container',
+        sidePadding: 15
+      },
+      editable: true,
+      enableColumnPicker: true,
+      enableCellNavigation: true,
+      enableRowSelection: true
+    };
+
+    // mock a dataset
+    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);
+
+      mockedDataset[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)
+      };
+    }
+    this.dataset = mockedDataset;
+  }
+
+  addNewItem() {
+    const randomId = Math.floor(Math.random() * (10000 - 1000) + 1000);
+    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);
+
+    const newItem = {
+      id: randomId,
+      title: 'Task ' + randomId,
+      duration: Math.round(Math.random() * 100) + '',
+      percentComplete: randomPercent,
+      percentCompleteNumber: randomPercent,
+      start: new Date(randomYear, randomMonth, randomDay),
+      finish: new Date(randomYear, (randomMonth + 2), randomDay),
+      effortDriven: true
+    };
+    this.gridExtraService.addItemToDatagrid(newItem);
+  }
+
+  highlighFifthRow() {
+    this.gridExtraService.highlightRow(4, 1500);
+  }
+
+  updateSecondItem() {
+    const firstItem = this.gridExtraService.getDataItemByRowNumber(1);
+    firstItem.duration = Math.round(Math.random() * 100);
+    this.gridExtraService.updateDataGridItem(firstItem);
+  }
+}

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

@@ -5,7 +5,6 @@ <h2>{{title}}</h2>
 
     <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)

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

@@ -9,7 +9,7 @@ export class GridEditorComponent implements OnInit {
   subTitle = `
   Grid with Inline Editors and onCellClick actions (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Editors" target="_blank">Wiki link</a>).
   <ul>
-    <li>When using "enableCellNavigation: true", clicking on a cell will automatically make it active &amp; selected.
+    <li>When using "enableCellNavigation: true", clicking on a cell will automatically make it active &amp; selected.</li>
     <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>

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

@@ -117,7 +117,7 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
     this.attachResizeHook(this.grid, this._gridOptions);
 
     // attach grid extra service
-    const gridExtraService = this.gridExtraService.init(this.grid, this._dataView);
+    const gridExtraService = this.gridExtraService.init(this.grid, this.columnDefinitions, this._gridOptions, this._dataView);
   }
 
   attachDifferentHooks(grid: any, options: GridOption, dataView: any) {

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

@@ -1,15 +1,26 @@
-import { GridOption } from './../models';
+import { Column, GridOption } from './../models';
 import $ from 'jquery';
 
 export class GridExtraService {
   private _grid: any;
   private _dataView: any;
+  private _columnDefinition: Column[];
+  private _gridOptions: GridOption;
 
-  init(grid, dataView) {
+  init(grid, columnDefinition, gridOptions, dataView) {
     this._grid = grid;
+    this._columnDefinition = columnDefinition;
+    this._gridOptions = gridOptions;
     this._dataView = dataView;
   }
 
+  getDataItemByRowNumber(rowNumber: number) {
+    if (!this._grid || typeof this._grid.getDataItem !== 'function') {
+      throw new Error('We could not find SlickGrid Grid object');
+    }
+    return this._grid.getDataItem(rowNumber);
+  }
+
   /** Chain the item Metadata with our implementation of Metadata at given row index */
   getItemRowMetadata(previousItemMetadata: any) {
     return (rowNumber: number) => {
@@ -71,4 +82,49 @@ export class GridExtraService {
   setSelectedRows(rowIndexes: number[]) {
     this._grid.setSelectedRows(rowIndexes);
   }
+
+  /** Add an item (data item) to the datagrid
+   * @param object dataItem: item object holding all properties of that row
+   */
+  addItemToDatagrid(item) {
+    if (!this._grid || !this._gridOptions || !this._dataView) {
+      throw new Error('We could not find SlickGrid Grid, DataView objects');
+    }
+    if (!this._gridOptions || (!this._gridOptions.enableCheckboxSelector && !this._gridOptions.enableRowSelection)) {
+      throw new Error('addItemToDatagrid() requires to have a valid Slickgrid Selection Model. You can overcome this issue by enabling enableCheckboxSelector or enableRowSelection to True');
+    }
+
+    const row = 0;
+    this._dataView.insertItem(row, item);
+    this.highlightRow(0, 1500);
+
+    // refresh dataview & grid
+    this._dataView.refresh();
+
+    // get new dataset length
+    const datasetLength = this._dataView.getLength();
+  }
+
+  /** Update an existing item with new properties inside the datagrid
+   * @param object item: item object holding all properties of that row
+   */
+  updateDataGridItem(item: any) {
+    const row = this._dataView.getRowById(item.id);
+    const itemId = (!item || !item.hasOwnProperty('id')) ? -1 : item.id;
+    if (itemId === -1) {
+      throw new Error(`Could not find the item in the item in the grid or it's associated "id"`);
+    }
+
+    // Update the item itself inside the dataView
+    this._dataView.updateItem(itemId, item);
+
+    // highlight the row we just updated
+    this.highlightRow(row, 1500);
+
+    // refresh dataview & grid
+    this._dataView.refresh();
+
+    // get new dataset length
+    const datasetLength = this._dataView.getLength();
+  }
 }