implemen
* ```html
*
+ * (rowSelectionChanging)="handleRowSelection($event)">
*
* ```
*/
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 be051c4fc16..6b0334bcf69 100644
--- a/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts
+++ b/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts
@@ -438,7 +438,6 @@ export class IgxGridSelectionService {
const addedRows = allRowIDs.filter((rID) => !this.isRowSelected(rID));
const newSelection = this.rowSelection.size ? this.getSelectedRows().concat(addedRows) : addedRows;
this.indeterminateRows.clear();
- this.selectedRowsChange.next();
this.emitRowSelectionEvent(newSelection, addedRows, [], event);
}
@@ -449,10 +448,10 @@ export class IgxGridSelectionService {
}
clearPrevSelection = !this.grid.isMultiRowSelectionEnabled || clearPrevSelection;
- const newSelection = clearPrevSelection ? [rowID] : this.getSelectedRows().indexOf(rowID) !== -1 ?
- this.getSelectedRows() : [...this.getSelectedRows(), rowID];
- const removed = clearPrevSelection ? this.getSelectedRows() : [];
- this.selectedRowsChange.next();
+ const selectedRows = this.getSelectedRows();
+ const newSelection = clearPrevSelection ? [rowID] : this.rowSelection.has(rowID) ?
+ selectedRows : [...selectedRows, rowID];
+ const removed = clearPrevSelection ? selectedRows : [];
this.emitRowSelectionEvent(newSelection, [rowID], removed, event);
}
@@ -463,11 +462,44 @@ export class IgxGridSelectionService {
}
const newSelection = this.getSelectedRows().filter(r => r !== rowID);
if (this.rowSelection.size && this.rowSelection.has(rowID)) {
- this.selectedRowsChange.next();
this.emitRowSelectionEvent(newSelection, [], [rowID], event);
}
}
+ /** Select the specified rows and emit event. */
+ public selectRows(keys: any[], clearPrevSelection?: boolean, event?): void {
+ if (!this.grid.isMultiRowSelectionEnabled) {
+ return;
+ }
+
+ const rowsToSelect = keys.filter(x => !this.isRowDeleted(x) && !this.rowSelection.has(x));
+ if (!rowsToSelect.length && !clearPrevSelection) {
+ // no valid/additional rows to select and no clear
+ return;
+ }
+
+ const selectedRows = this.getSelectedRows();
+ const newSelection = clearPrevSelection ? rowsToSelect : [...selectedRows, ...rowsToSelect];
+ const keysAsSet = new Set(rowsToSelect);
+ const removed = clearPrevSelection ? selectedRows.filter(x => !keysAsSet.has(x)) : [];
+ this.emitRowSelectionEvent(newSelection, rowsToSelect, removed, event);
+ }
+
+ public deselectRows(keys: any[], event?): void {
+ if (!this.rowSelection.size) {
+ return;
+ }
+
+ const rowsToDeselect = keys.filter(x => this.rowSelection.has(x));
+ if (!rowsToDeselect.length) {
+ return;
+ }
+
+ const keysAsSet = new Set(rowsToDeselect);
+ const newSelection = this.getSelectedRows().filter(r => !keysAsSet.has(r));
+ this.emitRowSelectionEvent(newSelection, [], rowsToDeselect, event);
+ }
+
/** Select specified rows. No event is emitted. */
public selectRowsWithNoEvent(rowIDs: any[], clearPrevSelection?): void {
if (clearPrevSelection) {
@@ -508,7 +540,6 @@ export class IgxGridSelectionService {
const added = this.getRowIDs(rows).filter(rID => !this.isRowSelected(rID));
const newSelection = this.getSelectedRows().concat(added);
- this.selectedRowsChange.next();
this.emitRowSelectionEvent(newSelection, added, [], event);
}
@@ -547,7 +578,7 @@ export class IgxGridSelectionService {
oldSelection: currSelection, newSelection,
added, removed, event, cancel: false
};
- this.grid.rowSelected.emit(args);
+ this.grid.rowSelectionChanging.emit(args);
if (args.cancel) {
return;
}
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.service.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.service.ts
index 6699b029e77..400b476c512 100644
--- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.service.ts
+++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.service.ts
@@ -124,7 +124,7 @@ export class IgxTreeGridSelectionService extends IgxGridSelectionService {
// retrieve rows/parents/children which has been added/removed from the selection
this.handleAddedAndRemovedArgs(args);
- this.grid.rowSelected.emit(args);
+ this.grid.rowSelectionChanging.emit(args);
if (args.cancel) {
return;
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 81211d05868..15c84a7d332 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
@@ -332,7 +332,7 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
});
it('Header checkbox should NOT select/deselect all rows when selectionMode is single', () => {
- spyOn(treeGrid.rowSelected, 'emit').and.callThrough();
+ spyOn(treeGrid.rowSelectionChanging, 'emit').and.callThrough();
treeGrid.rowSelection = GridSelectionMode.single;
fix.detectChanges();
@@ -342,7 +342,7 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
TreeGridFunctions.verifyHeaderCheckboxSelection(fix, false);
TreeGridFunctions.verifyDataRowsSelection(fix, [], false);
expect(treeGrid.selectedRows).toEqual([]);
- expect(treeGrid.rowSelected.emit).toHaveBeenCalledTimes(0);
+ expect(treeGrid.rowSelectionChanging.emit).toHaveBeenCalledTimes(0);
TreeGridFunctions.clickHeaderRowSelectionCheckbox(fix);
fix.detectChanges();
@@ -350,7 +350,7 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
TreeGridFunctions.verifyHeaderCheckboxSelection(fix, false);
TreeGridFunctions.verifyDataRowsSelection(fix, [], false);
expect(treeGrid.selectedRows).toEqual([]);
- expect(treeGrid.rowSelected.emit).toHaveBeenCalledTimes(0);
+ expect(treeGrid.rowSelectionChanging.emit).toHaveBeenCalledTimes(0);
});
it('should be able to select row of any level', () => {
@@ -1603,13 +1603,13 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 6, true, true);
}));
- it(`Setting true to the cancel property of the rowSelected event should not modify the selected rows collection`, () => {
+ it(`Setting true to the cancel property of the rowSelectionChanging event should not modify the selected rows collection`, () => {
- treeGrid.rowSelected.subscribe((e: IRowSelectionEventArgs) => {
+ treeGrid.rowSelectionChanging.subscribe((e: IRowSelectionEventArgs) => {
e.cancel = true;
});
- spyOn(treeGrid.rowSelected, 'emit').and.callThrough();
+ spyOn(treeGrid.rowSelectionChanging, 'emit').and.callThrough();
treeGrid.selectionService.selectRowsWithNoEvent([317]);
fix.detectChanges();
@@ -1626,7 +1626,7 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
cancel: true
};
- expect(treeGrid.rowSelected.emit).toHaveBeenCalledWith(args);
+ expect(treeGrid.rowSelectionChanging.emit).toHaveBeenCalledWith(args);
fix.detectChanges();
expect(getVisibleSelectedRows(fix).length).toBe(4);
@@ -1686,11 +1686,11 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
});
it('selectRowById event SHOULD be emitted correctly with valid arguments.', () => {
- spyOn(treeGrid.rowSelected, 'emit').and.callThrough();
+ spyOn(treeGrid.rowSelectionChanging, 'emit').and.callThrough();
treeGrid.selectionService.selectRowsWithNoEvent([317]);
fix.detectChanges();
- expect(treeGrid.rowSelected.emit).toHaveBeenCalledTimes(0);
+ expect(treeGrid.rowSelectionChanging.emit).toHaveBeenCalledTimes(0);
expect(getVisibleSelectedRows(fix).length).toBe(4);
TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 0, false, null);
TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 3, true, true);
@@ -1710,7 +1710,7 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
cancel: false
};
- expect(treeGrid.rowSelected.emit).toHaveBeenCalledWith(args);
+ expect(treeGrid.rowSelectionChanging.emit).toHaveBeenCalledWith(args);
treeGrid.cdr.detectChanges();
@@ -1726,10 +1726,10 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
});
it('After changing the newSelection arguments of onSelectedRowChange, the arguments SHOULD be correct.', () => {
- treeGrid.rowSelected.subscribe((e: IRowSelectionEventArgs) => {
+ treeGrid.rowSelectionChanging.subscribe((e: IRowSelectionEventArgs) => {
e.newSelection = [847, 663];
});
- spyOn(treeGrid.rowSelected, 'emit').and.callThrough();
+ spyOn(treeGrid.rowSelectionChanging, 'emit').and.callThrough();
treeGrid.selectionService.selectRowsWithNoEvent([317], true);
fix.detectChanges();
@@ -1745,7 +1745,7 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
cancel: false
};
- expect(treeGrid.rowSelected.emit).toHaveBeenCalledWith(selectionArgs);
+ expect(treeGrid.rowSelectionChanging.emit).toHaveBeenCalledWith(selectionArgs);
treeGrid.cdr.detectChanges();
diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-interfaces.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-interfaces.spec.ts
index d4558fe8496..8043d5266f5 100644
--- a/projects/igniteui-angular/src/lib/test-utils/grid-interfaces.spec.ts
+++ b/projects/igniteui-angular/src/lib/test-utils/grid-interfaces.spec.ts
@@ -41,9 +41,9 @@ export interface IEditDone {
editDone(event): void;
}
-/* Add to template: ` (rowSelected)="rowSelectionChange($event)"` */
+/* Add to template: ` (rowSelectionChanging)="rowSelectionChange($event)"` */
export interface IGridRowSelectionChange {
- rowSelected(event): void;
+ rowSelectionChanging(event): void;
}
/* Add to template: ` (columnResized)="columnResized($event)"` */
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 350d02c1487..aa70b807f07 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
@@ -237,13 +237,13 @@ export class RowSelectionWithoutPrimaryKeyComponent extends BasicGridComponent {
@Component({
template: GridTemplateStrings.declareGrid(
` rowSelection = "multiple"`,
- EventSubscriptions.rowSelected,
+ EventSubscriptions.rowSelectionChanging,
ColumnDefinitions.productBasic)
})
export class SelectionCancellableComponent extends BasicGridComponent {
public data = SampleTestData.foodProductData();
- public rowSelected(evt) {
+ public rowSelectionChanging(evt) {
if (evt.added.length > 0 && (evt.added[0].ProductID) % 2 === 0) {
evt.newSelection = evt.oldSelection || [];
}
diff --git a/projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts b/projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts
index a0253b287fc..8cf9d6687ee 100644
--- a/projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts
+++ b/projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts
@@ -524,7 +524,7 @@ export class EventSubscriptions {
public static onEditDone = ` (cellEdit)="editDone($event)"`;
- public static rowSelected = ` (rowSelected)="rowSelected($event)"`;
+ public static rowSelectionChanging = ` (rowSelectionChanging)="rowSelectionChanging($event)"`;
public static columnResized = ` (columnResized)="columnResized($event)"`;
diff --git a/src/app/grid-groupby/grid-groupby.sample.html b/src/app/grid-groupby/grid-groupby.sample.html
index b85fe7abca9..1d0fecaf3ea 100644
--- a/src/app/grid-groupby/grid-groupby.sample.html
+++ b/src/app/grid-groupby/grid-groupby.sample.html
@@ -69,7 +69,7 @@
Selection Performance
+ height="500px" rowSelection="multiple" [groupingExpressions]="perfGrpExpr" (rowSelectionChanging)="rowSelectionChanged($event)">
diff --git a/src/app/grid-groupby/grid-groupby.sample.ts b/src/app/grid-groupby/grid-groupby.sample.ts
index 9872a78be43..bf700a92c14 100644
--- a/src/app/grid-groupby/grid-groupby.sample.ts
+++ b/src/app/grid-groupby/grid-groupby.sample.ts
@@ -3,7 +3,7 @@ import { Component, ViewChild, OnInit, Inject } from '@angular/core';
import {
IgxGridComponent, SortingDirection, ISortingExpression,
- DefaultSortingStrategy, DisplayDensity, IDisplayDensityOptions, DisplayDensityToken, GridSummaryPosition, GridSummaryCalculationMode
+ DefaultSortingStrategy, DisplayDensity, IDisplayDensityOptions, DisplayDensityToken, GridSummaryPosition, GridSummaryCalculationMode, IRowSelectionEventArgs
} from 'igniteui-angular';
@Component({
@@ -33,7 +33,7 @@ export class GridGroupBySampleComponent implements OnInit {
constructor(@Inject(DisplayDensityToken) public displayDensityOptions: IDisplayDensityOptions) { }
public ngOnInit(): void {
- for (let i = 0; i < 60; i++) {
+ for (let i = 0; i < 2500; i++) {
this.data2.push(...Array(10).fill({ STATUS: 'A', FIELD: 'some text' }));
this.data2.push(...Array(10).fill({ STATUS: 'B', FIELD: 'some text' }));
this.data2.push(...Array(10).fill({ STATUS: 'C', FIELD: 'some text' }));
@@ -174,4 +174,8 @@ export class GridGroupBySampleComponent implements OnInit {
this.grid1.showGroupArea = !this.grid1.showGroupArea;
this.grid1.cdr.detectChanges();
}
+
+ public rowSelectionChanged(e: IRowSelectionEventArgs) {
+ console.log(e);
+ }
}
diff --git a/src/app/grid-selection/grid-selection.sample.html b/src/app/grid-selection/grid-selection.sample.html
index 9124e5f21a4..c592adc14df 100644
--- a/src/app/grid-selection/grid-selection.sample.html
+++ b/src/app/grid-selection/grid-selection.sample.html
@@ -17,7 +17,7 @@
+ [width]="'800px'" [height]="'600px'" (rowSelectionChanging)="log($event)">
diff --git a/src/app/grid-updates-test/grid-updates.component.html b/src/app/grid-updates-test/grid-updates.component.html
index 6bf5f0ffb1b..0ebfed7848a 100644
--- a/src/app/grid-updates-test/grid-updates.component.html
+++ b/src/app/grid-updates-test/grid-updates.component.html
@@ -2,13 +2,13 @@
Sample with Grids
-
@@ -53,7 +53,7 @@
-
+