feat(example): add Bootstrap Dropdown Action demo, closes #304

Author: ghiscoding-SE

src/app/app.module.ts

@@ -10,6 +10,7 @@ import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-transla
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
 import { AppComponent } from './app.component';
+import { CustomActionFormatterComponent } from './examples/custom-actionFormatter.component';
 import { CustomTitleFormatterComponent } from './examples/custom-titleFormatter.component';
 import { EditorNgSelectComponent } from './examples/editor-ng-select.component';
 import { FilterNgSelectComponent } from './examples/filter-ng-select.component';
@@ -77,6 +78,7 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj
 @NgModule({
   declarations: [
     AppComponent,
+    CustomActionFormatterComponent,
     CustomTitleFormatterComponent,
     EditorNgSelectComponent,
     FilterNgSelectComponent,
@@ -137,6 +139,7 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj
   ],
   entryComponents: [
     // dynamically created components
+    CustomActionFormatterComponent,
     CustomTitleFormatterComponent,
     EditorNgSelectComponent,
     FilterNgSelectComponent,

src/app/examples/custom-actionFormatter.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  template: `<div id="myDrop" class="dropdown" style="position:absolute; z-index:12000;">
+  <button class="btn btn-default btn-xs dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    Action
+    <span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
+      <li><a class="pointer" (click)="parent.deleteCell(row)">Delete Row</a></li>
+    </ul></div>`
+})
+export class CustomActionFormatterComponent {
+  parent: any;
+}

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

@@ -48,6 +48,7 @@ <h2>{{title}}</h2>
                        (sgOnCellChange)="onCellChanged($event.detail.eventData, $event.detail.args)"
                        (sgOnClick)="onCellClicked($event.detail.eventData, $event.detail.args)"
                        (sgOnValidationError)="onCellValidation($event.detail.eventData, $event.detail.args)"
+                       (sgOnActiveCellChanged)="onActiveCellChanged($event.detail.eventData, $event.detail.args)"
                        [columnDefinitions]="columnDefinitions" [gridOptions]="gridOptions" [dataset]="dataset">
     </angular-slickgrid>
   </div>

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

@@ -7,11 +7,13 @@ import {
   Editors,
   FieldType,
   Filters,
+  Formatter,
   Formatters,
   GridOption,
   OnEventArgs,
 } from './../modules/angular-slickgrid';
 import { EditorNgSelectComponent } from './editor-ng-select.component';
+import { CustomActionFormatterComponent } from './custom-actionFormatter.component';
 import { CustomAngularComponentEditor } from './custom-angularComponentEditor';
 import { CustomAngularComponentFilter } from './custom-angularComponentFilter';
 import { CustomTitleFormatterComponent } from './custom-titleFormatter.component';
@@ -23,6 +25,17 @@ declare var $: any;
 
 const NB_ITEMS = 100;
 
+const customActionFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: any) => {
+  // use the same button text "Action" as the "CustomActionFormatterComponent" button text
+  // we basically recreate a dropdown on top of this one here which is just an empty one to show something in the grid
+  return `<div id="myDrop-r${row}-c${cell}" class="dropdown">
+    <button class="btn btn-default btn-xs dropdown-toggle" type="button">
+      Action
+      <span class="caret"></span>
+    </button>
+  </div>`;
+};
+
 @Component({
   templateUrl: './grid-angular.component.html',
   styleUrls: ['./grid-angular.component.scss'],
@@ -218,7 +231,8 @@ export class GridAngularComponent implements OnInit {
         editor: {
           model: Editors.date
         },
-      }
+      },
+      { id: 'action', name: 'Action', field: 'id', formatter: customActionFormatter, width: 70 }
     ];
 
     this.gridOptions = {
@@ -329,8 +343,46 @@ export class GridAngularComponent implements OnInit {
       const componentOutput = this.angularUtilService.createAngularComponent(colDef.params.component);
       Object.assign(componentOutput.componentRef.instance, { item: dataContext });
 
-      // use a delay to make sure Angular ran at least a full cycle and it finished rendering the Component
+      // use a delay to make sure Angular ran at least a full cycle and make sure it finished rendering the Component
       setTimeout(() => $(cellNode).empty().html(componentOutput.domElement));
     }
   }
+
+  /* Create an Action Dropdown Menu */
+  deleteCell(rowNumber: number) {
+    const item = this.angularGrid.dataView.getItem(rowNumber);
+    this.angularGrid.gridService.deleteItemById(item.id);
+  }
+
+  onActiveCellChanged(event, args) {
+    if (args.cell !== 6) {
+      return; // don't do anything unless it's the Action column which is at position 6 in this grid
+    }
+
+    $('#myDrop').remove(); // make sure to remove previous Action dropdown, you don't want to have 100 after a 100 clicks...
+    const cell = args.cell;
+    const row = args.row;
+
+    // hide the dropdown we created as a Formatter, we'll redisplay it later
+    const cellPos = $(`#myDrop-r${row}-c${cell}`).offset();
+
+    const componentOutput = this.angularUtilService.createAngularComponent(CustomActionFormatterComponent);
+
+    // pass "this" and the row number to the Component instance (CustomActionFormatter) so that we can call "parent.deleteCell(row)" with (click)
+    Object.assign(componentOutput.componentRef.instance, { parent: this, row: args.row });
+
+    // use a delay to make sure Angular ran at least a full cycle and make sure it finished rendering the Component before using it
+    setTimeout(() => {
+      const elm = $(componentOutput.domElement);
+      elm.appendTo('body');
+      elm.css('position', 'absolute');
+      elm.css('top', cellPos.top + 5);
+      elm.css('left', cellPos.left);
+      $('#myDrop').addClass('open');
+
+      $('#myDrop').on('hidden.bs.dropdown', () => {
+        $(`#myDrop-r${row}-c${cell}`).show();
+      });
+    });
+  }
 }