feat(igx-grid): Copy into clipboard behavior

Closes #4907

Author: rkaraivanov

projects/igniteui-angular/src/lib/core/grid-selection.ts

@@ -524,13 +524,4 @@ export class IgxGridSelectionService {
             selection.addRange(this._selectionRange || document.createRange());
         }
     }
-
-    _moveSelectionChrome(node: Node) {
-        const selection = window.getSelection();
-        selection.removeAllRanges();
-        const range = new Range();
-        range.selectNode(node);
-        range.collapse(true);
-        selection.addRange(range);
-    }
 }

projects/igniteui-angular/src/lib/grids/grid-base.component.ts

@@ -23,12 +23,13 @@ import {
     ViewChildren,
     ViewContainerRef,
     InjectionToken,
-    Optional
+    Optional,
+    HostListener
 } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil, first, filter } from 'rxjs/operators';
 import { IgxSelectionAPIService } from '../core/selection';
-import { cloneArray, isEdge, isNavigationKey, CancelableEventArgs, flatten, mergeObjects } from '../core/utils';
+import { cloneArray, isEdge, isNavigationKey, CancelableEventArgs, flatten, mergeObjects, isIE } from '../core/utils';
 import { DataType } from '../data-operations/data-util';
 import { FilteringLogic, IFilteringExpression } from '../data-operations/filtering-expression.interface';
 import { IGroupByRecord } from '../data-operations/groupby-record.interface';
@@ -89,6 +90,7 @@ import { IgxGridFilteringRowComponent } from './filtering/grid-filtering-row.com
 import { IgxDragIndicatorIconDirective } from './row-drag.directive';
 import { IgxDragDirective } from '../directives/dragdrop/dragdrop.directive';
 import { DeprecateProperty } from '../core/deprecateDecorators';
+import { CharSeparatedValueData } from '../services/csv/char-separated-value-data';
 
 const MINIMUM_COLUMN_WIDTH = 136;
 const FILTER_ROW_HEIGHT = 50;
@@ -102,6 +104,12 @@ const MIN_ROW_EDITING_COUNT_THRESHOLD = 2;
 
 export const IgxGridTransaction = new InjectionToken<string>('IgxGridTransaction');
 
+export interface IGridClipboardEvent {
+    type: string;
+    data: any[];
+    cancel: boolean;
+}
+
 export interface IGridCellEventArgs {
     cell: IgxGridCellComponent;
     event: Event;
@@ -1535,6 +1543,12 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     @Output()
     public onRowDragEnd = new EventEmitter<IRowDragEndEventArgs>();
 
+    /**
+     * TODO: Write doc
+     */
+    @Output()
+    onGridCopy = new EventEmitter<IGridClipboardEvent>();
+
     /**
      * @hidden
      */
@@ -2313,6 +2327,16 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         }
     }
 
+    /**
+     * TODO: Write doc
+     */
+    @Input()
+    clipboardOptions = {
+        enabled: true,
+        copyHeaders: true,
+        separator: '\t'
+    };
+
     /**
      * @hidden
      */
@@ -2577,6 +2601,9 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
 
     private keydownHandler(event) {
         const key = event.key.toLowerCase();
+        if (event.ctrlKey && key === 'c' && this.clipboardOptions.enabled) {
+            isIE() ? this.copyHandler(null, true) : this.document.execCommand('copy');
+        }
         if ((isNavigationKey(key) && event.keyCode !== 32) || key === 'tab' || key === 'pagedown' || key === 'pageup') {
             event.preventDefault();
             if (key === 'pagedown') {
@@ -4854,6 +4881,39 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         event.target.scrollTop = 0;
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    @HostListener('copy', ['$event'])
+    public copyHandler(event, ie11 = false) {
+        if (!this.clipboardOptions.enabled) {
+            return;
+        }
+        const data = this.getSelectedData();
+        const ev = { type: 'copy', data, cancel: false } as IGridClipboardEvent;
+        this.onGridCopy.emit(ev);
+
+        if (ev.cancel) {
+             return;
+        }
+
+        const transformer = new CharSeparatedValueData(ev.data, this.clipboardOptions.separator);
+        let result = transformer.prepareData();
+
+        if (!this.clipboardOptions.copyHeaders) {
+            result = result.substring(result.indexOf('\n') + 1);
+        }
+
+        if (ie11) {
+            (window as any).clipboardData.setData('Text', result);
+            return;
+        }
+
+        event.preventDefault();
+        event.clipboardData.setData('text/plain', result);
+    }
+
     /**
      * This method allows you to navigate to a position
      * in the grid based on provided `rowindex` and `visibleColumnIndex`,

src/app/app.component.ts

@@ -143,6 +143,11 @@ export class AppComponent implements OnInit {
             icon: 'view_column',
             name: 'Grid Cell Editing'
         },
+        {
+            link: '/gridClipboard',
+            icon: 'insert_comment',
+            name: 'Grid Clipboard Interaction'
+        },
         {
             link: '/gridColumnGroups',
             icon: 'view_column',

src/app/app.module.ts

@@ -5,7 +5,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NgModule } from '@angular/core';
 import {
     IgxIconModule, IgxGridModule, IgxExcelExporterService, IgxCsvExporterService, IgxOverlayService,
-    IgxGridTransaction, IgxTransactionService, IgxTreeGridModule,  IgxHierarchicalGridModule, IgxInputGroupModule} from 'igniteui-angular';
+    IgxGridTransaction, IgxTransactionService, IgxTreeGridModule,  IgxHierarchicalGridModule, IgxInputGroupModule, IgxIconService} from 'igniteui-angular';
 import { IgxColumnHidingModule } from 'igniteui-angular';
 import { SharedModule } from './shared/shared.module';
 import { IgxDragDropModule } from '../../projects/igniteui-angular/src/lib/directives/dragdrop/dragdrop.directive';
@@ -105,6 +105,7 @@ import { TreeGridLoadOnDemandSampleComponent } from './tree-grid-load-on-demand/
 import { GridFilterTemplateSampleComponent } from './grid-filter-template/grid-filter-template.sample';
 import { GridMRLConfigSampleComponent } from './grid-multi-row-layout-config/grid-mrl-config.sample';
 import { GridMRLCustomNavigationSampleComponent } from './grid-mrl-custom-navigation/grid-mrl-custom-navigation';
+import { GridClipboardSampleComponent } from './grid-clipboard/grid-clipboard.sample';
 
 
 
@@ -202,7 +203,8 @@ const components = [
     CalendarViewsSampleComponent,
     GridSearchBoxComponent,
     GridSearchComponent,
-    GridFilterTemplateSampleComponent
+    GridFilterTemplateSampleComponent,
+    GridClipboardSampleComponent
 ];
 
 @NgModule({
@@ -228,6 +230,7 @@ const components = [
         LocalService,
         RemoteService,
         IgxExcelExporterService,
+        IgxIconService,
         IgxCsvExporterService,
         IgxOverlayService,
         { provide: DisplayDensityToken, useFactory: () => ({ displayDensity: DisplayDensity.comfortable }) }

src/app/grid-clipboard/grid-clipboard.sample.html

@@ -0,0 +1,36 @@
+<div class="wrapper">
+    <app-page-header title="Grid copy interaction"></app-page-header>
+
+    <div class="sample-content">
+        <div class="sample-column">
+            <div style="margin-bottom: 1rem">
+                <igx-input-group type="box">
+                    <label igxLabel>Change copy separator</label>
+                    <input type="text" igxInput [(ngModel)]="options.separator" />
+                    <igx-suffix (pointerup)="options.separator = '\t'"><igx-icon>clear</igx-icon></igx-suffix>
+                    <igx-hint>
+                        The default value is a single tabulation which of course is shown as whitespace above.
+                        Click the clear icon to reset it back to tabulation.
+                    </igx-hint>
+                </igx-input-group>
+                <div style="margin: 0 0.5rem" igxLayout igxLayoutJustify="space-between">
+                    <igx-switch [(ngModel)]="options.enabled">Toggle grid copy behavior</igx-switch>
+                    <igx-switch [(ngModel)]="options.copyHeaders">Toggle copying of header labels</igx-switch>
+                    <button (click)="grid.clearCellSelection()" igxButton="outlined">Clear grid selection</button>
+                </div>
+            </div>
+
+
+            <div style="width: 50wh; height: 50vh">
+                <igx-grid #grid [data]="data" [clipboardOptions]="options" [autoGenerate]="true"></igx-grid>
+            </div>
+
+            <div style="margin-top: 0.5rem">
+                <igx-input-group type="box">
+                    <label igxLabel>Paste your data here (or in Excel)</label>
+                    <textarea igxInput cols="30" rows="10"></textarea>
+                </igx-input-group>
+            </div>
+        </div>
+    </div>
+</div>

src/app/grid-clipboard/grid-clipboard.sample.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { SAMPLE_DATA } from '../shared/sample-data';
+
+@Component({
+    selector: 'app-grid-clipboard-sample',
+    templateUrl: './grid-clipboard.sample.html'
+})
+export class GridClipboardSampleComponent {
+
+    data: any[];
+
+    options = {
+        enabled: true,
+        copyHeaders: true,
+        separator: '\t'
+    };
+
+    constructor() {
+        this.data = SAMPLE_DATA.slice(0);
+    }
+}