diff --git a/CHANGELOG.md b/CHANGELOG.md index f51d07245ef..280ee676eb4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,8 @@ All notable changes for each version of this project will be documented in this - Added `closeOnEscape` - with it, the dialog can be allowed or prevented from closing when `Esc` is pressed. - `IgxNavbar`: - **Breaking Changes** - The `igx-action-icon` has been renamed to `igx-navbar-action`. It should get renamed in your components via `ng update`; +- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid` + - **Breaking Change** - The `selectedRows` method is now an `@Input` property. Setting it to an array of Row IDs will update the grid's selection state, any previous selection will be cleared. Setting it to an empty array will clear the selection entirely. - `igxGrid` - Added `onScroll` event, which is emitted when the grid is scrolled vertically or horizontally. - Each grid now expose a default handling for boolean column types. The column will display `check` or `close` icon, instead of true/false by default. @@ -46,6 +48,7 @@ The following example shows how you can use the Indigo theme: } ``` + ### New Features - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid` - Introduced `showSummaryOnCollapse` grid property which allows you to control whether the summary row stays visible when the groupBy / parent row is collapsed. diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 20f72fcfa6b..a8ba563c92c 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -25,7 +25,9 @@ import { InjectionToken, Optional, DoCheck, - Directive + Directive, + OnChanges, + SimpleChanges } from '@angular/core'; import ResizeObserver from 'resize-observer-polyfill'; import 'igniteui-trial-watermark'; @@ -1093,6 +1095,26 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements filteringExpressionsTree: IFilteringExpressionsTree, done: (values: any[]) => void) => void; + /** + * Gets/Sets the current selection state. + * @remarks + * Represents the selected rows' IDs (primary key or rowData) + * @example + * ```html + * + * ``` + */ + @Input() + public set selectedRows(rowIDs: any[]) { + rowIDs.length > 0 + ? this.selectRows(rowIDs, true) + : this.deselectAllRows(); + } + + public get selectedRows(): any[] { + return this.selectionService.getSelectedRows(); + } + /** * Emitted when `IgxGridCellComponent` is clicked. * @remarks @@ -5291,18 +5313,6 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements [...this.unpinnedDataView, ...this.pinnedDataView]; } - /** - * Get current selection state. - * @example - * Returns an array with selected rows' IDs (primaryKey or rowData) - * ```typescript - * const selectedRows = this.grid.selectedRows(); - * ``` - */ - public selectedRows(): any[] { - return this.selectionService.getSelectedRows(); - } - /** * Select specified rows by ID. * @example diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts index c833ffdc7a9..700f451d997 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts @@ -36,7 +36,7 @@ describe('IgxGrid - Row Selection #grid', () => { RowSelectionWithoutPrimaryKeyComponent, SingleRowSelectionComponent, SelectionWithTransactionsComponent, - GridCustomSelectorsComponent, + GridCustomSelectorsComponent ], imports: [ NoopAnimationsModule, @@ -86,13 +86,13 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true); GridSelectionFunctions.verifyRowSelected(selectedRow); - expect(grid.selectedRows()).toEqual([1]); + expect(grid.selectedRows).toEqual([1]); GridFunctions.scrollTop(grid, 500); await wait(SCROLL_DEBOUNCETIME); fix.detectChanges(); - expect(grid.selectedRows()).toEqual([1]); + expect(grid.selectedRows).toEqual([1]); GridSelectionFunctions.verifyRowSelected(grid.rowList.first, false); GridFunctions.scrollTop(grid, 0); @@ -101,7 +101,7 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true); GridSelectionFunctions.verifyRowSelected(selectedRow); - expect(grid.selectedRows()).toEqual([1]); + expect(grid.selectedRows).toEqual([1]); })); it('Should have correct checkboxes position when scroll left', (async () => { @@ -130,7 +130,7 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true); GridSelectionFunctions.verifyRowsArraySelected(grid.rowList.toArray()); - expect(grid.selectedRows()).toEqual(allRowsArray); + expect(grid.selectedRows).toEqual(allRowsArray); expect(grid.onRowSelectionChange.emit).toHaveBeenCalledTimes(1); let args: IRowSelectionEventArgs = { added: allRowsArray, @@ -145,7 +145,7 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.clickHeaderRowCheckbox(fix); fix.detectChanges(); - expect(grid.selectedRows()).toEqual([]); + expect(grid.selectedRows).toEqual([]); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, false); GridSelectionFunctions.verifyRowsArraySelected(grid.rowList.toArray(), false); expect(grid.onRowSelectionChange.emit).toHaveBeenCalledTimes(2); @@ -209,7 +209,7 @@ describe('IgxGrid - Row Selection #grid', () => { }; expect(grid.onRowSelectionChange.emit).toHaveBeenCalledWith(args); - expect(grid.selectedRows()).toEqual([1]); + expect(grid.selectedRows).toEqual([1]); GridSelectionFunctions.verifyRowSelected(firstRow); GridSelectionFunctions.verifyRowSelected(secondRow, false); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true); @@ -220,7 +220,7 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyRowSelected(firstRow); GridSelectionFunctions.verifyRowSelected(secondRow); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true); - expect(grid.selectedRows()).toEqual([1, 2]); + expect(grid.selectedRows).toEqual([1, 2]); expect(grid.onRowSelectionChange.emit).toHaveBeenCalledTimes(2); args = { added: [2], @@ -238,7 +238,7 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyRowSelected(firstRow, false); GridSelectionFunctions.verifyRowSelected(secondRow); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true); - expect(grid.selectedRows()).toEqual([2]); + expect(grid.selectedRows).toEqual([2]); expect(grid.onRowSelectionChange.emit).toHaveBeenCalledTimes(3); args = { added: [], @@ -255,7 +255,7 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyRowSelected(firstRow, false); GridSelectionFunctions.verifyRowSelected(secondRow, false); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix); - expect(grid.selectedRows()).toEqual([]); + expect(grid.selectedRows).toEqual([]); expect(grid.onRowSelectionChange.emit).toHaveBeenCalledTimes(4); args = { added: [], @@ -278,7 +278,7 @@ describe('IgxGrid - Row Selection #grid', () => { fix.detectChanges(); GridSelectionFunctions.verifyRowSelected(firstRow); - expect(grid.selectedRows()).toEqual([2]); + expect(grid.selectedRows).toEqual([2]); expect(grid.onRowSelectionChange.emit).toHaveBeenCalledTimes(1); expect(grid.onRowSelectionChange.emit).toHaveBeenCalledWith({ added: [2], @@ -303,7 +303,7 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyRowSelected(firstRow, false); GridSelectionFunctions.verifyRowSelected(secondRow); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true); - expect(grid.selectedRows()).toEqual([3]); + expect(grid.selectedRows).toEqual([3]); expect(grid.onRowSelectionChange.emit).toHaveBeenCalledTimes(2); expect(grid.onRowSelectionChange.emit).toHaveBeenCalledWith({ added: [3], @@ -407,7 +407,7 @@ describe('IgxGrid - Row Selection #grid', () => { secondRow.nativeElement.dispatchEvent(mockEvent); fix.detectChanges(); - expect(grid.selectedRows()).toEqual([2, 3, 4, 5]); + expect(grid.selectedRows).toEqual([2, 3, 4, 5]); expect(grid.onRowSelectionChange.emit).toHaveBeenCalledTimes(2); expect(grid.onRowSelectionChange.emit).toHaveBeenCalledWith({ added: [3, 4, 5], @@ -694,13 +694,13 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, false); GridSelectionFunctions.verifyRowsArraySelected([]); - expect(grid.selectedRows()).toEqual([]); + expect(grid.selectedRows).toEqual([]); expect(grid.onRowSelectionChange.emit).toHaveBeenCalledTimes(0); GridSelectionFunctions.clickHeaderRowCheckbox(fix); fix.detectChanges(); - expect(grid.selectedRows()).toEqual([]); + expect(grid.selectedRows).toEqual([]); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, false); GridSelectionFunctions.verifyRowsArraySelected([]); expect(grid.onRowSelectionChange.emit).toHaveBeenCalledTimes(0); @@ -735,7 +735,7 @@ describe('IgxGrid - Row Selection #grid', () => { }; expect(grid.onRowSelectionChange.emit).toHaveBeenCalledWith(args); - expect(grid.selectedRows()).toEqual([1]); + expect(grid.selectedRows).toEqual([1]); GridSelectionFunctions.verifyRowSelected(firstRow); GridSelectionFunctions.verifyRowSelected(secondRow, false); @@ -745,7 +745,7 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyRowSelected(firstRow, false); GridSelectionFunctions.verifyRowSelected(secondRow); - expect(grid.selectedRows()).toEqual([2]); + expect(grid.selectedRows).toEqual([2]); expect(grid.onRowSelectionChange.emit).toHaveBeenCalledTimes(2); args = { added: [2], @@ -767,7 +767,7 @@ describe('IgxGrid - Row Selection #grid', () => { fix.detectChanges(); expect(grid.onRowSelectionChange.emit).toHaveBeenCalledTimes(1); - expect(grid.selectedRows()).toEqual([3]); + expect(grid.selectedRows).toEqual([3]); GridSelectionFunctions.verifyRowSelected(firstRow); // Click on a different row holding Ctrl @@ -776,7 +776,7 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyRowSelected(firstRow, false); GridSelectionFunctions.verifyRowSelected(secondRow); - expect(grid.selectedRows()).toEqual([1]); + expect(grid.selectedRows).toEqual([1]); expect(grid.onRowSelectionChange.emit).toHaveBeenCalledTimes(2); }); @@ -797,7 +797,7 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyRowSelected(firstRow); expect(grid.onRowSelectionChange.emit).toHaveBeenCalledTimes(1); - expect(grid.selectedRows()).toEqual([1]); + expect(grid.selectedRows).toEqual([1]); GridSelectionFunctions.verifyRowSelected(firstRow); GridSelectionFunctions.verifyRowSelected(secondRow, false); @@ -812,7 +812,7 @@ describe('IgxGrid - Row Selection #grid', () => { await wait(DEBOUNCETIME); expect(grid.onRowSelectionChange.emit).toHaveBeenCalledTimes(2); - expect(grid.selectedRows()).toEqual([2]); + expect(grid.selectedRows).toEqual([2]); GridSelectionFunctions.verifyRowSelected(firstRow, false); GridSelectionFunctions.verifyRowSelected(secondRow); @@ -822,7 +822,7 @@ describe('IgxGrid - Row Selection #grid', () => { await wait(DEBOUNCETIME); expect(grid.onRowSelectionChange.emit).toHaveBeenCalledTimes(3); - expect(grid.selectedRows()).toEqual([]); + expect(grid.selectedRows).toEqual([]); GridSelectionFunctions.verifyRowSelected(firstRow, false); GridSelectionFunctions.verifyRowSelected(secondRow, false); })); @@ -836,14 +836,14 @@ describe('IgxGrid - Row Selection #grid', () => { UIInteractions.simulateClickEvent(firstRow.nativeElement); fix.detectChanges(); - expect(grid.selectedRows()).toEqual([2]); + expect(grid.selectedRows).toEqual([2]); GridSelectionFunctions.verifyRowSelected(firstRow); // Click on other row holding Shift key secondRow.nativeElement.dispatchEvent(mockEvent); fix.detectChanges(); - expect(grid.selectedRows()).toEqual([5]); + expect(grid.selectedRows).toEqual([5]); expect(grid.onRowSelectionChange.emit).toHaveBeenCalledTimes(2); expect(grid.onRowSelectionChange.emit).toHaveBeenCalledWith({ added: [5], @@ -891,14 +891,14 @@ describe('IgxGrid - Row Selection #grid', () => { fix.detectChanges(); GridSelectionFunctions.verifyRowsArraySelected([grid.getRowByIndex(0), grid.getRowByIndex(2), grid.getRowByIndex(4)]); - expect(grid.selectedRows()).toEqual([1, 3, 5]); + expect(grid.selectedRows).toEqual([1, 3, 5]); grid.selectRows([1, 2, 4], false); fix.detectChanges(); GridSelectionFunctions.verifyRowsArraySelected([grid.getRowByIndex(0), grid.getRowByIndex(1), grid.getRowByIndex(2), grid.getRowByIndex(3), grid.getRowByIndex(4)]); - expect(grid.selectedRows()).toEqual([1, 3, 5, 2, 4]); + expect(grid.selectedRows).toEqual([1, 3, 5, 2, 4]); }); it('Should be able to cancel onRowSelectionChange event', () => { @@ -909,7 +909,7 @@ describe('IgxGrid - Row Selection #grid', () => { UIInteractions.simulateClickEvent(firstRow.nativeElement); fix.detectChanges(); GridSelectionFunctions.verifyRowSelected(firstRow); - expect(grid.selectedRows()).toEqual([1]); + expect(grid.selectedRows).toEqual([1]); // Cancel the event grid.onRowSelectionChange.subscribe((e: IRowSelectionEventArgs) => { @@ -920,21 +920,21 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.clickRowCheckbox(firstRow); fix.detectChanges(); GridSelectionFunctions.verifyRowSelected(firstRow); - expect(grid.selectedRows()).toEqual([1]); + expect(grid.selectedRows).toEqual([1]); // Click on other row checkbox GridSelectionFunctions.clickRowCheckbox(secondRow); fix.detectChanges(); GridSelectionFunctions.verifyRowSelected(firstRow); GridSelectionFunctions.verifyRowSelected(secondRow, false); - expect(grid.selectedRows()).toEqual([1]); + expect(grid.selectedRows).toEqual([1]); // Click on other row UIInteractions.simulateClickEvent(secondRow.nativeElement); fix.detectChanges(); GridSelectionFunctions.verifyRowSelected(firstRow); GridSelectionFunctions.verifyRowSelected(secondRow, false); - expect(grid.selectedRows()).toEqual([1]); + expect(grid.selectedRows).toEqual([1]); }); it('Should be able to change RowSelection to none', () => { @@ -1036,13 +1036,13 @@ describe('IgxGrid - Row Selection #grid', () => { const thirdRow = grid.getRowByIndex(2); const forthRow = grid.getRowByIndex(3); - expect(grid.selectedRows()).toEqual([]); + expect(grid.selectedRows).toEqual([]); GridSelectionFunctions.verifyRowsArraySelected(grid.rowList.toArray(), false); grid.deselectRows([1, 2, 3]); fix.detectChanges(); - expect(grid.selectedRows()).toEqual([]); + expect(grid.selectedRows).toEqual([]); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix); grid.selectRows([1, 2, 3], false); @@ -1050,7 +1050,7 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true); GridSelectionFunctions.verifyRowsArraySelected([firstRow, secondRow, thirdRow]); - expect(grid.selectedRows()).toEqual([1, 2, 3]); + expect(grid.selectedRows).toEqual([1, 2, 3]); grid.deselectRows([1, 3]); fix.detectChanges(); @@ -1064,7 +1064,7 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true); GridSelectionFunctions.verifyRowsArraySelected([firstRow, secondRow, thirdRow, forthRow]); - expect(grid.selectedRows()).toEqual([1, 2, 3, 4]); + expect(grid.selectedRows).toEqual([1, 2, 3, 4]); grid.selectRows([1], true); fix.detectChanges(); @@ -1072,7 +1072,7 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true); GridSelectionFunctions.verifyRowsArraySelected([secondRow, thirdRow, forthRow], false); GridSelectionFunctions.verifyRowSelected(firstRow); - expect(grid.selectedRows()).toEqual([1]); + expect(grid.selectedRows).toEqual([1]); grid.deselectRows([2, 3, 100]); fix.detectChanges(); @@ -1080,7 +1080,7 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true); GridSelectionFunctions.verifyRowsArraySelected([secondRow, thirdRow, forthRow], false); GridSelectionFunctions.verifyRowSelected(firstRow); - expect(grid.selectedRows()).toEqual([1]); + expect(grid.selectedRows).toEqual([1]); expect(grid.onRowSelectionChange.emit).toHaveBeenCalledTimes(0); grid.deselectRows([1]); @@ -1088,7 +1088,7 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyHeaderRowCheckboxState(fix); GridSelectionFunctions.verifyRowsArraySelected([firstRow, secondRow, thirdRow, forthRow], false); - expect(grid.selectedRows()).toEqual([]); + expect(grid.selectedRows).toEqual([]); expect(grid.onRowSelectionChange.emit).toHaveBeenCalledTimes(0); }); @@ -1115,14 +1115,14 @@ describe('IgxGrid - Row Selection #grid', () => { firstRow.selected = true; fix.detectChanges(); - expect(grid.selectedRows()).toEqual([1]); + expect(grid.selectedRows).toEqual([1]); GridSelectionFunctions.verifyRowSelected(firstRow); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true); firstRow.selected = false; fix.detectChanges(); - expect(grid.selectedRows()).toEqual([]); + expect(grid.selectedRows).toEqual([]); GridSelectionFunctions.verifyRowSelected(firstRow, false); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix); })); @@ -1148,7 +1148,7 @@ describe('IgxGrid - Row Selection #grid', () => { fix.detectChanges(); GridSelectionFunctions.verifyRowSelected(firstRow); - expect(grid.selectedRows()).toEqual([gridData[1]]); + expect(grid.selectedRows).toEqual([gridData[1]]); expect(grid.onRowSelectionChange.emit).toHaveBeenCalledTimes(1); let args: IRowSelectionEventArgs = { added: [gridData[1]], @@ -1163,7 +1163,7 @@ describe('IgxGrid - Row Selection #grid', () => { UIInteractions.simulateClickEvent(secondRow.nativeElement, true); fix.detectChanges(); - expect(grid.selectedRows()).toEqual([gridData[1], gridData[2], gridData[3], gridData[4]]); + expect(grid.selectedRows).toEqual([gridData[1], gridData[2], gridData[3], gridData[4]]); expect(grid.onRowSelectionChange.emit).toHaveBeenCalledTimes(2); args = { added: [gridData[2], gridData[3], gridData[4]], @@ -1187,13 +1187,13 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true); GridSelectionFunctions.verifyRowSelected(selectedRow); - expect(grid.selectedRows()).toEqual([gridData[0]]); + expect(grid.selectedRows).toEqual([gridData[0]]); GridFunctions.scrollTop(grid, 500); await wait(SCROLL_DEBOUNCETIME); fix.detectChanges(); - expect(grid.selectedRows()).toEqual([gridData[0]]); + expect(grid.selectedRows).toEqual([gridData[0]]); GridSelectionFunctions.verifyRowsArraySelected(grid.rowList, false); GridFunctions.scrollTop(grid, 0); @@ -1212,21 +1212,21 @@ describe('IgxGrid - Row Selection #grid', () => { grid.selectAllRows(); fix.detectChanges(); - expect(grid.selectedRows()).toEqual(gridData); + expect(grid.selectedRows).toEqual(gridData); GridSelectionFunctions.verifyRowsArraySelected(grid.rowList.toArray()); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true); grid.deselectRows([firstRow.rowID, secondRow.rowID, thirdRow.rowID]); fix.detectChanges(); - expect(grid.selectedRows()).toEqual([gridData[1], gridData[3], gridData[4], gridData[6]]); + expect(grid.selectedRows).toEqual([gridData[1], gridData[3], gridData[4], gridData[6]]); GridSelectionFunctions.verifyRowsArraySelected([firstRow, secondRow, thirdRow], false); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true); grid.selectRows([firstRow.rowID, secondRow.rowID, thirdRow.rowID], false); fix.detectChanges(); - expect(grid.selectedRows()) + expect(grid.selectedRows) .toEqual([gridData[1], gridData[3], gridData[4], gridData[6], gridData[0], gridData[2], gridData[5]]); GridSelectionFunctions.verifyRowsArraySelected(grid.rowList.toArray()); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true); @@ -1298,7 +1298,7 @@ describe('IgxGrid - Row Selection #grid', () => { grid.selectAllRows(); fix.detectChanges(); - expect(grid.selectedRows()).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); + expect(grid.selectedRows).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); }); }); @@ -1443,7 +1443,7 @@ describe('IgxGrid - Row Selection #grid', () => { fix.detectChanges(); expect(grid.getRowByKey(1)).toBeUndefined(); - expect(grid.selectedRows().includes(1)).toBe(false); + expect(grid.selectedRows.includes(1)).toBe(false); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix); grid.selectAllRows(); @@ -1457,20 +1457,20 @@ describe('IgxGrid - Row Selection #grid', () => { fix.detectChanges(); expect(grid.getRowByKey(2)).toBeUndefined(); - expect(grid.selectedRows().includes(2)).toBe(false); + expect(grid.selectedRows.includes(2)).toBe(false); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true); grid.deselectRows([3]); fix.detectChanges(); - expect(grid.selectedRows().includes(3)).toBe(false); + expect(grid.selectedRows.includes(3)).toBe(false); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true); grid.deleteRow(3); fix.detectChanges(); expect(grid.getRowByKey(3)).toBeUndefined(); - expect(grid.selectedRows().includes(3)).toBe(false); + expect(grid.selectedRows.includes(3)).toBe(false); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true); }); @@ -1482,7 +1482,7 @@ describe('IgxGrid - Row Selection #grid', () => { grid.addRow({ ProductID: 20, ProductName: 'test', InStock: true, UnitsInStock: 1, OrderDate: new Date('2019-03-01') }); fix.detectChanges(); - expect(grid.selectedRows().includes(20)).toBe(false); + expect(grid.selectedRows.includes(20)).toBe(false); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true); }); @@ -1492,14 +1492,14 @@ describe('IgxGrid - Row Selection #grid', () => { fix.detectChanges(); GridSelectionFunctions.verifyRowSelected(firstRow); - expect(grid.selectedRows()).toEqual([2]); + expect(grid.selectedRows).toEqual([2]); grid.updateCell(102, 2, 'ProductID'); fix.detectChanges(); firstRow = grid.getRowByIndex(1); expect(firstRow.rowID).toEqual(102); GridSelectionFunctions.verifyRowSelected(firstRow); - expect(grid.selectedRows()).toEqual([102]); + expect(grid.selectedRows).toEqual([102]); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true); }); @@ -1515,8 +1515,8 @@ describe('IgxGrid - Row Selection #grid', () => { const row = grid.getRowByIndex(2); GridSelectionFunctions.verifyRowSelected(row); expect(row.rowID).toEqual(103); - expect(grid.selectedRows().includes(3)).toBe(false); - expect(grid.selectedRows().includes(103)).toBe(true); + expect(grid.selectedRows.includes(3)).toBe(false); + expect(grid.selectedRows.includes(103)).toBe(true); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true); }); @@ -1555,7 +1555,7 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.verifyHeaderRowCheckboxState(fix); expect(grid.onRowSelectionChange.emit).toHaveBeenCalledTimes(0); - expect(grid.selectedRows()).toEqual([]); + expect(grid.selectedRows).toEqual([]); grid.clearFilter('ProductID'); fix.detectChanges(); @@ -1572,20 +1572,20 @@ describe('IgxGrid - Row Selection #grid', () => { fix.detectChanges(); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true); - expect(grid.selectedRows().length).toBe(19); + expect(grid.selectedRows.length).toBe(19); grid.filter('ProductID', 100, IgxNumberFilteringOperand.instance().condition('greaterThanOrEqualTo'), true); fix.detectChanges(); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix); expect(grid.rowList.length).toBe(0); - expect(grid.selectedRows().length).toBe(19); + expect(grid.selectedRows.length).toBe(19); grid.clearFilter(); fix.detectChanges(); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true); - expect(grid.selectedRows().length).toBe(19); + expect(grid.selectedRows.length).toBe(19); expect(grid.onRowSelectionChange.emit).toHaveBeenCalledTimes(1); }); @@ -1692,7 +1692,7 @@ describe('IgxGrid - Row Selection #grid', () => { tick(); expect(grid.rowList.length).toBe(9); - expect(grid.selectedRows().length).toBe(9); + expect(grid.selectedRows.length).toBe(9); GridSelectionFunctions.verifyHeaderRowCheckboxState(grid, true, false); grid.advancedFilteringExpressionsTree = null; @@ -1700,9 +1700,23 @@ describe('IgxGrid - Row Selection #grid', () => { tick(); expect(grid.rowList.length).toBe(19); - expect(grid.selectedRows().length).toBe(9); + expect(grid.selectedRows.length).toBe(9); GridSelectionFunctions.verifyHeaderRowCheckboxState(grid, false, true); })); + + 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(); + + fix.componentInstance.selectedRows = [4, 5, 6]; + fix.detectChanges(); + + expect(grid.getRowByIndex(3).selected).toBeTrue(); + expect(grid.getRowByIndex(0).selected).toBeFalse(); + }); }); describe('Integration with CRUD and transactions', () => { @@ -1729,7 +1743,7 @@ describe('IgxGrid - Row Selection #grid', () => { grid.deleteRowById(firstRow.rowID); fix.detectChanges(); - expect(grid.selectedRows()).toEqual([]); + expect(grid.selectedRows).toEqual([]); GridSelectionFunctions.verifyRowSelected(firstRow, false); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix); }); @@ -1746,17 +1760,17 @@ describe('IgxGrid - Row Selection #grid', () => { grid.selectAllRows(); fix.detectChanges(); - expect(grid.selectedRows().includes(firstRow.rowID)).toBe(false); - expect(grid.selectedRows().includes(secondRow.rowID)).toBe(false); - expect(grid.selectedRows().includes(thirdRow.rowID)).toBe(true); + expect(grid.selectedRows.includes(firstRow.rowID)).toBe(false); + expect(grid.selectedRows.includes(secondRow.rowID)).toBe(false); + expect(grid.selectedRows.includes(thirdRow.rowID)).toBe(true); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true); grid.selectRows([firstRow.rowID, secondRow.rowID, thirdRow.rowID]); fix.detectChanges(); - expect(grid.selectedRows().includes(firstRow.rowID)).toBe(true); - expect(grid.selectedRows().includes(secondRow.rowID)).toBe(true); + expect(grid.selectedRows.includes(firstRow.rowID)).toBe(true); + expect(grid.selectedRows.includes(secondRow.rowID)).toBe(true); GridSelectionFunctions.verifyRowSelected(firstRow); GridSelectionFunctions.verifyRowSelected(secondRow); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true); @@ -1775,14 +1789,14 @@ describe('IgxGrid - Row Selection #grid', () => { grid.deleteRowById(firstRow.rowID); fix.detectChanges(); - expect(grid.selectedRows().length).toEqual(7); + expect(grid.selectedRows.length).toEqual(7); GridSelectionFunctions.verifyRowSelected(firstRow, false); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true); grid.deselectRows([secondRow.rowID]); fix.detectChanges(); - expect(grid.selectedRows().length).toEqual(6); + expect(grid.selectedRows.length).toEqual(6); GridSelectionFunctions.verifyRowSelected(firstRow, false); GridSelectionFunctions.verifyRowSelected(secondRow, false); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true); @@ -1790,7 +1804,7 @@ describe('IgxGrid - Row Selection #grid', () => { grid.deleteRowById(secondRow.rowID); fix.detectChanges(); - expect(grid.selectedRows().length).toEqual(6); + expect(grid.selectedRows.length).toEqual(6); GridSelectionFunctions.verifyRowSelected(firstRow, false); GridSelectionFunctions.verifyRowSelected(secondRow, false); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true); @@ -1806,21 +1820,21 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.clickRowCheckbox(firstRow); fix.detectChanges(); - expect(grid.selectedRows()).toEqual([]); + expect(grid.selectedRows).toEqual([]); GridSelectionFunctions.verifyRowSelected(firstRow, false); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix); UIInteractions.simulateClickEvent(firstRow.nativeElement); fix.detectChanges(); - expect(grid.selectedRows()).toEqual([]); + expect(grid.selectedRows).toEqual([]); GridSelectionFunctions.verifyRowSelected(firstRow, false); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix); UIInteractions.simulateClickEvent(secondRow.nativeElement); fix.detectChanges(); - expect(grid.selectedRows()).toEqual([secondRow.rowID]); + expect(grid.selectedRows).toEqual([secondRow.rowID]); GridSelectionFunctions.verifyRowSelected(firstRow, false); GridSelectionFunctions.verifyRowSelected(secondRow); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true); @@ -1828,7 +1842,7 @@ describe('IgxGrid - Row Selection #grid', () => { UIInteractions.simulateClickEvent(firstRow.nativeElement, true); fix.detectChanges(); - expect(grid.selectedRows()).toEqual([secondRow.rowID]); + expect(grid.selectedRows).toEqual([secondRow.rowID]); GridSelectionFunctions.verifyRowSelected(firstRow, false); GridSelectionFunctions.verifyRowSelected(secondRow); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true); @@ -1836,7 +1850,7 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.clickHeaderRowCheckbox(fix); fix.detectChanges(); - expect(grid.selectedRows().includes(firstRow.rowID)).toBe(false); + expect(grid.selectedRows.includes(firstRow.rowID)).toBe(false); GridSelectionFunctions.verifyRowSelected(firstRow, false); GridSelectionFunctions.verifyRowSelected(secondRow); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true); @@ -1849,28 +1863,28 @@ describe('IgxGrid - Row Selection #grid', () => { fix.detectChanges(); - expect(grid.selectedRows().includes(firstRow.rowID)).toBe(true); + expect(grid.selectedRows.includes(firstRow.rowID)).toBe(true); GridSelectionFunctions.verifyRowSelected(firstRow); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true); grid.deleteRowById(firstRow.rowID); fix.detectChanges(); - expect(grid.selectedRows().includes(firstRow.rowID)).toBe(false); + expect(grid.selectedRows.includes(firstRow.rowID)).toBe(false); GridSelectionFunctions.verifyRowSelected(firstRow, false); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true); grid.transactions.undo(); fix.detectChanges(); - expect(grid.selectedRows().length).toBe(7); + expect(grid.selectedRows.length).toBe(7); GridSelectionFunctions.verifyRowSelected(firstRow, false); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true); grid.transactions.redo(); fix.detectChanges(); - expect(grid.selectedRows().includes(firstRow.rowID)).toBe(false); + expect(grid.selectedRows.includes(firstRow.rowID)).toBe(false); GridSelectionFunctions.verifyRowSelected(firstRow, false); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true); }); @@ -1889,13 +1903,13 @@ describe('IgxGrid - Row Selection #grid', () => { const addedRow = grid.getRowByKey(112); GridSelectionFunctions.verifyRowSelected(addedRow, false); - expect(grid.selectedRows().includes(112)).toBe(false); + expect(grid.selectedRows.includes(112)).toBe(false); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true); GridSelectionFunctions.clickRowCheckbox(addedRow); fix.detectChanges(); - expect(grid.selectedRows().includes(112)).toBe(true); + expect(grid.selectedRows.includes(112)).toBe(true); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true); GridSelectionFunctions.verifyRowSelected(addedRow); }); @@ -1914,7 +1928,7 @@ describe('IgxGrid - Row Selection #grid', () => { GridSelectionFunctions.clickHeaderRowCheckbox(fix); fix.detectChanges(); - expect(grid.selectedRows().includes(112)).toBe(true); + expect(grid.selectedRows.includes(112)).toBe(true); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true); GridSelectionFunctions.verifyRowSelected(addedRow); }); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts index 72ff820965b..e1d73a74f66 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts @@ -1022,7 +1022,7 @@ describe('IgxGrid - GroupBy #grid', () => { grid.selectAllRows(); fix.detectChanges(); - expect(grid.selectedRows().length).toEqual(8); + expect(grid.selectedRows.length).toEqual(8); let rows = fix.debugElement.queryAll(By.css('.igx-grid__tr--selected')); for (const r of rows) { expect(r.componentInstance instanceof IgxGridRowComponent).toBe(true); @@ -1030,12 +1030,12 @@ describe('IgxGrid - GroupBy #grid', () => { grid.deselectAllRows(); fix.detectChanges(); - expect(grid.selectedRows().length).toEqual(0); + expect(grid.selectedRows.length).toEqual(0); GridSelectionFunctions.clickHeaderRowCheckbox(fix); fix.detectChanges(); - expect(grid.selectedRows().length).toEqual(8); + expect(grid.selectedRows.length).toEqual(8); rows = fix.debugElement.queryAll(By.css('.igx-grid__tr--selected')); for (const r of rows) { @@ -1600,7 +1600,7 @@ describe('IgxGrid - GroupBy #grid', () => { GridSelectionFunctions.clickRowCheckbox(rows[0].element); await wait(100); grid.cdr.detectChanges(); - expect(grid.selectedRows().length).toEqual(1); + expect(grid.selectedRows.length).toEqual(1); GridSelectionFunctions.verifyRowSelected(rows[0]); }); diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.selection.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.selection.spec.ts index b10423e6275..196fcda03b1 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.selection.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.selection.spec.ts @@ -143,7 +143,7 @@ describe('IgxHierarchicalGrid selection #hGrid', () => { const childGridLevel2 = childGridLevel1.hgridAPI.getChildGrids(false)[0]; hierarchicalGrid.selectAllRows(); - childGridLevel1.selectRows(['00']); + childGridLevel1.selectRows = ['00']; fix.detectChanges(); // Change row selection for grids @@ -153,14 +153,14 @@ describe('IgxHierarchicalGrid selection #hGrid', () => { fix.detectChanges(); expect(hierarchicalGrid.rowSelection).toBe(GridSelectionMode.none); - expect(hierarchicalGrid.selectedRows()).toEqual([]); + expect(hierarchicalGrid.selectedRows).toEqual([]); GridSelectionFunctions.verifyHeaderRowHasCheckbox(hierarchicalGrid, false, false); for (const r of hierarchicalGrid.dataRowList.toArray()) { GridSelectionFunctions.verifyRowHasCheckbox(r.nativeElement, false, false); } expect(childGridLevel1.rowSelection).toBe(GridSelectionMode.multiple); - expect(childGridLevel1.selectedRows()).toEqual([]); + expect(childGridLevel1.selectedRows).toEqual([]); GridSelectionFunctions.verifyHeaderRowHasCheckbox(childGridLevel1); for (const r of childGridLevel1.dataRowList.toArray()) { GridSelectionFunctions.verifyRowHasCheckbox(r.nativeElement); @@ -168,7 +168,7 @@ describe('IgxHierarchicalGrid selection #hGrid', () => { GridSelectionFunctions.verifyHeaderAndRowCheckBoxesAlignment(childGridLevel1); expect(childGridLevel2.rowSelection).toBe(GridSelectionMode.single); - expect(childGridLevel2.selectedRows()).toEqual([]); + expect(childGridLevel2.selectedRows).toEqual([]); GridSelectionFunctions.verifyHeaderRowHasCheckbox(childGridLevel2, false); for (const r of childGridLevel2.dataRowList.toArray()) { GridSelectionFunctions.verifyRowHasCheckbox(r.nativeElement); @@ -305,7 +305,7 @@ describe('IgxHierarchicalGrid selection #hGrid', () => { fix.detectChanges(); GridSelectionFunctions.verifyRowSelected(firstRow); - expect(hierarchicalGrid.selectedRows()).toEqual(['0']); + expect(hierarchicalGrid.selectedRows).toEqual(['0']); const fourthRow = hierarchicalGrid.getRowByIndex(4); UIInteractions.simulateClickEvent(fourthRow.nativeElement, true); @@ -313,11 +313,11 @@ describe('IgxHierarchicalGrid selection #hGrid', () => { GridSelectionFunctions.verifyRowsArraySelected( [firstRow, hierarchicalGrid.getRowByIndex(2), hierarchicalGrid.getRowByIndex(3), fourthRow]); - expect(hierarchicalGrid.selectedRows()).toEqual(['0', '1', '2', '3']); + expect(hierarchicalGrid.selectedRows).toEqual(['0', '1', '2', '3']); // Verify no rows are selected in the child grid const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0]; - expect(childGrid.selectedRows()).toEqual([]); + expect(childGrid.selectedRows).toEqual([]); for (const r of childGrid.dataRowList.toArray()) { GridSelectionFunctions.verifyRowSelected(r, false); } @@ -335,27 +335,27 @@ describe('IgxHierarchicalGrid selection #hGrid', () => { fix.detectChanges(); GridSelectionFunctions.verifyRowSelected(firstRow); - expect(hierarchicalGrid.selectedRows()).toEqual(['0']); + expect(hierarchicalGrid.selectedRows).toEqual(['0']); const fourthRow = hierarchicalGrid.getRowByIndex(4); UIInteractions.simulateClickEvent(fourthRow.nativeElement, false, true); fix.detectChanges(); GridSelectionFunctions.verifyRowsArraySelected([firstRow, fourthRow]); - expect(hierarchicalGrid.selectedRows()).toEqual(['0', '3']); + expect(hierarchicalGrid.selectedRows).toEqual(['0', '3']); // Click on a row in the child grid const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0]; - expect(childGrid.selectedRows()).toEqual([]); + expect(childGrid.selectedRows).toEqual([]); const childGridFirstRow = childGrid.getRowByIndex(2); UIInteractions.simulateClickEvent(childGridFirstRow.nativeElement, false, true); fix.detectChanges(); GridSelectionFunctions.verifyRowsArraySelected([firstRow, fourthRow]); - expect(hierarchicalGrid.selectedRows()).toEqual(['0', '3']); + expect(hierarchicalGrid.selectedRows).toEqual(['0', '3']); GridSelectionFunctions.verifyRowSelected(childGridFirstRow); - expect(childGrid.selectedRows()).toEqual(['02']); + expect(childGrid.selectedRows).toEqual(['02']); }); it('should able to select only one row when rowSelection is single', () => { @@ -366,7 +366,7 @@ describe('IgxHierarchicalGrid selection #hGrid', () => { // Click on a row in the child grid const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0]; - expect(childGrid.selectedRows()).toEqual([]); + expect(childGrid.selectedRows).toEqual([]); const firstRow = childGrid.getRowByIndex(0); const secondRow = childGrid.getRowByIndex(2); @@ -375,7 +375,7 @@ describe('IgxHierarchicalGrid selection #hGrid', () => { fix.detectChanges(); GridSelectionFunctions.verifyRowSelected(firstRow); - expect(childGrid.selectedRows()).toEqual(['00']); + expect(childGrid.selectedRows).toEqual(['00']); // Click on second row holding Ctrl UIInteractions.simulateClickEvent(secondRow.nativeElement, false, true); @@ -383,7 +383,7 @@ describe('IgxHierarchicalGrid selection #hGrid', () => { GridSelectionFunctions.verifyRowSelected(firstRow, false); GridSelectionFunctions.verifyRowSelected(secondRow); - expect(childGrid.selectedRows()).toEqual(['02']); + expect(childGrid.selectedRows).toEqual(['02']); // Click on first row holding Shift key UIInteractions.simulateClickEvent(firstRow.nativeElement, true); @@ -391,7 +391,7 @@ describe('IgxHierarchicalGrid selection #hGrid', () => { GridSelectionFunctions.verifyRowSelected(firstRow); GridSelectionFunctions.verifyRowSelected(secondRow, false); - expect(childGrid.selectedRows()).toEqual(['00']); + expect(childGrid.selectedRows).toEqual(['00']); // Click on second row checkbox GridSelectionFunctions.clickRowCheckbox(secondRow); @@ -399,7 +399,7 @@ describe('IgxHierarchicalGrid selection #hGrid', () => { GridSelectionFunctions.verifyRowSelected(firstRow, false); GridSelectionFunctions.verifyRowSelected(secondRow); - expect(childGrid.selectedRows()).toEqual(['02']); + expect(childGrid.selectedRows).toEqual(['02']); }); it('should able to select/deselect all rows by clicking on the header checkbox', () => { @@ -421,13 +421,13 @@ describe('IgxHierarchicalGrid selection #hGrid', () => { GridSelectionFunctions.clickHeaderRowCheckbox(hierarchicalGrid); fix.detectChanges(); - expect(hierarchicalGrid.selectedRows()).toEqual(['0', '1', '2', '3', '4']); + expect(hierarchicalGrid.selectedRows).toEqual(['0', '1', '2', '3', '4']); GridSelectionFunctions.verifyHeaderRowCheckboxState(hierarchicalGrid, true); const childGrid1 = hierarchicalGrid.hgridAPI.getChildGrids(false)[0]; const childGrid2 = hierarchicalGrid.hgridAPI.getChildGrids(false)[1]; - expect(childGrid1.selectedRows()).toEqual([]); - expect(childGrid2.selectedRows()).toEqual([]); + expect(childGrid1.selectedRows).toEqual([]); + expect(childGrid2.selectedRows).toEqual([]); GridSelectionFunctions.verifyHeaderRowCheckboxState(childGrid1); GridSelectionFunctions.verifyHeaderRowCheckboxState(childGrid2); @@ -435,36 +435,36 @@ describe('IgxHierarchicalGrid selection #hGrid', () => { GridSelectionFunctions.clickHeaderRowCheckbox(childGrid1); fix.detectChanges(); - expect(hierarchicalGrid.selectedRows()).toEqual(['0', '1', '2', '3', '4']); + expect(hierarchicalGrid.selectedRows).toEqual(['0', '1', '2', '3', '4']); GridSelectionFunctions.verifyHeaderRowCheckboxState(hierarchicalGrid, true); - expect(childGrid1.selectedRows()).toEqual(['00', '01', '02']); + expect(childGrid1.selectedRows).toEqual(['00', '01', '02']); GridSelectionFunctions.verifyHeaderRowCheckboxState(childGrid1, true); - expect(childGrid2.selectedRows()).toEqual([]); + expect(childGrid2.selectedRows).toEqual([]); GridSelectionFunctions.verifyHeaderRowCheckboxState(childGrid2); // Deselect all rows in parent GridSelectionFunctions.clickHeaderRowCheckbox(hierarchicalGrid); fix.detectChanges(); - expect(hierarchicalGrid.selectedRows()).toEqual([]); + expect(hierarchicalGrid.selectedRows).toEqual([]); GridSelectionFunctions.verifyHeaderRowCheckboxState(hierarchicalGrid); - expect(childGrid1.selectedRows()).toEqual(['00', '01', '02']); + expect(childGrid1.selectedRows).toEqual(['00', '01', '02']); GridSelectionFunctions.verifyHeaderRowCheckboxState(childGrid1, true); - expect(childGrid2.selectedRows()).toEqual([]); + expect(childGrid2.selectedRows).toEqual([]); GridSelectionFunctions.verifyHeaderRowCheckboxState(childGrid2); // Deselect all rows in child GridSelectionFunctions.clickHeaderRowCheckbox(childGrid1); fix.detectChanges(); - expect(hierarchicalGrid.selectedRows()).toEqual([]); + expect(hierarchicalGrid.selectedRows).toEqual([]); GridSelectionFunctions.verifyHeaderRowCheckboxState(hierarchicalGrid); - expect(childGrid1.selectedRows()).toEqual([]); + expect(childGrid1.selectedRows).toEqual([]); GridSelectionFunctions.verifyHeaderRowCheckboxState(childGrid1); - expect(childGrid2.selectedRows()).toEqual([]); + expect(childGrid2.selectedRows).toEqual([]); GridSelectionFunctions.verifyHeaderRowCheckboxState(childGrid2); }); @@ -481,7 +481,7 @@ describe('IgxHierarchicalGrid selection #hGrid', () => { }); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true); - expect(hierarchicalGrid.selectedRows()).toEqual(['0', '1', '2', '3', '4']); + expect(hierarchicalGrid.selectedRows).toEqual(['0', '1', '2', '3', '4']); // Unselect a row GridSelectionFunctions.clickRowCheckbox(firstRow); @@ -489,7 +489,7 @@ describe('IgxHierarchicalGrid selection #hGrid', () => { GridSelectionFunctions.verifyRowSelected(firstRow, false); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true); - expect(hierarchicalGrid.selectedRows()).toEqual(['1', '2', '3', '4']); + expect(hierarchicalGrid.selectedRows).toEqual(['1', '2', '3', '4']); // Click on a row secondRow.onClick(UIInteractions.getMouseEvent('click')); @@ -497,7 +497,7 @@ describe('IgxHierarchicalGrid selection #hGrid', () => { GridSelectionFunctions.verifyRowSelected(secondRow); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true); - expect(hierarchicalGrid.selectedRows()).toEqual(['1']); + expect(hierarchicalGrid.selectedRows).toEqual(['1']); }); it('should retain selected row when filtering', () => { @@ -579,7 +579,7 @@ describe('IgxHierarchicalGrid selection #hGrid', () => { GridSelectionFunctions.verifyRowSelected(firstRow, false); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix); - expect(hierarchicalGrid.selectedRows()).toEqual([]); + expect(hierarchicalGrid.selectedRows).toEqual([]); // Click on deleted row firstRow.onClick(UIInteractions.getMouseEvent('click')); @@ -588,7 +588,7 @@ describe('IgxHierarchicalGrid selection #hGrid', () => { GridSelectionFunctions.verifyRowSelected(firstRow, false); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix); - expect(hierarchicalGrid.selectedRows()).toEqual([]); + expect(hierarchicalGrid.selectedRows).toEqual([]); // Click on checkbox for deleted row firstRow.onRowSelectorClick(UIInteractions.getMouseEvent('click')); @@ -596,7 +596,7 @@ describe('IgxHierarchicalGrid selection #hGrid', () => { GridSelectionFunctions.verifyRowSelected(firstRow, false); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix); - expect(hierarchicalGrid.selectedRows()).toEqual([]); + expect(hierarchicalGrid.selectedRows).toEqual([]); // Select all rows hierarchicalGrid.selectAllRows(); @@ -604,11 +604,11 @@ describe('IgxHierarchicalGrid selection #hGrid', () => { GridSelectionFunctions.verifyRowSelected(firstRow, false); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true); - expect(hierarchicalGrid.selectedRows()).toEqual(['1', '2', '3', '4']); + expect(hierarchicalGrid.selectedRows).toEqual(['1', '2', '3', '4']); // Click on a row in the child grid const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0]; - expect(childGrid.selectedRows()).toEqual([]); + expect(childGrid.selectedRows).toEqual([]); const childGridFirstRow = childGrid.getRowByIndex(0); childGridFirstRow.onClick(UIInteractions.getMouseEvent('click', false, false, true)); @@ -617,8 +617,8 @@ describe('IgxHierarchicalGrid selection #hGrid', () => { GridSelectionFunctions.verifyRowSelected(firstRow, false); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true); - expect(hierarchicalGrid.selectedRows()).toEqual(['1', '2', '3', '4']); - expect(childGrid.selectedRows()).toEqual(['00']); + expect(hierarchicalGrid.selectedRows).toEqual(['1', '2', '3', '4']); + expect(childGrid.selectedRows).toEqual(['00']); })); it('should be able to select added row', () => { @@ -635,13 +635,13 @@ describe('IgxHierarchicalGrid selection #hGrid', () => { fix.detectChanges(); GridSelectionFunctions.verifyHeaderRowCheckboxState(hierarchicalGrid, true); - expect(hierarchicalGrid.selectedRows()).toEqual(['0', '1', '2', '3', '4']); + expect(hierarchicalGrid.selectedRows).toEqual(['0', '1', '2', '3', '4']); hierarchicalGrid.addRow({ ID: '5', ChildLevels: 3, ProductName: 'New Product' }); fix.detectChanges(); GridSelectionFunctions.verifyHeaderRowCheckboxState(hierarchicalGrid, false, true); - expect(hierarchicalGrid.selectedRows()).toEqual(['0', '1', '2', '3', '4']); + expect(hierarchicalGrid.selectedRows).toEqual(['0', '1', '2', '3', '4']); let lastRow = hierarchicalGrid.getRowByIndex(6); GridSelectionFunctions.verifyRowSelected(lastRow, false); @@ -649,11 +649,11 @@ describe('IgxHierarchicalGrid selection #hGrid', () => { fix.detectChanges(); GridSelectionFunctions.verifyHeaderRowCheckboxState(hierarchicalGrid, true); - expect(hierarchicalGrid.selectedRows()).toEqual(['0', '1', '2', '3', '4', '5']); + expect(hierarchicalGrid.selectedRows).toEqual(['0', '1', '2', '3', '4', '5']); // Add row in child grid const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0]; - expect(childGrid.selectedRows()).toEqual([]); + expect(childGrid.selectedRows).toEqual([]); childGrid.addRow({ ID: '03', ChildLevels: 2, ProductName: 'New Product' }); fix.detectChanges(); @@ -661,7 +661,7 @@ describe('IgxHierarchicalGrid selection #hGrid', () => { fix.detectChanges(); GridSelectionFunctions.verifyHeaderRowCheckboxState(childGrid, true); - expect(childGrid.selectedRows()).toEqual(['00', '01', '02', '03']); + expect(childGrid.selectedRows).toEqual(['00', '01', '02', '03']); lastRow = childGrid.getRowByIndex(3); GridSelectionFunctions.verifyRowSelected(lastRow); }); @@ -674,6 +674,20 @@ describe('IgxHierarchicalGrid selection #hGrid', () => { // check row is not selected GridSelectionFunctions.verifyRowSelected(firstRow, false); }); + + it('Should bind selectedRows properly', () => { + rowIsland1.rowSelection = GridSelectionMode.multiple; + fix.componentInstance.selectedRows = ['0', '2', '3']; + fix.detectChanges(); + expect(hierarchicalGrid.getRowByKey('0').selected).toBeTrue(); + expect(hierarchicalGrid.getRowByKey('1').selected).toBeFalse(); + + fix.componentInstance.selectedRows = ['2']; + fix.detectChanges(); + + expect(hierarchicalGrid.getRowByKey('2').selected).toBeTrue(); + expect(hierarchicalGrid.getRowByKey('0').selected).toBeFalse(); + }); }); describe('Row Selection CRUD', () => { @@ -690,13 +704,13 @@ describe('IgxHierarchicalGrid selection #hGrid', () => { fix.detectChanges(); GridSelectionFunctions.verifyHeaderRowCheckboxState(hierarchicalGrid, true); - expect(hierarchicalGrid.selectedRows()).toEqual(['0', '1', '2', '3', '4']); + expect(hierarchicalGrid.selectedRows).toEqual(['0', '1', '2', '3', '4']); hierarchicalGrid.deleteRow('1'); fix.detectChanges(); GridSelectionFunctions.verifyHeaderRowCheckboxState(hierarchicalGrid, true); - expect(hierarchicalGrid.selectedRows()).toEqual(['0', '2', '3', '4']); + expect(hierarchicalGrid.selectedRows).toEqual(['0', '2', '3', '4']); expect(hierarchicalGrid.dataRowList.length).toEqual(4); const firstRow = hierarchicalGrid.getRowByIndex(0); @@ -704,14 +718,14 @@ describe('IgxHierarchicalGrid selection #hGrid', () => { fix.detectChanges(); GridSelectionFunctions.verifyHeaderRowCheckboxState(hierarchicalGrid, false, true); - expect(hierarchicalGrid.selectedRows()).toEqual(['2', '3', '4']); + expect(hierarchicalGrid.selectedRows).toEqual(['2', '3', '4']); hierarchicalGrid.deleteRow('0'); fix.detectChanges(); expect(hierarchicalGrid.dataRowList.length).toEqual(3); GridSelectionFunctions.verifyHeaderRowCheckboxState(hierarchicalGrid, true); - expect(hierarchicalGrid.selectedRows()).toEqual(['2', '3', '4']); + expect(hierarchicalGrid.selectedRows).toEqual(['2', '3', '4']); }); it('should be able to select added row', () => { diff --git a/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts b/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts index 6aa187d974d..7517f85ae73 100644 --- a/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts +++ b/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts @@ -604,6 +604,7 @@ export class IgxGridSelectionService { 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); } @@ -639,7 +640,7 @@ export class IgxGridSelectionService { /** Select specified rows. No event is emitted. */ selectRowsWithNoEvent(rowIDs: any[], clearPrevSelection?): void { if (clearPrevSelection) { this.rowSelection.clear(); } - rowIDs.forEach(rowID => { this.rowSelection.add(rowID); }); + rowIDs.forEach(rowID => this.rowSelection.add(rowID)); this.allRowsSelected = undefined; } diff --git a/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts b/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts index fc75ebcc449..4fa33780bdd 100644 --- a/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts @@ -363,7 +363,7 @@ describe('IgxGridState - input properties #grid', () => { state.setState(rowSelectionState); gridState = state.getState(false, 'rowSelection'); - HelperFunctions.verifyRowSelection(grid.selectedRows(), gridState as IGridState); + HelperFunctions.verifyRowSelection(grid.selectedRows, gridState as IGridState); gridState = state.getState(true, 'rowSelection'); expect(gridState).toBe(rowSelectionState); }); @@ -382,7 +382,7 @@ describe('IgxGridState - input properties #grid', () => { state.setState(rowSelectionStateObject); gridState = state.getState(false, 'rowSelection'); - HelperFunctions.verifyRowSelection(grid.selectedRows(), gridState as IGridState); + HelperFunctions.verifyRowSelection(grid.selectedRows, gridState as IGridState); gridState = state.getState(true, 'rowSelection'); expect(gridState).toBe(rowSelectionState); }); diff --git a/projects/igniteui-angular/src/lib/grids/state.directive.ts b/projects/igniteui-angular/src/lib/grids/state.directive.ts index 408beb6c13c..248f1382279 100644 --- a/projects/igniteui-angular/src/lib/grids/state.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/state.directive.ts @@ -235,7 +235,7 @@ export class IgxGridStateDirective { }, rowSelection: { getFeatureState(context: IgxGridStateDirective): IGridState { - const selection = context.currGrid.selectedRows(); + const selection = context.currGrid.selectedRows; return { rowSelection: selection }; }, restoreFeatureState(context: IgxGridStateDirective, state: any[]): void { diff --git a/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts b/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts index 637d4dda16e..5b49b65bbed 100644 --- a/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts @@ -384,10 +384,10 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => { state.setState(rowSelectionState); gridState = state.getState(false, ['rowSelection', 'rowIslands']); - HelperFunctions.verifyRowSelection(grid.selectedRows(), gridState as IGridState); + HelperFunctions.verifyRowSelection(grid.selectedRows, gridState as IGridState); const gridsCollection = HelperFunctions.getChildGridsCollection(grid, gridState); gridsCollection.forEach(childGrid => { - HelperFunctions.verifyRowSelection(childGrid.grid.selectedRows(), childGrid.state); + HelperFunctions.verifyRowSelection(childGrid.grid.selectedRows, childGrid.state); }); gridState = state.getState(true, ['rowSelection', 'rowIslands']); expect(gridState).toBe(rowSelectionState); diff --git a/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts b/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts index 187c3ce60b9..ae4c0fb60ad 100644 --- a/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts @@ -206,7 +206,7 @@ describe('IgxTreeGridState - input properties #tGrid', () => { state.setState(rowSelectionState); gridState = state.getState(false, 'rowSelection'); - HelperFunctions.verifyRowSelection(grid.selectedRows(), gridState as IGridState); + HelperFunctions.verifyRowSelection(grid.selectedRows, gridState as IGridState); gridState = state.getState(true, 'rowSelection'); expect(gridState).toBe(rowSelectionState); }); diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts index c59f2a1d601..d83a2fb61f9 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts @@ -999,7 +999,7 @@ describe('IgxTreeGrid - Expanding / Collapsing #tGrid', () => { fix.detectChanges(); TreeGridFunctions.verifyHeaderCheckboxSelection(fix, true); - expect(treeGrid.selectedRows()).toEqual([1, 6, 10]); + expect(treeGrid.selectedRows).toEqual([1, 6, 10]); let rows = TreeGridFunctions.getAllRows(fix); const row = rows[0]; @@ -1019,7 +1019,7 @@ describe('IgxTreeGrid - Expanding / Collapsing #tGrid', () => { TreeGridFunctions.verifyTreeRowSelectionByIndex(fix, 2, false); TreeGridFunctions.verifyTreeRowSelectionByIndex(fix, 3, true); TreeGridFunctions.verifyTreeRowSelectionByIndex(fix, 4, true); - expect(treeGrid.selectedRows()).toEqual([1, 6, 10]); + expect(treeGrid.selectedRows).toEqual([1, 6, 10]); }); }); diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-integration.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-integration.spec.ts index b6429db07a2..789d5fc7ebc 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-integration.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-integration.spec.ts @@ -974,7 +974,7 @@ describe('IgxTreeGrid - Integration #tGrid', () => { }; expect(trans.add).toHaveBeenCalledWith(transParams); - treeGrid.deleteRowById(treeGrid.selectedRows()[0]); + treeGrid.deleteRowById(treeGrid.selectedRows[0]); fix.detectChanges(); expect(treeGrid.rowList.filter(r => r.rowID === addedRowId).length).toEqual(0); expect(treeGrid.transactions.getTransactionLog().length).toEqual(2); @@ -1027,7 +1027,7 @@ describe('IgxTreeGrid - Integration #tGrid', () => { }; expect(trans.add).toHaveBeenCalledWith(transParams, null); - treeGrid.deleteRowById(treeGrid.selectedRows()[0]); + treeGrid.deleteRowById(treeGrid.selectedRows[0]); tick(16); fix.detectChanges(); expect(treeGrid.rowList.filter(r => r.rowID === addedRowId).length).toEqual(0); @@ -1073,7 +1073,7 @@ describe('IgxTreeGrid - Integration #tGrid', () => { const transParams: HierarchicalTransaction = { id: addedRowId, type: TransactionType.ADD, newValue: newRow }; expect(trans.add).toHaveBeenCalledWith(transParams); - treeGrid.deleteRowById(treeGrid.selectedRows()[0]); + treeGrid.deleteRowById(treeGrid.selectedRows[0]); fix.detectChanges(); expect(treeGrid.rowList.filter(r => r.rowID === addedRowId).length).toEqual(0); expect(treeGrid.transactions.getTransactionLog().length).toEqual(2); @@ -1126,7 +1126,7 @@ describe('IgxTreeGrid - Integration #tGrid', () => { }; expect(trans.add).toHaveBeenCalledWith(transPasrams, null); - treeGrid.deleteRowById(treeGrid.selectedRows()[0]); + treeGrid.deleteRowById(treeGrid.selectedRows[0]); tick(16); fix.detectChanges(); expect(treeGrid.rowList.filter(r => r.rowID === addedRowId).length).toEqual(0); diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts index 893e9ebda31..a98a2514f39 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts @@ -81,13 +81,13 @@ describe('IgxTreeGrid - Selection #tGrid', () => { fix.detectChanges(); TreeGridFunctions.verifyDataRowsSelection(fix, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], true); - expect(treeGrid.selectedRows().length).toEqual(10); + expect(treeGrid.selectedRows.length).toEqual(10); TreeGridFunctions.verifyHeaderCheckboxSelection(fix, true); treeGrid.deselectAllRows(); fix.detectChanges(); - expect(treeGrid.selectedRows()).toEqual([]); + expect(treeGrid.selectedRows).toEqual([]); TreeGridFunctions.verifyDataRowsSelection(fix, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], false); TreeGridFunctions.verifyHeaderCheckboxSelection(fix, false); }); @@ -97,15 +97,15 @@ describe('IgxTreeGrid - Selection #tGrid', () => { fix.detectChanges(); TreeGridFunctions.verifyHeaderCheckboxSelection(fix, true); - treeGrid.deleteRowById(treeGrid.selectedRows()[0]); + treeGrid.deleteRowById(treeGrid.selectedRows[0]); fix.detectChanges(); TreeGridFunctions.verifyHeaderCheckboxSelection(fix, true); - treeGrid.deleteRowById(treeGrid.selectedRows()[0]); + treeGrid.deleteRowById(treeGrid.selectedRows[0]); fix.detectChanges(); TreeGridFunctions.verifyHeaderCheckboxSelection(fix, true); - treeGrid.deleteRowById(treeGrid.selectedRows()[0]); + treeGrid.deleteRowById(treeGrid.selectedRows[0]); fix.detectChanges(); // When deleting the last selected row, header checkbox will be unchecked. TreeGridFunctions.verifyHeaderCheckboxSelection(fix, false); @@ -193,25 +193,25 @@ describe('IgxTreeGrid - Selection #tGrid', () => { treeGrid.filter('Age', 40, IgxNumberFilteringOperand.instance().condition('greaterThan')); fix.detectChanges(); - expect(treeGrid.selectedRows()).toEqual([299, 147]); + expect(treeGrid.selectedRows).toEqual([299, 147]); TreeGridFunctions.verifyHeaderCheckboxSelection(fix, null); treeGrid.selectAllRows(true); fix.detectChanges(); - expect(treeGrid.selectedRows()).toEqual([299, 147, 317, 998, 19, 847]); + expect(treeGrid.selectedRows).toEqual([299, 147, 317, 998, 19, 847]); TreeGridFunctions.verifyHeaderCheckboxSelection(fix, true); treeGrid.deselectAllRows(true); fix.detectChanges(); - expect(treeGrid.selectedRows()).toEqual([299]); + expect(treeGrid.selectedRows).toEqual([299]); TreeGridFunctions.verifyHeaderCheckboxSelection(fix, false); treeGrid.clearFilter(); fix.detectChanges(); - expect(treeGrid.selectedRows()).toEqual([299]); + expect(treeGrid.selectedRows).toEqual([299]); TreeGridFunctions.verifyDataRowsSelection(fix, [6], true); TreeGridFunctions.verifyHeaderCheckboxSelection(fix, null); }); @@ -269,6 +269,22 @@ describe('IgxTreeGrid - Selection #tGrid', () => { TreeGridFunctions.verifyTreeRowSelectionByIndex(fix, 0, false); TreeGridFunctions.verifyTreeRowSelectionByIndex(fix, 1, false); })); + + it('Should bind selectedRows properly', () => { + fix.componentInstance.selectedRows = [147, 19, 957]; + fix.detectChanges(); + + expect(treeGrid.getRowByIndex(0).selected).toBeTrue(); + expect(treeGrid.getRowByIndex(7).selected).toBeTrue(); + expect(treeGrid.getRowByIndex(4).selected).toBeFalse(); + + fix.componentInstance.selectedRows = [847, 711]; + fix.detectChanges(); + + expect(treeGrid.getRowByIndex(0).selected).toBeFalse(); + expect(treeGrid.getRowByIndex(4).selected).toBeTrue(); + expect(treeGrid.getRowByIndex(8).selected).toBeTrue(); + }); }); describe('UI Row Selection', () => { @@ -308,7 +324,7 @@ describe('IgxTreeGrid - Selection #tGrid', () => { TreeGridFunctions.verifyHeaderCheckboxSelection(fix, false); TreeGridFunctions.verifyDataRowsSelection(fix, [], false); - expect(treeGrid.selectedRows()).toEqual([]); + expect(treeGrid.selectedRows).toEqual([]); expect(treeGrid.onRowSelectionChange.emit).toHaveBeenCalledTimes(0); TreeGridFunctions.clickHeaderRowSelectionCheckbox(fix); @@ -316,7 +332,7 @@ describe('IgxTreeGrid - Selection #tGrid', () => { TreeGridFunctions.verifyHeaderCheckboxSelection(fix, false); TreeGridFunctions.verifyDataRowsSelection(fix, [], false); - expect(treeGrid.selectedRows()).toEqual([]); + expect(treeGrid.selectedRows).toEqual([]); expect(treeGrid.onRowSelectionChange.emit).toHaveBeenCalledTimes(0); }); @@ -476,6 +492,15 @@ describe('IgxTreeGrid - Selection #tGrid', () => { TreeGridFunctions.verifyTreeRowSelectionByIndex(fix, 0, false); TreeGridFunctions.verifyTreeRowSelectionByIndex(fix, 1, false); })); + + it('Should update selectedRows when selecting rows from UI', fakeAsync(() => { + TreeGridFunctions.clickRowSelectionCheckbox(fix, 0); + TreeGridFunctions.clickRowSelectionCheckbox(fix, 3); + TreeGridFunctions.clickRowSelectionCheckbox(fix, 5); + fix.detectChanges(); + + expect(treeGrid.selectedRows.length).toBe(3); + })); }); describe('Row Selection with transactions - Hierarchical DS', () => { @@ -502,7 +527,7 @@ describe('IgxTreeGrid - Selection #tGrid', () => { TreeGridFunctions.verifyTreeRowSelectionByIndex(fix, 3, false); TreeGridFunctions.verifyTreeRowSelectionByIndex(fix, 5, false); TreeGridFunctions.verifyHeaderCheckboxSelection(fix, false); - expect(treeGrid.selectedRows()).toEqual([]); + expect(treeGrid.selectedRows).toEqual([]); // try to select deleted row UIInteractions.simulateClickEvent(treeGrid.getRowByIndex(0).nativeElement); @@ -514,7 +539,7 @@ describe('IgxTreeGrid - Selection #tGrid', () => { TreeGridFunctions.verifyTreeRowSelectionByIndex(fix, 3, false); TreeGridFunctions.verifyTreeRowSelectionByIndex(fix, 5, false); TreeGridFunctions.verifyHeaderCheckboxSelection(fix, false); - expect(treeGrid.selectedRows()).toEqual([]); + expect(treeGrid.selectedRows).toEqual([]); // undo transaction treeGrid.transactions.undo(); @@ -530,7 +555,7 @@ describe('IgxTreeGrid - Selection #tGrid', () => { TreeGridFunctions.verifyTreeRowSelectionByIndex(fix, 3, true); TreeGridFunctions.verifyTreeRowSelectionByIndex(fix, 5, true); TreeGridFunctions.verifyHeaderCheckboxSelection(fix, null); - expect(treeGrid.selectedRows()).toEqual([147, 317, 998]); + expect(treeGrid.selectedRows).toEqual([147, 317, 998]); // redo transaction treeGrid.transactions.redo(); @@ -540,7 +565,7 @@ describe('IgxTreeGrid - Selection #tGrid', () => { TreeGridFunctions.verifyTreeRowSelectionByIndex(fix, 3, false); TreeGridFunctions.verifyTreeRowSelectionByIndex(fix, 5, false); TreeGridFunctions.verifyHeaderCheckboxSelection(fix, false); - expect(treeGrid.selectedRows()).toEqual([]); + expect(treeGrid.selectedRows).toEqual([]); }); it('should have correct header checkbox when delete a row', () => { @@ -554,9 +579,9 @@ describe('IgxTreeGrid - Selection #tGrid', () => { TreeGridFunctions.verifyTreeRowSelectionByIndex(fix, 3, false); TreeGridFunctions.verifyHeaderCheckboxSelection(fix, true); - expect(treeGrid.selectedRows().includes(317)).toEqual(false); - expect(treeGrid.selectedRows().includes(711)).toEqual(false); - expect(treeGrid.selectedRows().includes(998)).toEqual(false); + expect(treeGrid.selectedRows.includes(317)).toEqual(false); + expect(treeGrid.selectedRows.includes(711)).toEqual(false); + expect(treeGrid.selectedRows.includes(998)).toEqual(false); // undo transaction treeGrid.transactions.undo(); @@ -588,7 +613,7 @@ describe('IgxTreeGrid - Selection #tGrid', () => { TreeGridFunctions.verifyTreeRowSelectionByIndex(fix, 6, false); TreeGridFunctions.verifyHeaderCheckboxSelection(fix, null); - expect(treeGrid.selectedRows().includes(13)).toEqual(false); + expect(treeGrid.selectedRows.includes(13)).toEqual(false); // undo transaction treeGrid.transactions.undo(); @@ -615,23 +640,23 @@ describe('IgxTreeGrid - Selection #tGrid', () => { fix.detectChanges(); TreeGridFunctions.verifyHeaderCheckboxSelection(fix, false); - expect(treeGrid.selectedRows().includes(13)).toEqual(false); + expect(treeGrid.selectedRows.includes(13)).toEqual(false); })); it('Should be able to select deleted rows through API - Hierarchical DS', () => { treeGrid.deleteRowById(663); fix.detectChanges(); - expect(treeGrid.selectedRows()).toEqual([]); + expect(treeGrid.selectedRows).toEqual([]); treeGrid.selectRows([663]); fix.detectChanges(); - expect(treeGrid.selectedRows()).toEqual([663]); + expect(treeGrid.selectedRows).toEqual([663]); /** Select row with deleted parent */ treeGrid.deleteRowById(147); fix.detectChanges(); // 147 -> 475 treeGrid.selectRows([475]); fix.detectChanges(); - expect(treeGrid.selectedRows()).toEqual([663, 475]); + expect(treeGrid.selectedRows).toEqual([663, 475]); TreeGridFunctions.verifyHeaderCheckboxSelection(fix, false); }); @@ -639,16 +664,16 @@ describe('IgxTreeGrid - Selection #tGrid', () => { treeGrid.deleteRowById(663); treeGrid.deleteRowById(147); fix.detectChanges(); - expect(treeGrid.selectedRows()).toEqual([]); + expect(treeGrid.selectedRows).toEqual([]); treeGrid.selectAllRows(); fix.detectChanges(); - expect(treeGrid.selectedRows().includes(663)).toBe(false); - expect(treeGrid.selectedRows().includes(147)).toBe(false); - expect(treeGrid.selectedRows().includes(475)).toBe(false); - expect(treeGrid.selectedRows().includes(19)).toBe(true); - expect(treeGrid.selectedRows().includes(847)).toBe(true); + expect(treeGrid.selectedRows.includes(663)).toBe(false); + expect(treeGrid.selectedRows.includes(147)).toBe(false); + expect(treeGrid.selectedRows.includes(475)).toBe(false); + expect(treeGrid.selectedRows.includes(19)).toBe(true); + expect(treeGrid.selectedRows.includes(847)).toBe(true); TreeGridFunctions.verifyHeaderCheckboxSelection(fix, true); }); }); @@ -666,17 +691,17 @@ describe('IgxTreeGrid - Selection #tGrid', () => { it('Should select deleted rows through API', () => { treeGrid.deleteRowById(6); fix.detectChanges(); - expect(treeGrid.selectedRows()).toEqual([]); + expect(treeGrid.selectedRows).toEqual([]); treeGrid.selectRows([6]); fix.detectChanges(); - expect(treeGrid.selectedRows()).toEqual([6]); + expect(treeGrid.selectedRows).toEqual([6]); /** Select row with deleted parent */ treeGrid.deleteRowById(10); fix.detectChanges(); // 10 -> 9 treeGrid.selectRows([9]); fix.detectChanges(); - expect(treeGrid.selectedRows()).toEqual([6, 9]); + expect(treeGrid.selectedRows).toEqual([6, 9]); TreeGridFunctions.verifyHeaderCheckboxSelection(fix, false); }); @@ -684,16 +709,16 @@ describe('IgxTreeGrid - Selection #tGrid', () => { treeGrid.deleteRowById(6); treeGrid.deleteRowById(10); fix.detectChanges(); - expect(treeGrid.selectedRows()).toEqual([]); + expect(treeGrid.selectedRows).toEqual([]); treeGrid.selectAllRows(); fix.detectChanges(); - expect(treeGrid.selectedRows().includes(6)).toBe(false); - expect(treeGrid.selectedRows().includes(10)).toBe(false); - expect(treeGrid.selectedRows().includes(9)).toBe(false); - expect(treeGrid.selectedRows().includes(1)).toBe(true); - expect(treeGrid.selectedRows().includes(2)).toBe(true); + expect(treeGrid.selectedRows.includes(6)).toBe(false); + expect(treeGrid.selectedRows.includes(10)).toBe(false); + expect(treeGrid.selectedRows.includes(9)).toBe(false); + expect(treeGrid.selectedRows.includes(1)).toBe(true); + expect(treeGrid.selectedRows.includes(2)).toBe(true); TreeGridFunctions.verifyHeaderCheckboxSelection(fix, true); }); }); @@ -917,7 +942,7 @@ describe('IgxTreeGrid - Selection #tGrid', () => { fix.detectChanges(); // check if any rows were selected - expect(treeGrid.selectedRows().length).toBeGreaterThan(0); + expect(treeGrid.selectedRows.length).toBeGreaterThan(0); // enter edit mode targetCell.setEditMode(true); diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts index f10e59a934f..2b6a4376607 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts @@ -152,13 +152,14 @@ export class SelectionComponent extends BasicGridComponent { @Component({ template: GridTemplateStrings.declareGrid( - ` [width]="width" [height]="height" [rowSelection]="'multiple'" [primaryKey]="'ProductID'"`, + ` [width]="width" [height]="height" [rowSelection]="'multiple'" [primaryKey]="'ProductID'" [selectedRows]="selectedRows"`, '', ColumnDefinitions.productBasicNumberID) }) export class RowSelectionComponent extends BasicGridComponent { data = SampleTestData.foodProductDataExtended(); public width = '800px'; public height = '600px'; + public selectedRows = []; } @Component({ diff --git a/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts index b639db05dac..adc2f183fe3 100644 --- a/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts @@ -39,7 +39,7 @@ import { ColumnPinningPosition, RowPinningPosition } from '../grids/common/enums `, - providers: [ IgxHierarchicalTransactionServiceFactory ] + providers: [IgxHierarchicalTransactionServiceFactory] }) export class IgxHierarchicalGridTestBaseComponent { @@ -68,7 +68,7 @@ export class IgxHierarchicalGridTestBaseComponent { @Component({ template: ` + [rowSelection]="'multiple'" [selectedRows]="selectedRows"> @@ -83,10 +83,11 @@ export class IgxHierarchicalGridTestBaseComponent { `, - providers: [ IgxHierarchicalTransactionServiceFactory ] + providers: [IgxHierarchicalTransactionServiceFactory] }) export class IgxHierarchicalGridRowSelectionComponent { public data; + public selectedRows = []; @ViewChild('hierarchicalGrid', { read: IgxHierarchicalGridComponent, static: true }) public hgrid: IgxHierarchicalGridComponent; @ViewChild('rowIsland', { read: IgxRowIslandComponent, static: true }) public rowIsland: IgxRowIslandComponent; @ViewChild('rowIsland2', { read: IgxRowIslandComponent, static: true }) public rowIsland2: IgxRowIslandComponent; diff --git a/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts index 8d89ec5fb3d..4b067ac9538 100644 --- a/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts @@ -39,7 +39,8 @@ export class IgxTreeGridFilteringComponent { @Component({ template: ` - + @@ -50,6 +51,7 @@ export class IgxTreeGridFilteringComponent { export class IgxTreeGridSimpleComponent { @ViewChild(IgxTreeGridComponent, { static: true }) public treeGrid: IgxTreeGridComponent; public data = SampleTestData.employeeSmallTreeData(); + public selectedRows = []; } @Component({ diff --git a/projects/igniteui-angular/src/lib/test-utils/tree-grid-functions.spec.ts b/projects/igniteui-angular/src/lib/test-utils/tree-grid-functions.spec.ts index a52ab293642..1d39a8b7e31 100644 --- a/projects/igniteui-angular/src/lib/test-utils/tree-grid-functions.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/tree-grid-functions.spec.ts @@ -303,7 +303,7 @@ export class TreeGridFunctions { expect((rowDOM.nativeElement).classList.contains(TREE_ROW_SELECTION_CSS_CLASS)).toBe(expectedSelection); // Verify selection of row through treeGrid - const selectedRows = (treeGridComponent as IgxTreeGridComponent).selectedRows(); + const selectedRows = (treeGridComponent as IgxTreeGridComponent).selectedRows; expect(selectedRows.includes(rowComponent.rowID)).toBe(expectedSelection); } @@ -326,7 +326,7 @@ export class TreeGridFunctions { public static verifyDataRowsSelection(fix, expectedSelectedRowIndices: any[], expectedSelection: boolean) { if (expectedSelection) { const treeGrid = fix.debugElement.query(By.css('igx-tree-grid')).componentInstance as IgxTreeGridComponent; - expect(treeGrid.selectedRows().length).toBe(expectedSelectedRowIndices.length, 'Incorrect number of rows that are selected.'); + expect(treeGrid.selectedRows.length).toBe(expectedSelectedRowIndices.length, 'Incorrect number of rows that are selected.'); } expectedSelectedRowIndices.forEach(rowIndex => { diff --git a/src/app/grid-selection/grid-selection.sample.html b/src/app/grid-selection/grid-selection.sample.html index 3010a7d42c2..fd55a6122c7 100644 --- a/src/app/grid-selection/grid-selection.sample.html +++ b/src/app/grid-selection/grid-selection.sample.html @@ -22,8 +22,8 @@ - - + +
@@ -31,8 +31,8 @@ - - + + @@ -40,4 +40,4 @@ - \ No newline at end of file + diff --git a/src/app/grid-selection/grid-selection.sample.ts b/src/app/grid-selection/grid-selection.sample.ts index 9bc579fe265..6b2951a84cf 100644 --- a/src/app/grid-selection/grid-selection.sample.ts +++ b/src/app/grid-selection/grid-selection.sample.ts @@ -57,7 +57,7 @@ export class GridSelectionComponent implements AfterViewInit { } toggle() { - const currentSelection = this.grid1.selectedRows(); + const currentSelection = this.grid1.selectedRows; if (currentSelection !== undefined) { const currentSelectionSet = new Set(currentSelection); if (currentSelectionSet.has(1) && currentSelectionSet.has(2) && currentSelectionSet.has(5)) { @@ -69,7 +69,7 @@ export class GridSelectionComponent implements AfterViewInit { } toggleAll() { - if ((this.grid1.selectedRows() || []).length === 0) { + if ((this.grid1.selectedRows || []).length === 0) { this.grid1.selectAllRows(); } else { this.grid1.deselectAllRows(); @@ -93,8 +93,9 @@ export class GridSelectionComponent implements AfterViewInit { this.grid1.cdr.detectChanges(); } - deleteSectedRow() { - const r = this.grid1.selectedRows()[0]; - this.grid1.deleteRow(r[this.grid1.primaryKey]); + deleteSelectedRow() { + const r = this.grid1.selectedRows[0]; + this.grid1.deleteRow(r); + } } diff --git a/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.ts b/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.ts index 1ce08c90bff..92b56986677 100644 --- a/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.ts +++ b/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.ts @@ -110,7 +110,7 @@ export class TreeGridFlatDataSampleComponent implements OnInit { } public addChildRow() { - const selectedRowId = this.grid1.selectedRows()[0]; + const selectedRowId = this.grid1.selectedRows[0]; this.grid1.addRow( { 'employeeID': this.data.length + this.nextRow++, @@ -122,7 +122,7 @@ export class TreeGridFlatDataSampleComponent implements OnInit { } public deleteRow() { - this.grid1.deleteRow(this.grid1.selectedRows()[0]); + this.grid1.deleteRow(this.grid1.selectedRows[0]); } public selectDensity(event) { diff --git a/src/app/tree-grid-load-on-demand/tree-grid-load-on-demand.sample.ts b/src/app/tree-grid-load-on-demand/tree-grid-load-on-demand.sample.ts index 850f9f6da4b..7f4ace6d0b8 100644 --- a/src/app/tree-grid-load-on-demand/tree-grid-load-on-demand.sample.ts +++ b/src/app/tree-grid-load-on-demand/tree-grid-load-on-demand.sample.ts @@ -87,7 +87,7 @@ export class TreeGridLoadOnDemandSampleComponent implements OnInit { } public addChildRow() { - const selectedRowId = this.grid1.selectedRows()[0]; + const selectedRowId = this.grid1.selectedRows[0]; const parent = this.grid1.records.get(selectedRowId).data; if (!parent[this.grid1.hasChildrenKey]) { @@ -105,7 +105,7 @@ export class TreeGridLoadOnDemandSampleComponent implements OnInit { } public deleteRow() { - this.grid1.deleteRow(this.grid1.selectedRows()[0]); + this.grid1.deleteRow(this.grid1.selectedRows[0]); } public selectDensity(event) { diff --git a/src/app/tree-grid/tree-grid.sample.ts b/src/app/tree-grid/tree-grid.sample.ts index 02b98a61a89..c925bd4ab8e 100644 --- a/src/app/tree-grid/tree-grid.sample.ts +++ b/src/app/tree-grid/tree-grid.sample.ts @@ -69,7 +69,7 @@ export class TreeGridSampleComponent implements OnInit { } public addChildRow() { - const selectedRowId = this.grid1.selectedRows()[0]; + const selectedRowId = this.grid1.selectedRows[0]; this.grid1.addRow ( { 'ID': `ADD${this.nextRow++}`, @@ -88,7 +88,7 @@ export class TreeGridSampleComponent implements OnInit { } public deleteRow() { - this.grid1.deleteRow(this.grid1.selectedRows()[0]); + this.grid1.deleteRow(this.grid1.selectedRows[0]); } public undo() {