chore(*): address requested changes and comments

Author: ddincheva

CHANGELOG.md

@@ -8,14 +8,16 @@ 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 propoerties `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.
+    - 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.
 ### 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 priperties `added`, `removed` and `cancel` are newly added.
+    - **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`.
 - `IgxCombo`
     - Combo selection is now consistent when `valueKey` is defined. When `valueKey` is specified, selection is based on the value keys of the items. For example:

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

@@ -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 && this.grid.cellSelection !== 'none') {
+        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.grid.cellSelection !== 'none' ) || this.isInMap(node);
+        return (this.isActiveNode(node) && this.grid.isCellSelectable) || this.isInMap(node);
     }
 
     isActiveNode(node: ISelectionNode, mrl = false): boolean {
@@ -372,7 +372,6 @@ export class IgxGridSelectionService {
     }
 
     keyboardStateOnFocus(node: ISelectionNode, emitter: EventEmitter<GridSelectionRange>, dom): void {
-        if (this.grid.cellSelection !== 'multiple') { return; }
         const kbState = this.keyboardState;
 
         // Focus triggered by keyboard navigation
@@ -543,17 +542,20 @@ export class IgxGridSelectionService {
         selection.addRange(range);
     }
 
-    getSelectedRows() {
+    /** Returns array of the selected row id's. */
+    getSelectedRows(): Array<any> {
         return this.rowSelection.size ? Array.from(this.rowSelection.keys()) : [];
     }
 
-    clearRowSelection(event?) {
+    /** 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));
@@ -562,48 +564,53 @@ export class IgxGridSelectionService {
         this.emitRowSelectionEvent(newSelection, addedRows, [], event);
     }
 
-    selectRowbyID(rowID, clearPrevSelection?, event?) {
-        if (this.grid.rowSelection === 'none' || this.isRowDeleted(rowID)) { return; }
-        clearPrevSelection = this.grid.rowSelection === 'single' || clearPrevSelection;
+    /** 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);
     }
 
-    deselectRow(rowID, 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);
         }
     }
 
-    selectRowsWithNoEvent(rowIDs: any[], clearPrevSelection?) {
+    /** 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;
     }
 
-    deselectRowsWithNoEvent(rowIDs: any[]) {
+    /** Deselect specified rows. No event is emitted. */
+    deselectRowsWithNoEvent(rowIDs: any[]): void  {
         rowIDs.forEach(rowID => this.rowSelection.delete(rowID));
         this.allRowsSelected = undefined;
     }
 
-    isRowSelected(rowID) {
+    isRowSelected(rowID): boolean {
         return this.rowSelection.size > 0 && this.rowSelection.has(rowID);
     }
 
-    selectMultipleRows(rowID, rowData, event?) {
+    /** 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);
+            this.selectRowById(rowID);
             return;
         }
         const gridData = this.allData;
         const lastRowID = this.getSelectedRows()[this.rowSelection.size - 1];
-        const currIndex = gridData.indexOf(this.getRowDataByID(lastRowID));
+        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);
 
@@ -613,7 +620,7 @@ export class IgxGridSelectionService {
         this.emitRowSelectionEvent(newSelection, added, [], event);
     }
 
-    areAllRowSelected() {
+    areAllRowSelected(): boolean {
         if (!this.grid.data) { return false; }
         if (this.allRowsSelected !== undefined) { return this.allRowsSelected; }
 
@@ -622,15 +629,15 @@ export class IgxGridSelectionService {
             new Set(Array.from(this.rowSelection.values()).concat(dataItemsID)).size === this.rowSelection.size;
     }
 
-    hasSomeRowSelected() {
+    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.areEquelCollections(currSelection, newSelection)) { return; }
+        if (this.areEqualCollections(currSelection, newSelection)) { return; }
 
         const args = {
             oldSelection: currSelection, newSelection: newSelection,
@@ -644,35 +651,36 @@ export class IgxGridSelectionService {
         this.selectRowsWithNoEvent(args.newSelection, true);
     }
 
-    public getRowDataByID(rowID) {
+    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) {
+    public getRowIDs(data): Array<any> {
         return this.grid.primaryKey && data.length ? data.map(rec => rec[this.grid.primaryKey]) : data;
     }
 
-    public clearHeaderCBState() {
+    public clearHeaderCBState(): void  {
         this.allRowsSelected = undefined;
     }
 
-    public get allData() {
+    /** 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 areEquelCollections(first, second) {
-        return first.length !== second.length || new Set(first.concat(second)).size !== first.length ? false : true;
+    private areEqualCollections(first, second): boolean {
+        return first.length === second.length && new Set(first.concat(second)).size === first.length;
     }
 
-    private isFilteringApplied() {
+    private isFilteringApplied(): boolean {
         return this.grid.filteringExpressionsTree.filteringOperands.length > 0;
     }
 
-    private isRowDeleted(rowID) {
+    private isRowDeleted(rowID): boolean {
         return this.grid.gridAPI.row_deleted_transaction(rowID);
     }
 }

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

@@ -152,7 +152,7 @@ export class GridBaseAPIService <T extends IgxGridBaseComponent & IGridDataBinda
         if (this.grid.primaryKey === cell.column.field) {
              if (this.grid.selectionService.isRowSelected(cell.id.rowID)) {
                 this.grid.selectionService.deselectRow(cell.id.rowID);
-                this.grid.selectionService.selectRowbyID(args.newValue);
+                this.grid.selectionService.selectRowById(args.newValue);
             }
             if (this.grid.hasSummarizedColumns) {
                 this.grid.summaryService.removeSummaries(cell.id.rowID);
@@ -248,7 +248,7 @@ export class GridBaseAPIService <T extends IgxGridBaseComponent & IGridDataBinda
         const newId = grid.primaryKey ? args.newValue[grid.primaryKey] : args.newValue;
         if (selected) {
             grid.selectionService.deselectRow(row.id);
-            grid.selectionService.selectRowbyID(newId);
+            grid.selectionService.selectRowById(newId);
         }
         if (hasSummarized) {
             grid.summaryService.removeSummaries(newId);

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

@@ -21,7 +21,7 @@ import { getNodeSizeViaRange, ROW_COLLAPSE_KEYS, ROW_EXPAND_KEYS, SUPPORTED_KEYS
 import { State } from '../services/index';
 import { IgxGridBaseComponent, IGridDataBindable } from './grid-base.component';
 import { IgxGridSelectionService, ISelectionNode, IgxGridCRUDService } from '../core/grid-selection';
-import { DeprecateProperty } from '../core/deprecateDecorators';
+import { DeprecateProperty, DeprecateMethod } from '../core/deprecateDecorators';
 import { GridSelectionMode } from './grid-base.component';
 import { HammerGesturesManager } from '../core/touch';
 
@@ -429,7 +429,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
     @HostBinding('attr.aria-selected')
     @HostBinding('class.igx-grid__td--selected')
     get selected() {
-        return this.isCellSelected();
+        return this.selectionService.selected(this.selectionNode);
     }
 
     /**
@@ -442,7 +442,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
     set selected(val: boolean) {
         const node = this.selectionNode;
         val ? this.selectionService.add(node) : this.selectionService.remove(node);
-        this.grid.cdr.markForCheck();
+        this.grid.notifyChanges();
     }
 
     @HostBinding('class.igx-grid__td--edited')
@@ -634,14 +634,15 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
         }
     }
 
-    // should be derprecated???
     /**
+     * @deprecated
      * Gets whether the cell is selected.
      * ```typescript
      * let isCellSelected = thid.cell.isCellSelected();
      * ```
      * @memberof IgxGridCellComponent
      */
+    @DeprecateMethod(`'isCellSelected' is deprecated. Use 'selected' property instead.`)
     public isCellSelected() {
         return this.selectionService.selected(this.selectionNode);
     }
@@ -803,7 +804,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
         const node = this.selectionNode;
         const mrl = this.grid.hasColumnLayouts;
 
-        if (this.isCellSelectable && !this.selectionService.isActiveNode(node, mrl)) {
+        if (this.grid.isCellSelectable && !this.selectionService.isActiveNode(node, mrl)) {
             this.grid.onSelection.emit({ cell: this, event });
         }
 
@@ -818,7 +819,9 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
         }
 
         this.selectionService.primaryButton = true;
-        this.selectionService.keyboardStateOnFocus(node, this.grid.onRangeSelection, this.nativeElement);
+        if (this.cellSelectionMode === GridSelectionMode.multiple) {
+            this.selectionService.keyboardStateOnFocus(node, this.grid.onRangeSelection, this.nativeElement);
+        }
     }
 
     /**
@@ -971,9 +974,9 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
             case ' ':
             case 'spacebar':
             case 'space':
-                if (this.grid.rowSelection !== 'none') {
+                if (this.grid.isRowSelectable) {
                     this.row.selected ? this.selectionService.deselectRow(this.row.rowID, event) :
-                    this.selectionService.selectRowbyID(this.row.rowID, false, event);
+                    this.selectionService.selectRowById(this.row.rowID, false, event);
                 }
                 break;
             default:
@@ -1055,8 +1058,4 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
     private isToggleKey(key: string): boolean {
         return ROW_COLLAPSE_KEYS.has(key) || ROW_EXPAND_KEYS.has(key);
     }
-
-    private get isCellSelectable() {
-        return this.cellSelectionMode !== GridSelectionMode.none;
-    }
 }

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

@@ -5606,19 +5606,21 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         return rowData.summaries && (rowData.summaries instanceof Map);
     }
 
-    /**
-     * @hidden
-     */
+    /** @hidden */
     public get isMultiRowSelectionEnabled(): boolean {
         return this.rowSelection === GridSelectionMode.multiple;
     }
-    /**
-     * @hidden
-     */
+
+    /** @hidden */
     public get isRowSelectable(): boolean {
         return this.rowSelection !== GridSelectionMode.none;
     }
 
+    /** @hidden */
+    public get isCellSelectable() {
+        return this.cellSelection !== GridSelectionMode.none;
+    }
+
     /**
      * @hidden
      */

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

@@ -20,6 +20,7 @@ import { IgxColumnComponent } from './column.component';
 import { TransactionType, State } from '../services';
 import { IgxGridBaseComponent, IGridDataBindable } from './grid-base.component';
 import { IgxGridSelectionService, IgxGridCRUDService, IgxRow } from '../core/grid-selection';
+import { DeprecateProperty } from '../core/deprecateDecorators';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -161,7 +162,7 @@ export class IgxRowComponent<T extends IgxGridBaseComponent & IGridDataBindable>
         return false;
     }
 
-    // TODO: should be deprecated?????
+    @DeprecateProperty('isSelected property is deprecated. Use selected property instead.')
     public get isSelected() {
         return this.selectionService.isRowSelected(this.rowID);
     }
@@ -281,7 +282,7 @@ export class IgxRowComponent<T extends IgxGridBaseComponent & IGridDataBindable>
             this.selectionService.selectMultipleRows(this.rowID, this.rowData, event);
             return;
         }
-        this.selectionService.selectRowbyID(this.rowID, !event.ctrlKey, event);
+        this.selectionService.selectRowById(this.rowID, !event.ctrlKey, event);
     }
 
     /**
@@ -294,7 +295,7 @@ export class IgxRowComponent<T extends IgxGridBaseComponent & IGridDataBindable>
             return;
         }
         this.selected ? this.selectionService.deselectRow(this.rowID, event) :
-        this.selectionService.selectRowbyID(this.rowID, false, event);
+        this.selectionService.selectRowById(this.rowID, false, event);
     }
 
     /**