feat(grid): add columnSelection input #7001

Author: nrobakova

CHANGELOG.md

@@ -33,6 +33,7 @@ All notable changes for each version of this project will be documented in this
     public pinningConfiguration: IPinningConfig = { columns: ColumnPinningPosition.End };
     ```
     - Added functionality for column selection.
+     - `columnSelection` property has been added. It accept GridSelection mode enumeration. Grid selection mode could be none, single or multiple.
     - `selected` property has been added to the IgxColumnComponent; Allows you to set whether the column is selected.
     - `selectable` property has been added to the IgxColumnComponent; Allows you to set whether the column is selectable.
     - `onColumnSelectionChange` event is added for the `IgxGrid`. It is emitted when the column selection is changed.

projects/igniteui-angular/src/lib/grids/README.md

@@ -211,6 +211,7 @@ Below is the list of all inputs that the developers may set to configure the gri
 |`locale`| string | Determines the locale of the grid. Default value is `en`. |
 | `isLoading` | bool | Sets if the grid is waiting for data - default value false. |
 | `rowDraggable` | bool | Sets if the grid rows can be dragged |
+| `columnSelection` | GridSelectionMode | Sets if the grid columns can be selected |
 
 ### Outputs
 

projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.html

@@ -68,7 +68,7 @@
     <header class="igx-excel-filter__menu-header">
         <h4>{{ column.header || column.field }}</h4>
         <div *ngIf="grid.displayDensity!=='comfortable'" class="igx-excel-filter__menu-header-actions">
-            <button *ngIf="column.selectable" igxButton="icon"
+            <button *ngIf="grid.columnSelection !== 'none' && column.selectable" igxButton="icon"
             [displayDensity]="grid.displayDensity" (click)="onSelect()"
             tabindex="0" [ngClass]='selectedClass()'>
              <igx-icon fontSet="material">done</igx-icon>
@@ -108,7 +108,7 @@ <h4>{{ column.header || column.field }}</h4>
             <ng-container *ngTemplateOutlet="movingTemplate"></ng-container>
         </div>
 
-        <div *ngIf="column.selectable && grid.displayDensity==='comfortable'">
+        <div *ngIf="grid.columnSelection !== 'none' && column.selectable && grid.displayDensity==='comfortable'">
             <ng-container *ngTemplateOutlet="selectingTemplate"></ng-container>
         </div>
 

projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts

@@ -436,7 +436,7 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
      */
     public onSelect() {
         if (!this.column.selected) {
-            this.grid.selectionService.selectColumn(this.column.field);
+            this.grid.selectionService.selectColumn(this.column.field, this.grid.columnSelection === 'single');
         } else {
             this.grid.selectionService.deselectColumn(this.column.field);
         }

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

@@ -2335,6 +2335,26 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         }
     }
 
+    /**
+     * Gets/Sets column selection mode
+     * @remarks
+     * By default the row selection mode is none
+     * @param selectionMode: GridSelectionMode
+     */
+    @WatchChanges()
+    @Input()
+    get columnSelection() {
+        return this._columnSelectionMode;
+    }
+
+    set columnSelection(selectionMode: GridSelectionMode) {
+        this._columnSelectionMode = selectionMode;
+        if (this.gridAPI.grid) {
+            this.selectionService.clearAllSelectedColumns();
+            this.notifyChanges(true);
+        }
+    }
+
     /**
      * @hidden @internal
      */
@@ -2542,6 +2562,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     private _summaryCalculationMode = GridSummaryCalculationMode.rootAndChildLevels;
     private _cellSelectionMode = GridSelectionMode.multiple;
     private _rowSelectionMode = GridSelectionMode.none;
+    private _columnSelectionMode = GridSelectionMode.none;
 
     private rowEditPositioningStrategy = new RowEditPositionStrategy({
         horizontalDirection: HorizontalAlignment.Right,