feat(tree-grid): add cascading row selection #8040

CHANGELOG.md

@@ -8,6 +8,14 @@ All notable changes for each version of this project will be documented in this
     - The `igx-drop-down-item` now allows for `igxPrefix`, `igxSuffix` and `igx-divider` directives to be passed as `ng-content` and they will be renderer accordingly in the item's content.
 - `IgxGrid`
     - Added support for exporting grouped data.
+- `IgxTreeGrid`
+    - Added `multipleCascade` row selection mode. In this mode, selecting a record results in the selection of all its children recursively. When only some children are selected, their parent's checkbox is in an indeterminate state.
+
+
+        ```html
+        <igx-tree-grid [rowSelection]="'multipleCascade'">           
+        </igx-tree-grid>
+        ```
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - Support for `currency` type columns is added in the grid.
     - Added support for filtering based on the formatted cell values using the `FormattedValuesFilteringStrategy` for `IgxGrid`/`IgxHierarchicalGrid` and `TreeGridFormattedValuesFilteringStrategy` for `IgxTreeGrid`.

projects/igniteui-angular/src/lib/grids/common/enums.ts

@@ -30,7 +30,8 @@ export type GridKeydownTargetType =
 export const GridSelectionMode = mkenum({
     none: 'none',
     single: 'single',
-    multiple: 'multiple'
+    multiple: 'multiple',
+    multipleCascade: 'multipleCascade'
 });
 export type GridSelectionMode = (typeof GridSelectionMode)[keyof typeof GridSelectionMode];
 

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

@@ -2035,11 +2035,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     @Input()
     public set selectedRows(rowIDs: any[]) {
-        if (rowIDs.length > 0) {
-            this.selectRows(rowIDs, true);
-        } else {
-            this.deselectAllRows();
-        }
+        this.selectRows(rowIDs || [], true);
     }
 
     public get selectedRows(): any[] {
@@ -2590,8 +2586,8 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * Gets/Sets row selection mode
      *
      * @remarks
-     * By default the row selection mode is none
-     * @param selectionMode: GridSelectionMode
+     * By default the row selection mode is 'none'
+     * Note that in IgxGrid and IgxHierarchicalGrid 'multipleCascade' behaves like 'multiple'
      */
     @WatchChanges()
     @Input()
@@ -2601,7 +2597,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
 
     public set rowSelection(selectionMode: GridSelectionMode) {
         this._rowSelectionMode = selectionMode;
-        if (this.gridAPI.grid && this.columnList) {
+        if (!this._init) {
             this.selectionService.clearAllSelectedRows();
             this.notifyChanges(true);
         }
@@ -3040,7 +3036,8 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * @hidden @internal
      */
     public get isMultiRowSelectionEnabled(): boolean {
-        return this.rowSelection === GridSelectionMode.multiple;
+        return this.rowSelection === GridSelectionMode.multiple
+            || this.rowSelection === GridSelectionMode.multipleCascade;
     }
 
     /**

projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts

@@ -1858,7 +1858,6 @@ describe('IgxGrid - Row Selection #grid', () => {
         it('Should bind selectedRows properly', () => {
             fix.componentInstance.selectedRows = [1, 2, 3];
             fix.detectChanges();
-
             expect(grid.getRowByIndex(0).selected).toBeTrue();
             expect(grid.getRowByIndex(4).selected).toBeFalse();
 

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

@@ -25,7 +25,7 @@ import { IgxGridSummaryService } from '../summaries/grid-summary.service';
 import { IgxGridSelectionService, IgxGridCRUDService } from '../selection/selection.service';
 import { IgxForOfSyncService, IgxForOfScrollSyncService } from '../../directives/for-of/for_of.sync.service';
 import { IgxGridMRLNavigationService } from '../grid-mrl-navigation.service';
-import { FilterMode } from '../common/enums';
+import { FilterMode, GridSelectionMode } from '../common/enums';
 import { GridType } from '../common/grid.interface';
 import { IgxGroupByRowSelectorDirective } from '../selection/row-selectors';
 
@@ -482,7 +482,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
             return res;
         }
         const rList = this._groupsRowList.filter(item => item.element.nativeElement.parentElement !== null)
-                                        .sort((item1, item2) => item1.index - item2.index);
+            .sort((item1, item2) => item1.index - item2.index);
         res.reset(rList);
         return res;
     }

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

@@ -36,6 +36,7 @@ import { IgxForOfSyncService, IgxForOfScrollSyncService } from '../../directives
 import { GridType } from '../common/grid.interface';
 import { IgxRowIslandAPIService } from './row-island-api.service';
 import { IgxGridToolbarDirective, IgxGridToolbarTemplateContext } from '../toolbar/common';
+import { GridSelectionMode } from '../common/enums';
 
 let NEXT_ID = 0;
 
@@ -242,7 +243,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
      */
     @Input()
     public set expandChildren(value: boolean) {
-        this._defaultExpandState  = value;
+        this._defaultExpandState = value;
         this.expansionStates = new Map<any, boolean>();
     }
 
@@ -256,7 +257,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
      * @memberof IgxHierarchicalGridComponent
      */
     public get expandChildren(): boolean {
-        return this._defaultExpandState ;
+        return this._defaultExpandState;
     }
 
     /**
@@ -358,16 +359,16 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
         this.dragIndicatorIconTemplate = this.parentIsland ?
             this.parentIsland.dragIndicatorIconTemplate :
             this.dragIndicatorIconTemplate;
-        this.rowExpandedIndicatorTemplate  = this.rootGrid.rowExpandedIndicatorTemplate;
-        this.rowCollapsedIndicatorTemplate   = this.rootGrid.rowCollapsedIndicatorTemplate;
+        this.rowExpandedIndicatorTemplate = this.rootGrid.rowExpandedIndicatorTemplate;
+        this.rowCollapsedIndicatorTemplate = this.rootGrid.rowCollapsedIndicatorTemplate;
         this.headerCollapseIndicatorTemplate = this.rootGrid.headerCollapseIndicatorTemplate;
         this.headerExpandIndicatorTemplate = this.rootGrid.headerExpandIndicatorTemplate;
         this.excelStyleHeaderIconTemplate = this.rootGrid.excelStyleHeaderIconTemplate;
         this.hasChildrenKey = this.parentIsland ?
-         this.parentIsland.hasChildrenKey || this.rootGrid.hasChildrenKey :
-         this.rootGrid.hasChildrenKey;
-         this.showExpandAll = this.parentIsland ?
-         this.parentIsland.showExpandAll : this.rootGrid.showExpandAll;
+            this.parentIsland.hasChildrenKey || this.rootGrid.hasChildrenKey :
+            this.rootGrid.hasChildrenKey;
+        this.showExpandAll = this.parentIsland ?
+            this.parentIsland.showExpandAll : this.rootGrid.showExpandAll;
 
         this.excelStyleFilteringComponents = this.parentIsland ?
             this.parentIsland.excelStyleFilteringComponents :
@@ -572,14 +573,14 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
      * @internal
      */
     public hasExpandedRecords() {
-       if (this.expandChildren) {
+        if (this.expandChildren) {
             return true;
-       }
-       let hasExpandedEntry = false;
-       this.expansionStates.forEach(value => {
-           if (value) {
-            hasExpandedEntry = value;
-           }
+        }
+        let hasExpandedEntry = false;
+        this.expansionStates.forEach(value => {
+            if (value) {
+                hasExpandedEntry = value;
+            }
         });
         return hasExpandedEntry;
     }

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.selection.spec.ts

@@ -1268,6 +1268,7 @@ describe('IgxHierarchicalGrid selection #hGrid', () => {
             rowIsland1.rowSelection = GridSelectionMode.multiple;
             fix.componentInstance.selectedRows = ['0', '2', '3'];
             fix.detectChanges();
+
             expect(hierarchicalGrid.getRowByKey('0').selected).toBeTrue();
             expect(hierarchicalGrid.getRowByKey('1').selected).toBeFalse();
 

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

@@ -403,7 +403,7 @@ export class IgxRowDirective<T extends IgxGridBaseDirective & GridType> implemen
         if (this.grid.rowSelection === 'none' || this.deleted || !this.grid.selectRowOnClick) {
             return;
         }
-        if (event.shiftKey && this.grid.rowSelection === 'multiple') {
+        if (event.shiftKey && this.grid.isMultiRowSelectionEnabled) {
             this.selectionService.selectMultipleRows(this.rowID, this.rowData, event);
             return;
         }
@@ -436,7 +436,7 @@ export class IgxRowDirective<T extends IgxGridBaseDirective & GridType> implemen
      */
     public onRowSelectorClick(event) {
         event.stopPropagation();
-        if (event.shiftKey && this.grid.rowSelection === 'multiple') {
+        if (event.shiftKey && this.grid.isMultiRowSelectionEnabled) {
             this.selectionService.selectMultipleRows(this.rowID, this.rowData, event);
             return;
         }

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

@@ -4,6 +4,7 @@ import { FilteringExpressionsTree } from '../../data-operations/filtering-expres
 import { IGridEditEventArgs, IGridEditDoneEventArgs } from '../common/events';
 import { GridType } from '../common/grid.interface';
 import { IgxGridBaseDirective } from '../grid/public_api';
+import { IgxTreeGridAPIService } from '../tree-grid/public_api';
 
 export interface GridSelectionRange {
     rowStart: number;
@@ -75,7 +76,7 @@ export class IgxRow {
 
     createDoneEditEventArgs(cachedRowData: any, event?: Event): IGridEditDoneEventArgs {
         const updatedData = this.grid.transactions.enabled ?
-        this.grid.transactions.getAggregatedValue(this.id, true) : this.grid.gridAPI.getRowData(this.id);
+            this.grid.transactions.getAggregatedValue(this.id, true) : this.grid.gridAPI.getRowData(this.id);
         const rowData = updatedData === null ? this.grid.gridAPI.getRowData(this.id) : updatedData;
         const args: IGridEditDoneEventArgs = {
             rowID: this.id,
@@ -131,7 +132,7 @@ export class IgxCell {
 
     createDoneEditEventArgs(value: any, event?: Event): IGridEditDoneEventArgs {
         const updatedData = this.grid.transactions.enabled ?
-        this.grid.transactions.getAggregatedValue(this.id.rowID, true) : this.rowData;
+            this.grid.transactions.getAggregatedValue(this.id.rowID, true) : this.rowData;
         const rowData = updatedData === null ? this.grid.gridAPI.getRowData(this.id.rowID) : updatedData;
         const args: IGridEditDoneEventArgs = {
             rowID: this.id.rowID,
@@ -228,7 +229,7 @@ export class IgxGridCRUDService {
             }
             /** Changing the reference with the new editable cell */
             const newCell = this.createCell(cell);
-            if (this.rowEditing)  {
+            if (this.rowEditing) {
                 const canceled = this.beginRowEdit(newCell, event);
                 if (!canceled) {
                     this.beginCellEdit(newCell, event);
@@ -394,6 +395,7 @@ export class IgxGridSelectionService {
     _ranges: Set<string> = new Set<string>();
     _selectionRange: Range;
     rowSelection: Set<any> = new Set<any>();
+    indeterminateRows: Set<any> = new Set<any>();
     columnSelection: Set<string> = new Set<string>();
     /**
      * @hidden @internal
@@ -759,12 +761,16 @@ export class IgxGridSelectionService {
         return this.rowSelection.size ? Array.from(this.rowSelection.keys()) : [];
     }
 
+    /** Returns array of the rows in indeterminate state. */
+    getIndeterminateRows(): Array<any> {
+        return this.indeterminateRows.size ? Array.from(this.indeterminateRows.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);
     }
 
@@ -773,6 +779,7 @@ export class IgxGridSelectionService {
         const allRowIDs = this.getRowIDs(this.allData);
         const addedRows = allRowIDs.filter((rID) => !this.isRowSelected(rID));
         const newSelection = this.rowSelection.size ? this.getSelectedRows().concat(addedRows) : addedRows;
+        this.indeterminateRows.clear();
         this.selectedRowsChange.next();
         this.emitRowSelectionEvent(newSelection, addedRows, [], event);
     }
@@ -824,6 +831,10 @@ export class IgxGridSelectionService {
         return this.rowSelection.size > 0 && this.rowSelection.has(rowID);
     }
 
+    isRowInIndeterminateState(rowID): boolean {
+        return this.indeterminateRows.size > 0 && this.indeterminateRows.has(rowID);
+    }
+
     /** Select range from last selected row to the current specified row. */
     selectMultipleRows(rowID, rowData, event?): void {
         this.allRowsSelected = undefined;
@@ -904,6 +915,7 @@ export class IgxGridSelectionService {
     /** Clear rowSelection and update checkbox state */
     public clearAllSelectedRows(): void {
         this.rowSelection.clear();
+        this.indeterminateRows.clear();
         this.clearHeaderCBState();
         this.selectedRowsChange.next();
     }
@@ -1041,7 +1053,7 @@ export class IgxGridSelectionService {
         this.columnSelection.clear();
     }
 
-    private areEqualCollections(first, second): boolean {
+    protected areEqualCollections(first, second): boolean {
         return first.length === second.length && new Set(first.concat(second)).size === first.length;
     }
 
@@ -1057,4 +1069,4 @@ export class IgxGridSelectionService {
 }
 
 export const isChromium = (): boolean => (/Chrom|e?ium/g.test(navigator.userAgent) ||
-                                        /Google Inc/g.test(navigator.vendor)) && !/Edge/g.test(navigator.userAgent);
+    /Google Inc/g.test(navigator.vendor)) && !/Edge/g.test(navigator.userAgent);

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

@@ -40,7 +40,7 @@ export class IgxTreeGridAPIService extends GridBaseAPIService<IgxTreeGridCompone
         const row = grid.records.get(rowID);
         if (row.expanded === expanded ||
             ((!row.children || !row.children.length) && (!grid.loadChildrenOnDemand ||
-            (grid.hasChildrenKey && !row.data[grid.hasChildrenKey])))) {
+                (grid.hasChildrenKey && !row.data[grid.hasChildrenKey])))) {
             return false;
         }
         return true;
@@ -84,10 +84,10 @@ export class IgxTreeGridAPIService extends GridBaseAPIService<IgxTreeGridCompone
     public deleteRowById(rowID: any) {
         const treeGrid = this.grid;
         const flatDataWithCascadeOnDeleteAndTransactions =
-        treeGrid.primaryKey &&
-        treeGrid.foreignKey &&
-        treeGrid.cascadeOnDelete &&
-        treeGrid.transactions.enabled;
+            treeGrid.primaryKey &&
+            treeGrid.foreignKey &&
+            treeGrid.cascadeOnDelete &&
+            treeGrid.transactions.enabled;
 
         if (flatDataWithCascadeOnDeleteAndTransactions) {
             treeGrid.transactions.startPending();
@@ -180,7 +180,7 @@ export class IgxTreeGridAPIService extends GridBaseAPIService<IgxTreeGridCompone
             if (!parentRecord) {
                 throw Error('Invalid parent row ID!');
             }
-            this.grid.summaryService.clearSummaryCache({rowID: parentRecord.rowID});
+            this.grid.summaryService.clearSummaryCache({ rowID: parentRecord.rowID });
             if (this.grid.primaryKey && this.grid.foreignKey) {
                 data[this.grid.foreignKey] = parentRowID;
                 super.addRowToData(data);

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts

@@ -1021,6 +1021,41 @@ describe('IgxTreeGrid - Expanding / Collapsing #tGrid', () => {
                 TreeGridFunctions.verifyTreeRowSelectionByIndex(fix, 4, true);
                 expect(treeGrid.selectedRows).toEqual([1, 6, 10]);
             });
+
+            it('check row selection within multipleCascade selection mode when expand a row', fakeAsync(() => {
+                treeGrid.rowSelection = GridSelectionMode.multipleCascade;
+                fix.detectChanges();
+
+                treeGrid.selectRows([1]);
+                fix.detectChanges();
+
+                expect(treeGrid.selectedRows).toEqual([1]);
+                TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 0, true, true);
+
+                treeGrid.expandRow(1);
+                fix.detectChanges();
+                tick(1000);
+                fix.detectChanges();
+
+                expect(treeGrid.rowList.length).toBe(5);
+                expect(treeGrid.selectedRows.length).toBe(3);
+                TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 0, true, true);
+                TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 1, true, true);
+                TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 2, true, true);
+
+                treeGrid.expandRow(2);
+                fix.detectChanges();
+                tick(1000);
+                fix.detectChanges();
+
+                expect(treeGrid.rowList.length).toBe(7);
+                expect(treeGrid.selectedRows.length).toBe(5);
+                TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 0, true, true);
+                TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 1, true, true);
+                TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 2, true, true);
+                TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 3, true, true);
+                TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 4, true, true);
+            }));
         });
 
         describe('ChildDataKey', () => {

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html

@@ -95,6 +95,7 @@
             [tabindex]="-1"
             [readonly]="true"
             [checked]="selected"
+            [indeterminate]="indeterminate"
             [disabled]="deleted"
             disableRipple="true"
             [disableTransitions]="grid.disableTransitions"

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

@@ -131,6 +131,13 @@ export class IgxTreeGridRowComponent extends IgxRowDirective<IgxTreeGridComponen
             this.treeRow.children && this.treeRow.children.length;
     }
 
+    /**
+     * @hidden
+     */
+    get indeterminate(): boolean {
+        return this.selectionService.isRowInIndeterminateState(this.rowID);
+    }
+
     /**
      * @hidden
      */