(feature): multi click selection

demo/app.component.ts

@@ -56,7 +56,8 @@ import { Component } from '@angular/core';
             <ul>
               <li><a href="#" (click)="state='cell-selection'">Cell</a></li>
               <li><a href="#" (click)="state='single-selection'">Single Row</a></li>
-              <li><a href="#" (click)="state='multi-selection'">Mulit Row</a></li>
+              <li><a href="#" (click)="state='multi-selection'">Multi Row</a></li>
+              <li><a href="#" (click)="state='multi-click-selection'">Multi Click Row</a></li>
               <li><a href="#" (click)="state='multidisable-selection'">Disable Callback</a></li>
               <li><a href="#" (click)="state='chkbox-selection'">Checkbox</a></li>
             </ul>
@@ -111,6 +112,7 @@ import { Component } from '@angular/core';
         <multi-selection-demo *ngIf="state === 'multi-selection'"></multi-selection-demo>
         <multidisable-selection-demo *ngIf="state === 'multidisable-selection'"></multidisable-selection-demo>
         <chkbox-selection-demo *ngIf="state === 'chkbox-selection'"></chkbox-selection-demo>
+        <multi-click-selection-demo *ngIf="state === 'multi-click-selection'"></multi-click-selection-demo>
 
         <!-- Templates -->
         <template-ref-demo *ngIf="state === 'templateref'"></template-ref-demo>

demo/module.ts

@@ -41,6 +41,7 @@ import { MultiSelectionComponent } from './selection/selection-multi';
 import { SingleSelectionComponent } from './selection/selection-single';
 import { MultiDisableSelectionComponent } from './selection/selection-disabled';
 import { CheckboxSelectionComponent } from './selection/selection-chkbox';
+import { MultiClickSelectionComponent } from './selection/selection-multi-click';
 
 // -- Columns
 import { ColumnToggleComponent } from './columns/column-toggle';
@@ -81,7 +82,8 @@ import { ColumnPinningComponent } from './columns/pinning';
     MultiDisableSelectionComponent,
     RxDemoComponent,
     ContextMenuDemoComponent,
-    CheckboxSelectionComponent
+    CheckboxSelectionComponent,
+    MultiClickSelectionComponent
   ],
   imports: [BrowserModule, NgxDatatableModule],
   bootstrap: [AppComponent]

demo/selection/selection-multi-click.ts

@@ -0,0 +1,81 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'multi-click-selection-demo',
+  template: `
+    <div>
+      <h3>Multi Click Selection</h3>
+      <div style='float:left;width:75%'>
+        <div class="info">
+          <p>This demonstrates multi selection table, where any click event causes a selection.</p>
+        </div>
+
+        <ngx-datatable
+          class="material"
+          [rows]="rows"
+          [columnMode]="'force'"
+          [columns]="columns"
+          [headerHeight]="50"
+          [footerHeight]="50"
+          [rowHeight]="'auto'"
+          [limit]="5"
+          [selected]="selected"
+          [selectionType]="'multiClick'"
+          (activate)="onActivate($event)"
+          (select)='onSelect($event)'>
+        </ngx-datatable>
+      </div>
+
+      <div class='selected-column'>
+        <h4>Selections</h4>
+        <ul>
+          <li *ngFor='let sel of selected'>
+            {{sel.name}}
+          </li>
+          <li *ngIf="!selected.length">No Selections</li>
+        </ul>
+      </div>
+    </div>
+  `
+})
+export class MultiClickSelectionComponent {
+
+  rows = [];
+
+  selected = [];
+
+  columns: any[] = [
+    { prop: 'name'} , 
+    { name: 'Company' }, 
+    { name: 'Gender' }
+  ];
+
+  constructor() {
+    this.fetch((data) => {
+      this.rows = data;
+    });
+  }
+
+  fetch(cb) {
+    const req = new XMLHttpRequest();
+    req.open('GET', `assets/data/company.json`);
+
+    req.onload = () => {
+      cb(JSON.parse(req.response));
+    };
+
+    req.send();
+  }
+
+  onSelect({ selected }) {
+    console.log('Select Event', selected, this.selected);
+
+    this.selected.splice(0, this.selected.length);
+    this.selected.push(...selected);
+  }
+
+  onActivate(event) {
+    console.log('Activate Event', event);
+  }
+
+}

demo/selection/selection-multi.ts

@@ -4,8 +4,12 @@ import { Component } from '@angular/core';
   selector: 'multi-selection-demo',
   template: `
     <div>
-      <h3>Multi Select via Click</h3>
+      <h3>Multi Select</h3>
       <div style='float:left;width:75%'>
+        <div class="info">
+          <p>This demonstrates multi selection table, use CTRL or SHIFT click to select multiple items.</p>
+        </div>
+
         <ngx-datatable
           class="material"
           [rows]="rows"

docs/changelog.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 4.1.0
+- Feature: Adding multi-click selection
+- Bug: Use tracking fn vs inline (#388)
+- Bug: Fix AoT header issue (#389)
+- Bug: Fix `reorderable` not being honored (#387)
+- Bug: Fix multi-select CTRL not working (#381)
+- Chore: Upgrade Angular to ^2.4.1
+- Docs: Multi-select
+
 ## 4.0.0
 - BREAKING!!!! - Renamed project from `angular2-datatable` to `ngx-datatable` 
 and updated components from `<swui-datatable>` to `<ngx-datatable>`

src/components/body/selection.component.ts

@@ -36,28 +36,27 @@ export class DataTableSelectionComponent {
 
     const chkbox = this.selectionType === SelectionType.checkbox;
     const multi = this.selectionType === SelectionType.multi;
+    const multiClick = this.selectionType == SelectionType.multiClick;
     let selected: any[] = [];
 
-    if (multi || chkbox) {
+    if (multi || chkbox || multiClick) {
       if (event.shiftKey) {
-        const newSelected = [...this.selected];
         selected = selectRowsBetween(
-          newSelected, 
+          [...this.selected], 
           this.rows, 
           index, 
           this.prevIndex, 
           this.getRowSelectedIdx.bind(this));
-      } else if (!event.shiftKey) {
-        selected.push(row);
+      } else if (event.ctrlKey || multiClick || chkbox) {
+          selected = selectRows([...this.selected], row, this.getRowSelectedIdx.bind(this));
       } else {
-        const newSelected = [...this.selected];
-        selected = selectRows(newSelected, row, this.getRowSelectedIdx.bind(this));
+        selected = selectRows([], row, this.getRowSelectedIdx.bind(this));
       }
     } else {
-      selected.push(row);
+      selected = selectRows([], row, this.getRowSelectedIdx.bind(this));
     }
 
-    if(this.selectCheck) {
+    if(typeof this.selectCheck === 'function') {
       selected = selected.filter(this.selectCheck.bind(this));
     }
 

src/components/datatable.component.ts

@@ -27,6 +27,7 @@ import { scrollbarWidth, setColumnDefaults, throttleable, translateTemplates } f
         [offsetX]="offsetX"
         [columns]="columns"
         [headerHeight]="headerHeight"
+        [reorderable]="reorderable"
         [sortAscendingIcon]="cssClasses.sortAscending"
         [sortDescendingIcon]="cssClasses.sortDescending"
         [allRowsSelected]="allRowsSelected"
@@ -284,7 +285,8 @@ export class DatatableComponent implements OnInit, AfterViewInit, DoCheck {
    * 
    *  - `single`
    *  - `multi`
-   *  - `chkbox`. 
+   *  - `chkbox`
+   *  - `multiClick`
    * 
    * For no selection pass a `falsey`. 
    * Default value: `undefined`
@@ -576,6 +578,18 @@ export class DatatableComponent implements OnInit, AfterViewInit, DoCheck {
     return this.selectionType === SelectionType.multi;
   }
 
+  /**
+   * CSS class added to root element if mulit click select
+   * 
+   * @readonly
+   * @type {boolean}
+   * @memberOf DatatableComponent
+   */
+  @HostBinding('class.multi-click-selection')
+  get isMultiClickSelection(): boolean {
+    return this.selectionType === SelectionType.multiClick;
+  }
+
   /**
    * Column templates gathered from `ContentChildren`
    * if described in your markup.

src/themes/material.scss

@@ -11,7 +11,8 @@
 	}
 
   &.single-selection,
-  &.multi-selection {
+  &.multi-selection,
+  &.multi-click-selection {
     .datatable-body-row {
 			&.active,
 			&.active .datatable-row-group {

src/types/selection.type.ts

@@ -1,6 +1,7 @@
 export enum SelectionType {
   single = 'single' as any,
   multi = 'multi' as any,
+  multiClick = 'multiClick' as any,
   cell = 'cell' as any,
   checkbox = 'checkbox' as any
 }

src/utils/selection.ts

@@ -10,7 +10,13 @@ export function selectRows(selected: any[], row: any, comparefn: Function) {
   return selected;
 }
 
-export function selectRowsBetween(selected: any[], rows: any[], index: number, prevIndex: number, comparefn: Function) {
+export function selectRowsBetween(
+  selected: any[], 
+  rows: any[], 
+  index: number, 
+  prevIndex: number, 
+  comparefn: Function): any[] {
+
   const reverse = index < prevIndex;
 
   for(let i = 0, len = rows.length; i < len; i++) {
@@ -43,7 +49,7 @@ export function selectRowsBetween(selected: any[], rows: any[], index: number, p
 
       // if in the positive range to be added to `selected`, and
       // not already in the selected array, add it
-      if( i >= range.start && i < range.end) {
+      if(i >= range.start && i < range.end) {
         if (idx === -1) {
           selected.push(row);
         }