Merge pull request #7038 from IgniteUI/nrobakova/columnSelection-input

Add columnSelection input

Author: zdrawku

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 accepts 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="columnSelectable()" 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="columnSelectable() && 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

@@ -40,6 +40,7 @@ import { ISelectionEventArgs, IgxDropDownComponent } from '../../../drop-down';
 import { IgxColumnComponent } from '../../columns/column.component';
 import { IgxGridBaseDirective } from '../../grid-base.directive';
 import { DisplayDensity } from '../../../core/density';
+import { GridSelectionMode } from '../../common/enums';
 
 /**
  * @hidden
@@ -436,13 +437,20 @@ 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 === GridSelectionMode.single);
         } else {
             this.grid.selectionService.deselectColumn(this.column.field);
         }
         this.grid.notifyChanges();
     }
 
+    /**
+     * @hidden @internal
+     */
+    public columnSelectable() {
+        return this.grid.columnSelection !== GridSelectionMode.none && this.column.selectable;
+    }
+
     /**
      * @hidden @internal
      */

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,