Grid Selection --- 8.2.x

CHANGELOG.md

@@ -8,6 +8,7 @@ All notable changes for each version of this project will be documented in this
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - `uniqueColumnValuesStrategy` input is added. This property provides a callback for loading unique column values on demand. If this property is provided, the unique values it generates will be used by the Excel Style Filtering (instead of using the unique values from the data that is bound to the grid).
     - `igxExcelStyleLoading` directive is added, which can be used to provide a custom loading template for the Excel Style Filtering. If this property is not provided, a default loading template will be used instead.
+    - introduced new properties `cellSelection` and `rowSelection` which accept GridSelection mode enumeration. Grid selection mode could be none, single or multiple. Also `hideRowSelectors` property is added, which allows you to show and hide row selectors when row selection is enabled.
 - `IgxHierarchicalGrid`
     - Row Islands now emit child grid events with an additional argument - `owner`, which holds reference to the related child grid component instance.
 - `IgxDrag`
@@ -24,9 +25,13 @@ All notable changes for each version of this project will be documented in this
 
 ### General
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - `isCellSelected` method has been deprecated. Now you can use `selected` property.
+    - `rowSelectable` property has been deprecated. Now you can use `rowSelection` property to enable row selection and also you can show and hide the row selectors by setting `hideRowSelectors` property to true or false (which is the default value).
+    - Removed deprecated event `OnFocusChange`
     - **Breaking Change** `igxExcelStyleSortingTemplate` directive is renamed to `igxExcelStyleSorting`.
     - **Breaking Change** `igxExcelStyleMovingTemplate` directive is renamed to `igxExcelStyleMoving`.
     - **Breaking Change** `igxExcelStyleHidingTemplate` directive is renamed to `igxExcelStyleHiding`.
+    - **Breaking Change** `onRowSelectionChange` event arguments are changed. The `row` property has been removed and the properties `added`, `removed` and `cancel` are newly added.
     - **Breaking Change** `igxExcelStylePinningTemplate` directive is renamed to `igxExcelStylePinning`.
     - **Breaking Change** `onRowDragEnd` and `onRowDragStart` event arguments are changed - `owner` now holds reference to the grid component instance, while `dragDirective` hold reference to the drag directive.
 - `IgxCombo`
@@ -50,7 +55,7 @@ All notable changes for each version of this project will be documented in this
    - For more information, visit the component's [readme](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/combo/README.md)
 
 ## 8.1.4
-- `IgxDialog` new @Input `positionSettings` is now available. It provides the ability to get/set both position and animation settings of the Dialog component. 
+- `IgxDialog` new @Input `positionSettings` is now available. It provides the ability to get/set both position and animation settings of the Dialog component.
 
 - `IgxDrag`
     - Deprecated inputs - `hideBaseOnDrag`, `animateOnRelease`, `visible`.

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

@@ -1,7 +1,6 @@
 import { Injectable, EventEmitter, NgZone } from '@angular/core';
 import { IGridEditEventArgs } from '../grids/grid-base.component';
 
-
 export interface GridSelectionRange {
     rowStart: number;
     rowEnd: number;
@@ -202,7 +201,7 @@ export class IgxGridCRUDService {
 
 @Injectable()
 export class IgxGridSelectionService {
-
+    grid;
     dragMode = false;
     activeElement: ISelectionNode | null;
     keyboardState = {} as ISelectionKeyboardState;
@@ -213,7 +212,8 @@ export class IgxGridSelectionService {
     temp = new Map<number, Set<number>>();
     _ranges: Set<string> = new Set<string>();
     _selectionRange: Range;
-
+    rowSelection: Set<any> = new Set<any>();
+    private allRowsSelected: boolean;
 
     /**
      * Returns the current selected ranges in the grid from both
@@ -227,7 +227,7 @@ export class IgxGridSelectionService {
         const ranges = Array.from(this._ranges).map(range => JSON.parse(range));
 
         // No ranges but we have a focused cell -> add it
-        if (!ranges.length && this.activeElement) {
+        if (!ranges.length && this.activeElement && this.grid.isCellSelectable) {
             ranges.push(this.generateRange(this.activeElement));
         }
 
@@ -304,7 +304,7 @@ export class IgxGridSelectionService {
     }
 
     selected(node: ISelectionNode): boolean {
-        return this.isActiveNode(node) || this.isInMap(node);
+        return (this.isActiveNode(node) && this.grid.isCellSelectable) || this.isInMap(node);
     }
 
     isActiveNode(node: ISelectionNode, mrl = false): boolean {
@@ -394,7 +394,6 @@ export class IgxGridSelectionService {
     }
 
     pointerDown(node: ISelectionNode, shift: boolean, ctrl: boolean): void {
-
         this.addKeyboardRange();
         this.initKeyboardState();
         this.pointerState.ctrl = ctrl;
@@ -506,7 +505,8 @@ export class IgxGridSelectionService {
         this.selectRange(node, state);
     }
 
-    clear(): void {
+    clear(clearAcriveEl = false): void {
+        if (clearAcriveEl) { this.activeElement = null; }
         this.selection.clear();
         this.temp.clear();
         this._ranges.clear();
@@ -541,6 +541,151 @@ export class IgxGridSelectionService {
         range.collapse(true);
         selection.addRange(range);
     }
+
+    /** Returns array of the selected row id's. */
+    getSelectedRows(): Array<any> {
+        return this.rowSelection.size ? Array.from(this.rowSelection.keys()) : [];
+    }
+
+    /** Clears row selection, if filtering is applied clears only selected rows from filtered data. */
+    clearRowSelection(event?): void {
+        const removedRec = this.isFilteringApplied() ?
+            this.getRowIDs(this.allData).filter(rID => this.isRowSelected(rID)) : this.getSelectedRows();
+        const newSelection = this.isFilteringApplied() ? this.getSelectedRows().filter(x => !removedRec.includes(x)) : [];
+        this.emitRowSelectionEvent(newSelection, [], removedRec, event);
+    }
+
+    /** Select all rows, if filtering is applied select only from filtered data. */
+    selectAllRows(event?) {
+        const allRowIDs = this.getRowIDs(this.allData);
+        const addedRows =  allRowIDs.filter((rID) => !this.isRowSelected(rID));
+        const newSelection = this.rowSelection.size ? allRowIDs.concat(this.getSelectedRows()) : addedRows;
+
+        this.emitRowSelectionEvent(newSelection, addedRows, [], event);
+    }
+
+    /** Select the specified row and emit event. */
+    selectRowById(rowID, clearPrevSelection?, event?): void {
+        if (!this.grid.isRowSelectable || this.isRowDeleted(rowID)) { return; }
+        clearPrevSelection = !this.grid.isMultiRowSelectionEnabled || clearPrevSelection;
+
+        const newSelection = clearPrevSelection ? [rowID] : this.getSelectedRows().indexOf(rowID) !== -1 ?
+            this.getSelectedRows() : [...this.getSelectedRows(), rowID];
+        const removed = clearPrevSelection ? this.getSelectedRows() : [];
+        this.emitRowSelectionEvent(newSelection, [rowID], removed, event);
+    }
+
+    /** Deselect the specified row and emit event. */
+    deselectRow(rowID, event?): void {
+        if (!this.isRowSelected(rowID)) { return; }
+        const newSelection = this.getSelectedRows().filter(r => r !== rowID);
+        if (this.rowSelection.size && this.rowSelection.has(rowID)) {
+            this.emitRowSelectionEvent(newSelection, [], [rowID], event);
+        }
+    }
+
+    /** Select specified rows. No event is emitted. */
+    selectRowsWithNoEvent(rowIDs: any[], clearPrevSelection?): void {
+        if (clearPrevSelection) { this.rowSelection.clear(); }
+        rowIDs.forEach(rowID => { this.rowSelection.add(rowID); });
+        this.allRowsSelected = undefined;
+    }
+
+    /** Deselect specified rows. No event is emitted. */
+    deselectRowsWithNoEvent(rowIDs: any[]): void  {
+        rowIDs.forEach(rowID => this.rowSelection.delete(rowID));
+        this.allRowsSelected = undefined;
+    }
+
+    isRowSelected(rowID): boolean {
+        return this.rowSelection.size > 0 && this.rowSelection.has(rowID);
+    }
+
+    /** Select range from last selected row to the current specified row.*/
+    selectMultipleRows(rowID, rowData, event?): void  {
+        this.allRowsSelected = undefined;
+        if (!this.rowSelection.size || this.isRowDeleted(rowID)) {
+            this.selectRowById(rowID);
+            return;
+        }
+        const gridData = this.allData;
+        const lastRowID = this.getSelectedRows()[this.rowSelection.size - 1];
+        const currIndex = gridData.indexOf(this.getRowDataById(lastRowID));
+        const newIndex = gridData.indexOf(rowData);
+        const rows = gridData.slice(Math.min(currIndex, newIndex), Math.max(currIndex, newIndex) + 1);
+
+        const added = this.getRowIDs(rows).filter(rID => !this.isRowSelected(rID));
+        const newSelection = this.getSelectedRows().concat(added);
+
+        this.emitRowSelectionEvent(newSelection, added, [], event);
+    }
+
+    areAllRowSelected(): boolean {
+        if (!this.grid.data) { return false; }
+        if (this.allRowsSelected !== undefined) { return this.allRowsSelected; }
+
+        const dataItemsID = this.getRowIDs(this.allData);
+        return this.allRowsSelected = Math.min(this.rowSelection.size, dataItemsID.length) > 0 &&
+            new Set(Array.from(this.rowSelection.values()).concat(dataItemsID)).size === this.rowSelection.size;
+    }
+
+    hasSomeRowSelected(): boolean {
+        const filteredData = this.isFilteringApplied() ?
+            this.getRowIDs(this.grid.filteredData).some(rID => this.isRowSelected(rID)) : true;
+        return this.rowSelection.size > 0 && filteredData && !this.areAllRowSelected();
+    }
+
+    public emitRowSelectionEvent(newSelection, added, removed, event?): boolean {
+        const currSelection = this.getSelectedRows();
+        if (this.areEqualCollections(currSelection, newSelection)) { return; }
+
+        const args = {
+            oldSelection: currSelection, newSelection: newSelection,
+            added: added, removed: removed, event: event, cancel: false
+        };
+        this.grid.onRowSelectionChange.emit(args);
+        if (args.cancel) { return; }
+        this.selectRowsWithNoEvent(args.newSelection, true);
+    }
+
+    public getRowDataById(rowID): Object {
+        if (!this.grid.primaryKey) { return rowID; }
+        const rowIndex = this.getRowIDs(this.grid.gridAPI.get_all_data(true)).indexOf(rowID);
+        return rowIndex < 0 ? {} : this.grid.gridAPI.get_all_data(true)[rowIndex];
+    }
+
+    public getRowIDs(data): Array<any> {
+        return this.grid.primaryKey && data.length ? data.map(rec => rec[this.grid.primaryKey]) : data;
+    }
+
+    public clearHeaderCBState(): void  {
+        this.allRowsSelected = undefined;
+    }
+
+    /**Clear rowSelection and update checkbox state*/
+    public clearAllSelectedRows(): void {
+        this.rowSelection.clear();
+        this.clearHeaderCBState();
+    }
+
+    /** Returns all data in the grid, with applied filtering and sorting and without deleted rows. */
+    public get allData(): Array<any> {
+        const allData = this.isFilteringApplied() || this.grid.sortingExpressions.length ?
+            this.grid.filteredSortedData : this.grid.gridAPI.get_all_data(true);
+        return allData.filter(rData => !this.isRowDeleted(this.grid.gridAPI.get_row_id(rData)));
+    }
+
+    private areEqualCollections(first, second): boolean {
+        return first.length === second.length && new Set(first.concat(second)).size === first.length;
+    }
+
+    private isFilteringApplied(): boolean {
+        return this.grid.filteringExpressionsTree.filteringOperands.length > 0;
+    }
+
+    private isRowDeleted(rowID): boolean {
+        return this.grid.gridAPI.row_deleted_transaction(rowID);
+    }
 }
 
 export function isChromium(): boolean {

projects/igniteui-angular/src/lib/grids/api.service.ts

@@ -150,9 +150,9 @@ export class GridBaseAPIService <T extends IgxGridBaseComponent & IGridDataBinda
         this.grid.summaryService.clearSummaryCache(args);
         this.updateData(this.grid, cell.id.rowID, data[index], cell.rowData, { [cell.column.field ]: args.newValue });
         if (this.grid.primaryKey === cell.column.field) {
-            if (this.grid.selection.is_item_selected(this.grid.id, cell.id.rowID)) {
-                this.grid.selection.deselect_item(this.grid.id, cell.id.rowID);
-                this.grid.selection.select_item(this.grid.id, args.newValue);
+             if (this.grid.selectionService.isRowSelected(cell.id.rowID)) {
+                this.grid.selectionService.deselectRow(cell.id.rowID);
+                this.grid.selectionService.selectRowById(args.newValue);
             }
             if (this.grid.hasSummarizedColumns) {
                 this.grid.summaryService.removeSummaries(cell.id.rowID);
@@ -207,6 +207,7 @@ export class GridBaseAPIService <T extends IgxGridBaseComponent & IGridDataBinda
 
     update_row(row: IgxRow, value: any) {
         const grid = this.grid;
+        const selected = grid.selectionService.isRowSelected(row.id);
         const rowInEditMode = grid.crudService.row;
         const data = this.get_all_data(grid.transactions.enabled);
         const index = this.get_row_index_in_data(row.id);
@@ -245,10 +246,9 @@ export class GridBaseAPIService <T extends IgxGridBaseComponent & IGridDataBinda
 
         this.updateData(grid, row.id, data[index], args.oldValue, args.newValue);
         const newId = grid.primaryKey ? args.newValue[grid.primaryKey] : args.newValue;
-        const selected = grid.selection.is_item_selected(grid.id, row.id);
         if (selected) {
-            grid.selection.deselect_item(grid.id, row.id);
-            grid.selection.select_item(grid.id, newId);
+            grid.selectionService.deselectRow(row.id);
+            grid.selectionService.selectRowById(newId);
         }
         if (hasSummarized) {
             grid.summaryService.removeSummaries(newId);
@@ -503,14 +503,9 @@ export class GridBaseAPIService <T extends IgxGridBaseComponent & IGridDataBinda
         //  TODO: should we emit this when cascadeOnDelete is true for each row?!?!
         grid.onRowDeleted.emit({ data: data[index] });
 
-        //  first deselect row then delete it
-        if (grid.rowSelectable && grid.selection.is_item_selected(grid.id, rowId)) {
-            grid.deselectRows([rowId]);
-        } else {
-            grid.checkHeaderCheckboxStatus();
-        }
-
         this.deleteRowFromData(rowId, index);
+
+        grid.selectionService.isRowSelected(rowId) ? grid.selectionService.deselectRow(rowId) : grid.selectionService.clearHeaderCBState();
         (grid as any)._pipeTrigger++;
         grid.notifyChanges();
         // Data needs to be recalculated if transactions are in place
@@ -523,8 +518,7 @@ export class GridBaseAPIService <T extends IgxGridBaseComponent & IGridDataBinda
     }
 
     public get_row_id(rowData) {
-        const grid = this.grid;
-        return grid.primaryKey ? rowData[grid.primaryKey] : rowData;
+        return this.grid.primaryKey ? rowData[this.grid.primaryKey] : rowData;
     }
 
     public row_deleted_transaction(rowID: any): boolean {