Skip to content

Commit c7dc04b

Browse files
jackofdiamond5jackofdiamond5
committed
refactor(igx-grid): make selectedRows an @input #6653 #6974 
1 parent fe3a767 commit c7dc04b

14 files changed

+207
-182
lines changed

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

+24-12
Original file line numberDiff line numberDiff line change
@@ -1062,6 +1062,26 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
10621062
filteringExpressionsTree: IFilteringExpressionsTree,
10631063
done: (values: any[]) => void) => void;
10641064

1065+
/**
1066+
* Gets/Sets the current selection state.
1067+
* @remarks
1068+
* Represents the selected rows' IDs (primary key or rowData)
1069+
* @example
1070+
* ```html
1071+
* <igx-grid [data]="localData" primaryKey="ID" rowSelection="multiple" [selectedRows]="[0, 1, 2]"><igx-grid>
1072+
* ```
1073+
*/
1074+
@Input()
1075+
public set selectedRows(rowIDs: any[]) {
1076+
this._selectedRows = new Set(rowIDs);
1077+
}
1078+
1079+
public get selectedRows(): any[] {
1080+
return [...this._selectedRows];
1081+
}
1082+
1083+
private _selectedRows = new Set<any>();
1084+
10651085
/**
10661086
* Emitted when `IgxGridCellComponent` is clicked.
10671087
* @remarks
@@ -3182,6 +3202,10 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
31823202
this.resetNotifyChanges();
31833203
this.cdr.detectChanges();
31843204
}
3205+
3206+
if (this.selectedRows.length > 0) {
3207+
this.selectRows(this.selectedRows);
3208+
}
31853209
}
31863210

31873211
/**
@@ -5274,18 +5298,6 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
52745298
[...this.unpinnedDataView, ...this.pinnedDataView];
52755299
}
52765300

5277-
/**
5278-
* Get current selection state.
5279-
* @example
5280-
* Returns an array with selected rows' IDs (primaryKey or rowData)
5281-
* ```typescript
5282-
* const selectedRows = this.grid.selectedRows();
5283-
* ```
5284-
*/
5285-
public selectedRows(): any[] {
5286-
return this.selectionService.getSelectedRows();
5287-
}
5288-
52895301
/**
52905302
* Select specified rows by ID.
52915303
* @example

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

+82-82
Large diffs are not rendered by default.

‎projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -1022,20 +1022,20 @@ describe('IgxGrid - GroupBy #grid', () => {
10221022
grid.selectAllRows();
10231023
fix.detectChanges();
10241024

1025-
expect(grid.selectedRows().length).toEqual(8);
1025+
expect(grid.selectedRows.length).toEqual(8);
10261026
let rows = fix.debugElement.queryAll(By.css('.igx-grid__tr--selected'));
10271027
for (const r of rows) {
10281028
expect(r.componentInstance instanceof IgxGridRowComponent).toBe(true);
10291029
}
10301030

10311031
grid.deselectAllRows();
10321032
fix.detectChanges();
1033-
expect(grid.selectedRows().length).toEqual(0);
1033+
expect(grid.selectedRows.length).toEqual(0);
10341034

10351035
GridSelectionFunctions.clickHeaderRowCheckbox(fix);
10361036
fix.detectChanges();
10371037

1038-
expect(grid.selectedRows().length).toEqual(8);
1038+
expect(grid.selectedRows.length).toEqual(8);
10391039

10401040
rows = fix.debugElement.queryAll(By.css('.igx-grid__tr--selected'));
10411041
for (const r of rows) {
@@ -1600,7 +1600,7 @@ describe('IgxGrid - GroupBy #grid', () => {
16001600
GridSelectionFunctions.clickRowCheckbox(rows[0].element);
16011601
await wait(100);
16021602
grid.cdr.detectChanges();
1603-
expect(grid.selectedRows().length).toEqual(1);
1603+
expect(grid.selectedRows.length).toEqual(1);
16041604
GridSelectionFunctions.verifyRowSelected(rows[0]);
16051605

16061606
});

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

+25-25
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ describe('IgxHierarchicalGrid selection #hGrid', () => {
153153
fix.detectChanges();
154154

155155
expect(hierarchicalGrid.rowSelection).toBe(GridSelectionMode.none);
156-
expect(hierarchicalGrid.selectedRows()).toEqual([]);
156+
expect(hierarchicalGrid.selectedRows).toEqual([]);
157157
GridSelectionFunctions.verifyHeaderRowHasCheckbox(hierarchicalGrid, false, false);
158158
for (const r of hierarchicalGrid.dataRowList.toArray()) {
159159
GridSelectionFunctions.verifyRowHasCheckbox(r.nativeElement, false, false);
@@ -305,15 +305,15 @@ describe('IgxHierarchicalGrid selection #hGrid', () => {
305305
fix.detectChanges();
306306

307307
GridSelectionFunctions.verifyRowSelected(firstRow);
308-
expect(hierarchicalGrid.selectedRows()).toEqual(['0']);
308+
expect(hierarchicalGrid.selectedRows).toEqual(['0']);
309309

310310
const fourthRow = hierarchicalGrid.getRowByIndex(4);
311311
UIInteractions.simulateClickEvent(fourthRow.nativeElement, true);
312312
fix.detectChanges();
313313

314314
GridSelectionFunctions.verifyRowsArraySelected(
315315
[firstRow, hierarchicalGrid.getRowByIndex(2), hierarchicalGrid.getRowByIndex(3), fourthRow]);
316-
expect(hierarchicalGrid.selectedRows()).toEqual(['0', '1', '2', '3']);
316+
expect(hierarchicalGrid.selectedRows).toEqual(['0', '1', '2', '3']);
317317

318318
// Verify no rows are selected in the child grid
319319
const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0];
@@ -335,14 +335,14 @@ describe('IgxHierarchicalGrid selection #hGrid', () => {
335335
fix.detectChanges();
336336

337337
GridSelectionFunctions.verifyRowSelected(firstRow);
338-
expect(hierarchicalGrid.selectedRows()).toEqual(['0']);
338+
expect(hierarchicalGrid.selectedRows).toEqual(['0']);
339339

340340
const fourthRow = hierarchicalGrid.getRowByIndex(4);
341341
UIInteractions.simulateClickEvent(fourthRow.nativeElement, false, true);
342342
fix.detectChanges();
343343

344344
GridSelectionFunctions.verifyRowsArraySelected([firstRow, fourthRow]);
345-
expect(hierarchicalGrid.selectedRows()).toEqual(['0', '3']);
345+
expect(hierarchicalGrid.selectedRows).toEqual(['0', '3']);
346346

347347
// Click on a row in the child grid
348348
const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0];
@@ -353,7 +353,7 @@ describe('IgxHierarchicalGrid selection #hGrid', () => {
353353
fix.detectChanges();
354354

355355
GridSelectionFunctions.verifyRowsArraySelected([firstRow, fourthRow]);
356-
expect(hierarchicalGrid.selectedRows()).toEqual(['0', '3']);
356+
expect(hierarchicalGrid.selectedRows).toEqual(['0', '3']);
357357
GridSelectionFunctions.verifyRowSelected(childGridFirstRow);
358358
expect(childGrid.selectedRows()).toEqual(['02']);
359359
});
@@ -421,7 +421,7 @@ describe('IgxHierarchicalGrid selection #hGrid', () => {
421421
GridSelectionFunctions.clickHeaderRowCheckbox(hierarchicalGrid);
422422
fix.detectChanges();
423423

424-
expect(hierarchicalGrid.selectedRows()).toEqual(['0', '1', '2', '3', '4']);
424+
expect(hierarchicalGrid.selectedRows).toEqual(['0', '1', '2', '3', '4']);
425425
GridSelectionFunctions.verifyHeaderRowCheckboxState(hierarchicalGrid, true);
426426

427427
const childGrid1 = hierarchicalGrid.hgridAPI.getChildGrids(false)[0];
@@ -435,7 +435,7 @@ describe('IgxHierarchicalGrid selection #hGrid', () => {
435435
GridSelectionFunctions.clickHeaderRowCheckbox(childGrid1);
436436
fix.detectChanges();
437437

438-
expect(hierarchicalGrid.selectedRows()).toEqual(['0', '1', '2', '3', '4']);
438+
expect(hierarchicalGrid.selectedRows).toEqual(['0', '1', '2', '3', '4']);
439439
GridSelectionFunctions.verifyHeaderRowCheckboxState(hierarchicalGrid, true);
440440

441441
expect(childGrid1.selectedRows()).toEqual(['00', '01', '02']);
@@ -447,7 +447,7 @@ describe('IgxHierarchicalGrid selection #hGrid', () => {
447447
GridSelectionFunctions.clickHeaderRowCheckbox(hierarchicalGrid);
448448
fix.detectChanges();
449449

450-
expect(hierarchicalGrid.selectedRows()).toEqual([]);
450+
expect(hierarchicalGrid.selectedRows).toEqual([]);
451451
GridSelectionFunctions.verifyHeaderRowCheckboxState(hierarchicalGrid);
452452

453453
expect(childGrid1.selectedRows()).toEqual(['00', '01', '02']);
@@ -459,7 +459,7 @@ describe('IgxHierarchicalGrid selection #hGrid', () => {
459459
GridSelectionFunctions.clickHeaderRowCheckbox(childGrid1);
460460
fix.detectChanges();
461461

462-
expect(hierarchicalGrid.selectedRows()).toEqual([]);
462+
expect(hierarchicalGrid.selectedRows).toEqual([]);
463463
GridSelectionFunctions.verifyHeaderRowCheckboxState(hierarchicalGrid);
464464

465465
expect(childGrid1.selectedRows()).toEqual([]);
@@ -481,23 +481,23 @@ describe('IgxHierarchicalGrid selection #hGrid', () => {
481481
});
482482

483483
GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true);
484-
expect(hierarchicalGrid.selectedRows()).toEqual(['0', '1', '2', '3', '4']);
484+
expect(hierarchicalGrid.selectedRows).toEqual(['0', '1', '2', '3', '4']);
485485

486486
// Unselect a row
487487
GridSelectionFunctions.clickRowCheckbox(firstRow);
488488
fix.detectChanges();
489489

490490
GridSelectionFunctions.verifyRowSelected(firstRow, false);
491491
GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true);
492-
expect(hierarchicalGrid.selectedRows()).toEqual(['1', '2', '3', '4']);
492+
expect(hierarchicalGrid.selectedRows).toEqual(['1', '2', '3', '4']);
493493

494494
// Click on a row
495495
secondRow.onClick(UIInteractions.getMouseEvent('click'));
496496
fix.detectChanges();
497497

498498
GridSelectionFunctions.verifyRowSelected(secondRow);
499499
GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true);
500-
expect(hierarchicalGrid.selectedRows()).toEqual(['1']);
500+
expect(hierarchicalGrid.selectedRows).toEqual(['1']);
501501
});
502502

503503
it('should retain selected row when filtering', () => {
@@ -579,7 +579,7 @@ describe('IgxHierarchicalGrid selection #hGrid', () => {
579579

580580
GridSelectionFunctions.verifyRowSelected(firstRow, false);
581581
GridSelectionFunctions.verifyHeaderRowCheckboxState(fix);
582-
expect(hierarchicalGrid.selectedRows()).toEqual([]);
582+
expect(hierarchicalGrid.selectedRows).toEqual([]);
583583

584584
// Click on deleted row
585585
firstRow.onClick(UIInteractions.getMouseEvent('click'));
@@ -588,23 +588,23 @@ describe('IgxHierarchicalGrid selection #hGrid', () => {
588588

589589
GridSelectionFunctions.verifyRowSelected(firstRow, false);
590590
GridSelectionFunctions.verifyHeaderRowCheckboxState(fix);
591-
expect(hierarchicalGrid.selectedRows()).toEqual([]);
591+
expect(hierarchicalGrid.selectedRows).toEqual([]);
592592

593593
// Click on checkbox for deleted row
594594
firstRow.onRowSelectorClick(UIInteractions.getMouseEvent('click'));
595595
fix.detectChanges();
596596

597597
GridSelectionFunctions.verifyRowSelected(firstRow, false);
598598
GridSelectionFunctions.verifyHeaderRowCheckboxState(fix);
599-
expect(hierarchicalGrid.selectedRows()).toEqual([]);
599+
expect(hierarchicalGrid.selectedRows).toEqual([]);
600600

601601
// Select all rows
602602
hierarchicalGrid.selectAllRows();
603603
fix.detectChanges();
604604

605605
GridSelectionFunctions.verifyRowSelected(firstRow, false);
606606
GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true);
607-
expect(hierarchicalGrid.selectedRows()).toEqual(['1', '2', '3', '4']);
607+
expect(hierarchicalGrid.selectedRows).toEqual(['1', '2', '3', '4']);
608608

609609
// Click on a row in the child grid
610610
const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0];
@@ -617,7 +617,7 @@ describe('IgxHierarchicalGrid selection #hGrid', () => {
617617

618618
GridSelectionFunctions.verifyRowSelected(firstRow, false);
619619
GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true);
620-
expect(hierarchicalGrid.selectedRows()).toEqual(['1', '2', '3', '4']);
620+
expect(hierarchicalGrid.selectedRows).toEqual(['1', '2', '3', '4']);
621621
expect(childGrid.selectedRows()).toEqual(['00']);
622622
}));
623623

@@ -635,21 +635,21 @@ describe('IgxHierarchicalGrid selection #hGrid', () => {
635635
fix.detectChanges();
636636

637637
GridSelectionFunctions.verifyHeaderRowCheckboxState(hierarchicalGrid, true);
638-
expect(hierarchicalGrid.selectedRows()).toEqual(['0', '1', '2', '3', '4']);
638+
expect(hierarchicalGrid.selectedRows).toEqual(['0', '1', '2', '3', '4']);
639639

640640
hierarchicalGrid.addRow({ ID: '5', ChildLevels: 3, ProductName: 'New Product' });
641641
fix.detectChanges();
642642

643643
GridSelectionFunctions.verifyHeaderRowCheckboxState(hierarchicalGrid, false, true);
644-
expect(hierarchicalGrid.selectedRows()).toEqual(['0', '1', '2', '3', '4']);
644+
expect(hierarchicalGrid.selectedRows).toEqual(['0', '1', '2', '3', '4']);
645645
let lastRow = hierarchicalGrid.getRowByIndex(6);
646646
GridSelectionFunctions.verifyRowSelected(lastRow, false);
647647

648648
GridSelectionFunctions.clickRowCheckbox(lastRow);
649649
fix.detectChanges();
650650

651651
GridSelectionFunctions.verifyHeaderRowCheckboxState(hierarchicalGrid, true);
652-
expect(hierarchicalGrid.selectedRows()).toEqual(['0', '1', '2', '3', '4', '5']);
652+
expect(hierarchicalGrid.selectedRows).toEqual(['0', '1', '2', '3', '4', '5']);
653653

654654
// Add row in child grid
655655
const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0];
@@ -690,28 +690,28 @@ describe('IgxHierarchicalGrid selection #hGrid', () => {
690690
fix.detectChanges();
691691

692692
GridSelectionFunctions.verifyHeaderRowCheckboxState(hierarchicalGrid, true);
693-
expect(hierarchicalGrid.selectedRows()).toEqual(['0', '1', '2', '3', '4']);
693+
expect(hierarchicalGrid.selectedRows).toEqual(['0', '1', '2', '3', '4']);
694694

695695
hierarchicalGrid.deleteRow('1');
696696
fix.detectChanges();
697697

698698
GridSelectionFunctions.verifyHeaderRowCheckboxState(hierarchicalGrid, true);
699-
expect(hierarchicalGrid.selectedRows()).toEqual(['0', '2', '3', '4']);
699+
expect(hierarchicalGrid.selectedRows).toEqual(['0', '2', '3', '4']);
700700
expect(hierarchicalGrid.dataRowList.length).toEqual(4);
701701

702702
const firstRow = hierarchicalGrid.getRowByIndex(0);
703703
GridSelectionFunctions.clickRowCheckbox(firstRow);
704704
fix.detectChanges();
705705

706706
GridSelectionFunctions.verifyHeaderRowCheckboxState(hierarchicalGrid, false, true);
707-
expect(hierarchicalGrid.selectedRows()).toEqual(['2', '3', '4']);
707+
expect(hierarchicalGrid.selectedRows).toEqual(['2', '3', '4']);
708708

709709
hierarchicalGrid.deleteRow('0');
710710
fix.detectChanges();
711711

712712
expect(hierarchicalGrid.dataRowList.length).toEqual(3);
713713
GridSelectionFunctions.verifyHeaderRowCheckboxState(hierarchicalGrid, true);
714-
expect(hierarchicalGrid.selectedRows()).toEqual(['2', '3', '4']);
714+
expect(hierarchicalGrid.selectedRows).toEqual(['2', '3', '4']);
715715
});
716716

717717
it('should be able to select added row', () => {

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

+15-2
Original file line numberDiff line numberDiff line change
@@ -604,6 +604,7 @@ export class IgxGridSelectionService {
604604
const removedRec = this.isFilteringApplied() ?
605605
this.getRowIDs(this.allData).filter(rID => this.isRowSelected(rID)) : this.getSelectedRows();
606606
const newSelection = this.isFilteringApplied() ? this.getSelectedRows().filter(x => !removedRec.includes(x)) : [];
607+
this.grid.selectedRows = newSelection;
607608
this.emitRowSelectionEvent(newSelection, [], removedRec, event);
608609
}
609610

@@ -612,6 +613,7 @@ export class IgxGridSelectionService {
612613
const allRowIDs = this.getRowIDs(this.allData);
613614
const addedRows = allRowIDs.filter((rID) => !this.isRowSelected(rID));
614615
const newSelection = this.rowSelection.size ? this.getSelectedRows().concat(addedRows) : addedRows;
616+
this.grid.selectedRows = newSelection;
615617

616618
this.emitRowSelectionEvent(newSelection, addedRows, [], event);
617619
}
@@ -623,7 +625,14 @@ export class IgxGridSelectionService {
623625

624626
const newSelection = clearPrevSelection ? [rowID] : this.getSelectedRows().indexOf(rowID) !== -1 ?
625627
this.getSelectedRows() : [...this.getSelectedRows(), rowID];
626-
const removed = clearPrevSelection ? this.getSelectedRows() : [];
628+
let removed;
629+
if (clearPrevSelection) {
630+
removed = this.getSelectedRows();
631+
this.grid.selectedRows = [rowID];
632+
} else {
633+
removed = [];
634+
this.grid.selectedRows.push(rowID);
635+
}
627636
this.emitRowSelectionEvent(newSelection, [rowID], removed, event);
628637
}
629638

@@ -632,20 +641,23 @@ export class IgxGridSelectionService {
632641
if (!this.isRowSelected(rowID)) { return; }
633642
const newSelection = this.getSelectedRows().filter(r => r !== rowID);
634643
if (this.rowSelection.size && this.rowSelection.has(rowID)) {
644+
this.grid.selectedRows = newSelection;
635645
this.emitRowSelectionEvent(newSelection, [], [rowID], event);
636646
}
637647
}
638648

639649
/** Select specified rows. No event is emitted. */
640650
selectRowsWithNoEvent(rowIDs: any[], clearPrevSelection?): void {
641651
if (clearPrevSelection) { this.rowSelection.clear(); }
642-
rowIDs.forEach(rowID => { this.rowSelection.add(rowID); });
652+
rowIDs.forEach(rowID => this.rowSelection.add(rowID));
653+
this.grid.selectedRows = this.rowSelection;
643654
this.allRowsSelected = undefined;
644655
}
645656

646657
/** Deselect specified rows. No event is emitted. */
647658
deselectRowsWithNoEvent(rowIDs: any[]): void {
648659
rowIDs.forEach(rowID => this.rowSelection.delete(rowID));
660+
this.grid.selectedRows = this.rowSelection;
649661
this.allRowsSelected = undefined;
650662
}
651663

@@ -723,6 +735,7 @@ export class IgxGridSelectionService {
723735
/** Clear rowSelection and update checkbox state */
724736
public clearAllSelectedRows(): void {
725737
this.rowSelection.clear();
738+
this.grid.selectedRows = this.rowSelection;
726739
this.clearHeaderCBState();
727740
}
728741

‎projects/igniteui-angular/src/lib/grids/state.directive.spec.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -368,7 +368,7 @@ describe('IgxGridState - input properties #grid', () => {
368368

369369
state.setState(rowSelectionState);
370370
gridState = state.getState(false, 'rowSelection');
371-
HelperFunctions.verifyRowSelection(grid.selectedRows(), gridState as IGridState);
371+
HelperFunctions.verifyRowSelection(grid.selectedRows, gridState as IGridState);
372372
gridState = state.getState(true, 'rowSelection');
373373
expect(gridState).toBe(rowSelectionState);
374374
});
@@ -387,7 +387,7 @@ describe('IgxGridState - input properties #grid', () => {
387387

388388
state.setState(rowSelectionStateObject);
389389
gridState = state.getState(false, 'rowSelection');
390-
HelperFunctions.verifyRowSelection(grid.selectedRows(), gridState as IGridState);
390+
HelperFunctions.verifyRowSelection(grid.selectedRows, gridState as IGridState);
391391
gridState = state.getState(true, 'rowSelection');
392392
expect(gridState).toBe(rowSelectionState);
393393
});

0 commit comments

Comments
 (0)