Add multi-select plugin & checkbox selector plugin

Author: Ghislain Beaulac

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

@@ -127,7 +127,6 @@ export class GridEditorComponent implements OnInit {
         }
       }
     });
-
   }
   dataviewReady(dataview) {
     this.dataviewObj = dataview;

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

@@ -1,10 +1,12 @@
 import { Component, OnInit } from '@angular/core';
-import { Formatters } from './../modules/angular-slickgrid';
-import { Column, FieldType, Formatter, GridOption } from './../modules/angular-slickgrid/models';
+import { Column, FieldType, Formatter, Formatters, GridExtraService, GridOption } from './../modules/angular-slickgrid';
 
 // create my custom Formatter with the Formatter type
-const myCustomCheckboxFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any) =>
+const myCustomCheckmarkFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any) =>
   value ? `<i class="fa fa-fire" aria-hidden="true"></i>` : '<i class="fa fa-snowflake-o" aria-hidden="true"></i>';
+const customCheckboxFormatter: Formatter = (row, cell, value, columnDef, dataContext) => {
+  return `<span class="fa fa-check selector-checkbox pointer"></span>`;
+};
 
 @Component({
   templateUrl: './grid-formatter.component.html'
@@ -19,6 +21,8 @@ export class GridFormatterComponent implements OnInit {
   gridOptions: GridOption;
   dataset: any[];
 
+  constructor(private gridExtraService: GridExtraService) {}
+
   ngOnInit(): void {
     this.columnDefinitions = [
       {id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string},
@@ -27,14 +31,16 @@ export class GridFormatterComponent implements OnInit {
       {id: 'percent2', name: '% Complete', field: 'percentComplete2', formatter: Formatters.progressBar, type: FieldType.number, sortable: true},
       {id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.dateIso },
       {id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, sortable: true, type: FieldType.date },
-      {id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: myCustomCheckboxFormatter, type: FieldType.number, sortable: true}
+      {id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: myCustomCheckmarkFormatter, type: FieldType.number, sortable: true}
     ];
     this.gridOptions = {
       autoResize: {
         containerId: 'demo-container',
         sidePadding: 15
       },
-      enableCellNavigation: false
+      enableCellNavigation: false,
+      enableCheckboxSelector: true,
+      enableMultiSelect: false
     };
 
     // mock a dataset

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

@@ -99,8 +99,8 @@ export class AngularSlickgridComponent implements AfterViewInit, OnInit {
     this._gridOptions = this.mergeGridOptions();
 
     this._dataView = new Slick.Data.DataView();
+    this.controlAndPluginService.createPluginBeforeGridCreation(this.columnDefinitions, this._gridOptions);
     this.grid = new Slick.Grid(`#${this.gridId}`, this._dataView, this.columnDefinitions, this._gridOptions);
-    this.grid.setSelectionModel(new Slick.RowSelectionModel());
 
     this.controlAndPluginService.attachDifferentControlOrPlugins(this.grid, this.columnDefinitions, this._gridOptions, this._dataView);
     this.attachDifferentHooks(this.grid, this._gridOptions, this._dataView);

src/app/modules/angular-slickgrid/global-grid-options.ts

@@ -14,6 +14,9 @@ export const GlobalGridOptions: GridOption = {
     sidePadding: 0
   },
   cellHighlightCssClass: 'slick-cell-modified',
+  checkboxSelector: {
+    cssClass: 'slick-cell-checkboxsel'
+  },
   editable: false,
   enableAutoResize: true,
   enableCellNavigation: false,

src/app/modules/angular-slickgrid/models/checkboxSelector.interface.ts

@@ -0,0 +1,6 @@
+export interface CheckboxSelector {
+  columnId?: string;
+  cssClass?: string;
+  toolTip?: string;
+  width?: number;
+}

src/app/modules/angular-slickgrid/models/gridOption.interface.ts

@@ -1,5 +1,6 @@
 import { AutoResizeOption } from './autoResizeOption.interface';
 import { BackendEventChanged } from './backendEventChanged.interface';
+import { CheckboxSelector } from './checkboxSelector.interface';
 import { GridMenu } from './gridMenu.interface';
 import { HeaderButton } from './headerButton.interface';
 import { HeaderMenu } from './headerMenu.interface';
@@ -18,18 +19,21 @@ export interface GridOption {
     maxToolTipLength: number;
   };
   cellHighlightCssClass?: string | null;
+  checkboxSelector?: CheckboxSelector;
   editable?: boolean;
   enableAsyncPostRender?: boolean;
   enableAutoResize?: boolean;
   enableAutoTooltip?: boolean;
   enableCellNavigation?: boolean;
+  enableCheckboxSelector?: boolean;
   enableColumnPicker?: boolean;
   enableColumnReorder?: boolean;
   enableFiltering?: boolean;
   enableGridMenu?: boolean;
   enableHeaderButton?: boolean;
   enableHeaderMenu?: boolean;
   enableMouseHoverHighlightRow?: boolean;
+  enableMultiSelect?: boolean;
   enablePagination?: boolean;
   enableRowSelection?: boolean;
   enableSorting?: boolean;

src/app/modules/angular-slickgrid/models/index.ts

@@ -4,6 +4,7 @@ export { BackendEventChanged } from './backendEventChanged.interface';
 export { BackendServiceOption } from './backendServiceOption.interface';
 export { CaseType } from './caseType';
 export { CellArgs } from './cellArgs.interface';
+export { CheckboxSelector } from './checkboxSelector.interface';
 export { Column } from './column.interface';
 export { ColumnFilter } from './columnFilter.interface';
 export { ColumnFilters } from './columnFilters.interface';

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

@@ -1,10 +1,14 @@
 import { Injectable } from '@angular/core';
 import { Router, NavigationEnd, NavigationStart } from '@angular/router';
 import { FilterService } from './filter.service';
+import { GridExtraUtils } from './gridExtraUtils';
+import { GridExtraService } from './gridExtra.service';
 import {
   CellArgs,
+  CheckboxSelector,
   CustomGridMenu,
   Column,
+  Formatter,
   GridOption,
   HeaderButtonOnCommandArgs,
   HeaderMenuOnCommandArgs,
@@ -22,19 +26,51 @@ export class ControlAndPluginService {
 
   // controls & plugins
   autoTooltipPlugin;
+  checkboxSelectorPlugin: any;
   columnPickerControl;
   headerButtonsPlugin;
   headerMenuPlugin;
   gridMenuControl;
   rowSelectionPlugin;
 
-  constructor(private filterService: FilterService, private router: Router) {}
+  constructor(private filterService: FilterService, private gridExtraService: GridExtraService, private router: Router) {}
 
+  /**
+   * Attach/Create different Controls or Plugins after the Grid is created
+   * @param {any} grid
+   * @param {Column[]} columnDefinitions
+   * @param {GridOptions} options
+   * @param {any} dataView
+   */
   attachDifferentControlOrPlugins(grid: any, columnDefinitions: Column[], options: GridOption, dataView: any) {
     this._visibleColumns = columnDefinitions;
     this._dataView = dataView;
     this._grid = grid;
 
+    if (options.enableMultiSelect) {
+      // when enabling the multi-select, we need to also watch onClick events to perform certain actions
+      // the selector column has to be create BEFORE the grid (else it behaves oddly), but we can only watch grid events AFTER the grid is created
+      grid.onClick.subscribe((e, args) => {
+        const column = GridExtraUtils.getColumnDefinitionAndData(args);
+        console.log('onClick', args, column);
+        if (column.columnDef.id === 'multiSelectSelector') {
+          const selectedRows = this.gridExtraService.getSelectedRows();
+          const selectedRowIndex = selectedRows.findIndex((rowNumber) => rowNumber === args.row);
+
+          if (selectedRowIndex >= 0) {
+            selectedRows.splice(selectedRowIndex, 1);
+          } else {
+            selectedRows.push(args.row);
+          }
+          this.gridExtraService.setSelectedRows(selectedRows);
+        }
+      });
+
+      // this also requires the Row Selection Model to be registered as well
+      this.rowSelectionPlugin = new Slick.RowSelectionModel(options.rowSelectionOptions || {});
+      grid.setSelectionModel(this.rowSelectionPlugin);
+    }
+
     if (options.enableColumnPicker) {
       this.columnPickerControl = new Slick.Controls.ColumnPicker(columnDefinitions, grid, options);
     }
@@ -64,6 +100,16 @@ export class ControlAndPluginService {
       this.autoTooltipPlugin = new Slick.AutoTooltips(options.autoTooltipOptions || {});
       grid.registerPlugin(this.autoTooltipPlugin);
     }
+
+    if (options.enableCheckboxSelector) {
+      // when enabling the Checkbox Selector Plugin, we need to also watch onClick events to perform certain actions
+      // the selector column has to be create BEFORE the grid (else it behaves oddly), but we can only watch grid events AFTER the grid is created
+      grid.registerPlugin(this.checkboxSelectorPlugin);
+
+      // this also requires the Row Selection Model to be registered as well
+      this.rowSelectionPlugin = new Slick.RowSelectionModel(options.rowSelectionOptions || {});
+      grid.setSelectionModel(this.rowSelectionPlugin);
+    }
     if (options.enableRowSelection) {
       this.rowSelectionPlugin = new Slick.RowSelectionModel(options.rowSelectionOptions || {});
       grid.setSelectionModel(this.rowSelectionPlugin);
@@ -183,4 +229,33 @@ export class ControlAndPluginService {
 
     // options.gridMenu.resizeOnShowHeaderRow = options.showHeaderRow;
   }
+
+  /**
+   * Attach/Create different plugins before the Grid creation.
+   * For example the multi-select have to be added to the column definition before the grid is created to work properly
+   * @param {Column[]} columnDefinitions
+   * @param {GridOptions} options
+   */
+  createPluginBeforeGridCreation(columnDefinitions: Column[], options: GridOption) {
+    if (options.enableCheckboxSelector) {
+      this.checkboxSelectorPlugin = new Slick.CheckboxSelectColumn(options.checkboxSelector || {});
+      columnDefinitions.unshift(this.checkboxSelectorPlugin.getColumnDefinition());
+    }
+
+    if (options.enableMultiSelect) {
+      const customCheckboxFormatter: Formatter = (row, cell, value, columnDef, dataContext) => {
+        return `<span class="fa fa-check selector-checkbox pointer"></span>`;
+      };
+      const columnSelector: Column = {
+        id: 'multiSelectSelector',
+        name: '<span id="selector-all-btn" class="fa fa-check selector-checkbox pointer"></span>',
+        field: '', formatter: customCheckboxFormatter, minWidth: 35,  width: 35, maxWidth: 35,
+        cssClass: 'slick-selector'
+      };
+
+      // const columnSelector;
+      columnDefinitions.unshift(columnSelector);
+    }
+  }
 }
+

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

@@ -62,6 +62,9 @@ export class GridExtraService {
     }, fadeDelay + 10);
   }
 
+  getSelectedRows() {
+    return this._grid.getSelectedRows();
+  }
   setSelectedRow(rowIndex: number) {
     this._grid.setSelectedRows([rowIndex]);
   }

src/app/modules/angular-slickgrid/styles/_variables.scss

@@ -7,7 +7,8 @@
 /* SlickGrid Bootstrap variables */
 /* Used by slick-bootstrap.scss */
 $border-color:                          #dddddd !default;
-$font-size-base:          			        14px !default;
+$font-size-base-value:                  14 !default;
+$font-size-base:          			        $font-size-base-value + 0px !default;
 $font-family:                           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
 
 /* Slickgrid container, including headers but excluding pagination */
@@ -43,6 +44,8 @@ $row-highlight-background-color:        rgba(212, 203, 156, 0.774) !default;
 $row-highlight-fade-animation:          2s ease-in 1 !default;
 $row-mouse-hover-color:                 rgb(245, 245, 204) !default;
 $row-selected-color:                    #e2e2c5 !default;
+$row-checkbox-selector-background:      inherit !default;
+$row-checkbox-selector-border:          none !default;
 
 /* header */
 $header-input-height:                   27px !default;                        // height of the filter form element (input, textarea, select)
@@ -122,3 +125,6 @@ $pagination-border-right:               0 none !default;
 $pagination-border-bottom:              0 none !default;
 $pagination-border-left:                0 none !default;
 $pagination-text-color:                 #808080 !default;
+
+/* selector plugin */
+$selector-border-right:                 1px solid rgb(196, 196, 196) !default;