Merge pull request #6831 from IgniteUI/nrobakova/column-selection

Column selection

Author: zdrawku

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes for each version of this project will be documented in this
 
 ## 9.1.0
 
+### General
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - **Behavioral Change** - When a column is sortable sort indicator is always visible. The column is sorted when click on it.
+
 ### Themes
 - **Breaking Change**  Change the default `$legacy-support` value to false in the `igx-theme` function.
 
@@ -17,14 +21,25 @@ All notable changes for each version of this project will be documented in this
     ```typescript
     public pinningConfiguration: IPinningConfig = { columns: ColumnPinningPosition.End };
     ```
+    - Added functionality for column selection.
+    - `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.
+    - `excelStyleSelectingTemplate` property is introduced to IgxGrid, which allows you to set a custom template for the selecting a column in the Excel Style Filter.
+    - `selectedColumns` API method is added for the `IgxGrid`. It allows to get all selected columns.
+    - `selectColumns` API method is added for the `IgxGrid`. It allows to select columns by passing array of IgxColumnComponent or column fields.
+    - `deselectColumns` API method is added for the `IgxGrid`. It allows to deselect columns by passing array of IgxColumnComponent or column fields.
+    - `deselectAllColumns` API method is added for the `IgxGrid`. It allows to deselect all columns.
+    - `getSelectedColumnsData` API method is added for the `IgxGrid`. It allows to get the selected columns data.
+
 - `IgxCombo`:
     - Added `autoFocusSearch` input that allows to manipulate the combo's opening behavior. When the property is `true` (by default), the combo's search input is focused on open. When set to `false`, the focus goes to the combo items container, which can be used to prevent the software keyboard from activating on mobile devices when opening the combo.
 
 ### RTL Support
 - `igxSlider` have full right-to-left (RTL) support.
 
 ## 9.0.1
-- **Breaking Changes** 
+- **Breaking Changes**
     - Remove `$base-color` from igx-typography. The igx-typography class now inherits the parent color.
 
 ## 9.0.0

projects/igniteui-angular/src/lib/core/i18n/grid-resources.ts

@@ -69,6 +69,7 @@ export interface IGridResourceStrings {
     igx_grid_excel_show?: string;
     igx_grid_excel_pin?: string;
     igx_grid_excel_unpin?: string;
+    igx_grid_excel_select?: string;
     igx_grid_excel_text_filter?: string;
     igx_grid_excel_number_filter?: string;
     igx_grid_excel_date_filter?: string;
@@ -162,6 +163,7 @@ export const GridResourceStringsEN: IGridResourceStrings = {
     igx_grid_excel_show: 'Show column',
     igx_grid_excel_pin: 'Pin column',
     igx_grid_excel_unpin: 'Unpin column',
+    igx_grid_excel_select: 'Select column',
     igx_grid_excel_text_filter: 'Text filter',
     igx_grid_excel_number_filter: 'Number filter',
     igx_grid_excel_date_filter: 'Date filter',

projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-component.scss

@@ -85,6 +85,15 @@
             @extend %grid-excel-actions__action !optional;
         }
 
+        @include e(actions-select) {
+            @extend %grid-excel-actions__action !optional;
+        }
+
+        @include e(actions-selected) {
+            @extend %grid-excel-actions__action !optional;
+            @extend %grid-excel-actions--selected !optional;
+        }
+
         @include e(actions-filter) {
             @extend %grid-excel-actions__action !optional;
         }

projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss

@@ -144,6 +144,12 @@
         padding: rem(8px) rem(16px);
     }
 
+    %grid-excel-actions--selected {
+        igx-icon {
+            color: igx-color($palette, 'secondary');
+        }
+    }
+
     %grid-excel-move {
         margin-bottom: rem(8px);
 

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss

@@ -233,6 +233,10 @@
         @extend %igx-grid__th--sortable !optional;
     }
 
+    @include e(th, $m: selectable) {
+        @extend %igx-grid__th--selectable !optional;
+    }
+
     @include e(th, $m: filtrable) {
         @extend %igx-grid__th--filtrable !optional;
     }
@@ -245,6 +249,10 @@
         @extend %igx-grid__th--sorted !optional;
     }
 
+    @include e(th, $m: selected) {
+        @extend %igx-grid__th--selected !optional;
+    }
+
     @include e(th, $m: number) {
         @extend %grid-cell-number !optional;
     }
@@ -301,6 +309,14 @@
         @extend %grid-cell--selected !optional;
     }
 
+    @include e(td, $m: column-selected) {
+        @extend %grid-cell--column-selected !optional;
+    }
+
+    @include e(td, $mods: (selected, column-selected)) {
+        @extend %grid-cell--cross-selected !optional;
+    }
+
     @include e(tr, $mods: (selected, filtered)) {
         @extend %grid-row--selected--filtered !optional;
     }
@@ -372,6 +388,10 @@
         @extend %grid-cell--pinned-selected !optional;
     }
 
+    @include e(td, $mods: (pinned, column-selected)) {
+        @extend %grid-cell--pinned--column-selected !optional;
+    }
+
     @include e(td-text) {
         @extend %grid-cell-text !optional;
     }

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -1286,6 +1286,20 @@
         }
     }
 
+    %grid-cell--column-selected {
+        color: --var($theme, 'row-selected-text-color');
+        background: --var($theme, 'row-selected-background');
+
+        &:hover {
+            background: --var($theme, 'row-selected-hover-background');
+            color: --var($theme, 'row-selected-text-color');
+        }
+    }
+
+    %grid-cell--cross-selected {
+        background: --var($theme, 'row-selected-cell-background');
+    }
+
     %igx-grid__td--edited {
         %grid-cell-text {
             font-style: italic;
@@ -1331,6 +1345,16 @@
         // border-bottom: 0;
     }
 
+    %grid-cell--pinned--column-selected {
+        color: --var($theme, 'row-selected-text-color');
+        background: --var($theme, 'row-selected-background');
+
+        &:hover {
+            background: --var($theme, 'row-selected-hover-background');
+            color: --var($theme, 'row-selected-text-color');
+        }
+    }
+
     %grid-cell--pinned-last {
         border-#{$right}: map-get($cell-pin, 'style') map-get($cell-pin, 'color') !important;
 
@@ -1447,36 +1471,29 @@
         justify-content: normal;
     }
 
+    %igx-grid__th--selectable {
+        color: --var($theme, 'row-selected-text-color');
+        background: --var($theme, 'row-selected-background');
+        opacity: .7;
+    }
+
+    %igx-grid__th--selected {
+        color: --var($theme, 'row-selected-text-color');
+        background: --var($theme, 'row-selected-cell-background');
+    }
+
     %igx-grid__th--sortable {
-        &:hover {
+        .sort-icon {
             cursor: pointer;
+            opacity: .7;
 
-            %grid-cell-header-title {
-                cursor: pointer;
+            &:hover {
                 opacity: 1;
             }
-
-            .sort-icon {
-                opacity: .7;
-
-                &:hover {
-                    opacity: 1;
-                }
-            }
         }
     }
 
     %igx-grid__th--sorted {
-        %grid-cell-header-title {
-            opacity: 1;
-        }
-
-        &:hover{
-            .sort-icon {
-                opacity: 1;
-            }
-        }
-
         .sort-icon {
             opacity: 1;
             color: --var($theme, 'sorted-header-icon-color');

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

@@ -232,6 +232,7 @@ A list of the events emitted by the **igx-grid**:
 |`onColumnMovingStart`|Emitted when a column moving starts. Returns the moved column object.|
 |`onSelection`|Emitted when a cell is selected. Returns the cell object.|
 |`onRowSelectionChange`|Emitted when a row selection has changed. Returns array with old and new selected rows' IDs and the target row, if available.|
+|`onColumnSelectionChange`|Emitted when a column selection has changed. Returns array with old and new selected column' fields|
 |`onColumnInit`|Emitted when the grid columns are initialized. Returns the column object.|
 |`onSortingDone`|Emitted when sorting is performed through the UI. Returns the sorting expression.|
 |`onFilteringDone`|Emitted when filtering is performed through the UI. Returns the filtering expressions tree of the column for which the filtering was performed.|
@@ -290,6 +291,11 @@ Here is a list of all public methods exposed by **igx-grid**:
 |`deselectRows(rowIDs: any[])`|Removes the specified row(s) from the grid's selection in the `selectionAPI`.|
 |`selectAllRows()`|Marks all rows as selected in the grid `selectionAPI`.|
 |`deselectAllRows()`|Sets the grid's row selection in the `selectionAPI` to `[]`.|
+|`selectedColumns()`|Returns array of the currently selected columns|
+|`selectColumns(columns: string[] | IgxColumnComponent[], clearCurrentSelection?: boolean)`|Marks the specified columns as selected in the grid `selectionAPI`. `clearCurrentSelection` first empties the grid's selection array.|
+|`deselectColumns(columns: string[] | IgxColumnComponent[])`|Removes the specified columns from the grid's selection in the `selectionAPI`.|
+|`deselectAllColumns()`|Sets the grid's column selection in the `selectionAPI` to `[]`.|
+|`getSelectedColumnsData()`|Gets the the data form current selected columns.|
 |`findNext(text: string, caseSensitive?: boolean, exactMatch?: boolean)`|Highlights all occurrences of the specified text and marks the next occurrence as active.|
 |`findPrev(text: string, caseSensitive?: boolean, exactMatch?: boolean)`|Highlights all occurrences of the specified text and marks the previous occurrence as active.|
 |`clearSearch(text: string, caseSensitive?: boolean)`|Removes all search highlights from the grid.|
@@ -324,6 +330,8 @@ Inputs available on the **IgxGridColumnComponent** to define columns:
 |`hidden`|boolean|Visibility of the column|
 |`movable`|boolean|Set column to be movable|
 |`resizable`|boolean|Set column to be resizable|
+|`selectable`|boolean|Set column to be selectable|
+|`selected`|boolean|Set column to be selected|
 |`width`|string|Columns width|
 |`minWidth`|string|Columns minimal width|
 |`maxWidth`|string|Columns miximum width|

projects/igniteui-angular/src/lib/grids/cell.component.ts

@@ -432,14 +432,18 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
     @Input()
     width = '';
 
+    @HostBinding('attr.aria-selected')
+    get ariaSelected() {
+        return this.selected || this.column.selected  || this.row.selected;
+    }
+
     /**
      * Gets whether the cell is selected.
      * ```typescript
      * let isSelected = this.cell.selected;
      * ```
      * @memberof IgxGridCellComponent
      */
-    @HostBinding('attr.aria-selected')
     @HostBinding('class.igx-grid__td--selected')
     get selected() {
         return this.selectionService.selected(this.selectionNode);
@@ -458,6 +462,18 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
         this.grid.notifyChanges();
     }
 
+    /**
+     * Gets whether the cell column is selected.
+     * ```typescript
+     * let isCellColumnSelected = this.cell.columnSelected;
+     * ```
+     * @memberof IgxGridCellComponent
+     */
+    @HostBinding('class.igx-grid__td--column-selected')
+    get columnSelected() {
+        return this.selectionService.isColumnSelected(this.column.field);
+    }
+
     @HostBinding('class.igx-grid__td--edited')
     get dirty() {
         if (this.grid.rowEditable) {

projects/igniteui-angular/src/lib/grids/columns/column-group.component.ts

@@ -126,6 +126,19 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
      */
     public set filters(classRef: any) { }
 
+    /**
+     * Returns if the column group is selectable
+     * ```typescript
+     * let columnGroupSelectable = this.columnGroup.selectable;
+     * ```
+     * @memberof IgxColumnGroupComponent
+     */
+    public get selectable(): boolean {
+        return this.children && this.children.some(child => child.selectable);
+    }
+
+    public set selectable(value: boolean) {}
+
     /**
      * Returns a reference to the body template.
      * ```typescript
@@ -206,13 +219,40 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
         if (this._hidden || !this.collapsible) {
             this.children.forEach(child => child.hidden = this._hidden);
         } else {
-            this.children.forEach(c =>  {
-                if (c.visibleWhenCollapsed === undefined) {c.hidden = false; return; }
+            this.children.forEach(c => {
+                if (c.visibleWhenCollapsed === undefined) { c.hidden = false; return; }
                 c.hidden = this.expanded ? c.visibleWhenCollapsed : !c.visibleWhenCollapsed;
             });
         }
     }
 
+    /**
+     * Returns if the column group is selected.
+     * ```typescript
+     * let isSelected = this.columnGroup.selected;
+     * ```
+     * @memberof IgxColumnGroupComponent
+     */
+    get selected(): boolean {
+        const selectableChildren = this.allChildren.filter(c => !c.columnGroup && c.selectable && !c.hidden);
+        return selectableChildren.length > 0 && selectableChildren.every(c => c.selected);
+    }
+
+    /**
+     * Enables/Disables the column group selection.
+     * ```html
+     * <igx-column [selected] = "true"></igx-column>
+     * ```
+     * @memberof IgxColumnGroupComponent
+     */
+    set selected(value: boolean) {
+        if (this.selectable) {
+            this.children.forEach(c => {
+                c.selected = value;
+            });
+        }
+    }
+
     /**
      *@hidden
      */
@@ -299,6 +339,24 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
 
     set width(val) { }
 
+    /**
+     *@hidden
+    */
+    public get applySelectableClass(): boolean {
+        return this._applySelectableClass;
+    }
+
+    /**
+    *@hidden
+    */
+    public set applySelectableClass(value: boolean) {
+        if (this.selectable) {
+            this._applySelectableClass = value;
+            this.children.forEach(c => {
+                c.applySelectableClass = value;
+            });
+        }
+    }
     // constructor(public gridAPI: GridBaseAPIService<IgxGridBaseDirective & IGridDataBindable>, public cdr: ChangeDetectorRef) {
     //     // D.P. constructor duplication due to es6 compilation, might be obsolete in the future
     //     super(gridAPI, cdr);