Merge pull request #3051 from IgniteUI/ikitanov/fix-3042

fix(grid-selection):Updating the use of rowSelectionChanging event in…

Author: zdrawku

src/app/grid/grid-sample-selection/grid-selection.component.html

@@ -49,6 +49,21 @@
     </igx-grid>
 </div>
 
+<igx-snackbar #snackbarRowCount actionText="Got it. Thanks!" (clicked)="snackbarRowCount.close()">
+    <div class="container">
+        <igx-icon>notification_important</igx-icon>
+        <ng-container *ngIf="selectionMode === 'multiple'">
+           <p>Number of selected rows: {{selectedRowsCount}}</p>
+        </ng-container>
+        <ng-container *ngIf="selectionMode === 'single' && this.selectedRowIndex !== undefined">
+            <p>Currently selected row index: {{selectedRowIndex}}</p>
+        </ng-container>
+        <ng-container *ngIf="selectionMode === 'single' && this.selectedRowIndex === undefined">
+            <p>There is no currently selected row.</p>
+        </ng-container>
+    </div>
+</igx-snackbar>
+
 <igx-snackbar #snackbar actionText="Got it. Thanks!" (clicked)="snackbar.close()">
     <div class="container">
         <igx-icon>notification_important</igx-icon>

src/app/grid/grid-sample-selection/grid-selection.component.scss

@@ -58,3 +58,7 @@ ul {
         margin: 20px;
     }
 }
+
+.container p {
+    margin-top: 20px;
+}

src/app/grid/grid-sample-selection/grid-selection.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 
-import { IgxGridComponent, IgxSnackbarComponent } from 'igniteui-angular';
+import { IgxGridComponent, IgxSnackbarComponent, IRowSelectionEventArgs } from 'igniteui-angular';
 import { Observable } from 'rxjs';
 import { FinancialDataService } from '../../services/financial.service';
 
@@ -15,12 +15,15 @@ import { FinancialDataService } from '../../services/financial.service';
 
 export class GridSelectionSampleComponent implements OnInit {
     @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent;
-    @ViewChild(IgxSnackbarComponent, { static: true }) public snackbar: IgxSnackbarComponent;
+    @ViewChild('snackbarRowCount', { static: true }) public snackbarRowCount: IgxSnackbarComponent;
+    @ViewChild('snackbar', { static: true }) public snackbar: IgxSnackbarComponent;
     public data: Observable<any[]>;
     public selectionMode = 'multiple';
     public selectionModes = [];
     public hideRowSelectors = false;
     public selectedRows = [1, 2, 3];
+    public selectedRowsCount;
+    public selectedRowIndex;
 
     constructor(private localService: FinancialDataService) {
         this.localService.getData(100000);
@@ -35,20 +38,27 @@ export class GridSelectionSampleComponent implements OnInit {
     public ngOnInit(): void {
         this.snackbar.autoHide = false;
         this.snackbar.open();
+        this.snackbarRowCount.autoHide = true;
+        this.snackbarRowCount.close();
     }
-
     public formatNumber(value: number) {
         return value.toFixed(2);
     }
     public formatCurrency(value: number) {
         return '$' + value.toFixed(2);
     }
-    public handleRowSelection(event) {
-        const targetCell = event.cell;
+    public handleRowSelection(event:IRowSelectionEventArgs) {
+        this.selectedRowsCount = event.newSelection.length;
+        this.selectedRowIndex = event.newSelection[0];
+        this.snackbarRowCount.open();
+        this.snackbar.close();
     }
 
     public selectCellSelectionMode(args) {
         this.selectionMode = this.selectionModes[args.index].label;
         this.snackbar.open();
+        this.snackbarRowCount.close();
+        this.selectedRowsCount = undefined;
+        this.selectedRowIndex = undefined;
     }
 }

src/app/hierarchical-grid/hierarchical-grid-selection/hierarchical-grid-selection.component.html

@@ -40,6 +40,21 @@
 </igx-hierarchical-grid>
 </div>
 
+<igx-snackbar #snackbarRowCount actionText="Got it. Thanks!" (clicked)="snackbarRowCount.close()">
+    <div class="container">
+        <igx-icon>notification_important</igx-icon>
+        <ng-container *ngIf="selectionMode === 'multiple'">
+           <p>Number of selected rows: {{selectedRowsCount}}</p>
+        </ng-container>
+        <ng-container *ngIf="selectionMode === 'single' && this.selectedRowIndex !== undefined">
+            <p>Currently selected row index: {{selectedRowIndex}}</p>
+        </ng-container>
+        <ng-container *ngIf="selectionMode === 'single' && this.selectedRowIndex === undefined">
+            <p>There is no currently selected row.</p>
+        </ng-container>
+    </div>
+</igx-snackbar>
+
 <igx-snackbar #snackbar actionText="Got it. Thanks!" (clicked)="snackbar.close()">
     <div class="container">
         <igx-icon>notification_important</igx-icon>

src/app/hierarchical-grid/hierarchical-grid-selection/hierarchical-grid-selection.component.scss

@@ -32,3 +32,7 @@
         margin: 20px;
     }
 }
+
+.container p {
+    margin-top: 20px;
+}

src/app/hierarchical-grid/hierarchical-grid-selection/hierarchical-grid-selection.component.ts

@@ -9,11 +9,14 @@ import { SINGERS } from '../../data/singersData';
 })
 
 export class HGridSelectionSampleComponent implements OnInit {
-    @ViewChild(IgxSnackbarComponent, { static: true }) public snackbar: IgxSnackbarComponent;
+    @ViewChild('snackbarRowCount', { static: true }) public snackbarRowCount: IgxSnackbarComponent;
+    @ViewChild('snackbar', { static: true }) public snackbar: IgxSnackbarComponent;
     public localdata;
     public selectionMode = 'multiple';
     public selectionModes = [];
     public hideRowSelectors = false;
+    public selectedRowsCount;
+    public selectedRowIndex;
 
     constructor() {
         this.localdata = SINGERS;
@@ -30,11 +33,20 @@ export class HGridSelectionSampleComponent implements OnInit {
 
     public selectCellSelectionMode(args) {
         this.selectionMode = this.selectionModes[args.index].label;
+        this.snackbarRowCount.close();
         this.snackbar.open();
+        this.selectedRowsCount = undefined;
+        this.selectedRowIndex = undefined;
     }
 
     public handleRowSelection(event) {
-        const targetCell = event.cell;
+        this.selectedRowsCount = event.newSelection.length;
+        if(event.newSelection.length > 0){
+            this.selectedRowIndex = event.newSelection[0].ID;
+        }
+        else this.selectedRowIndex = undefined;
+        this.snackbarRowCount.open();
+        this.snackbar.close();
     }
 
     public formatter = (a) => a;

src/app/tree-grid/tree-grid-selection-sample/tree-grid-selection-sample.component.html

@@ -14,6 +14,21 @@
     </igx-tree-grid>
 </div>
 
+<igx-snackbar #snackbarRowCount actionText="Got it. Thanks!" (clicked)="snackbarRowCount.close()">
+    <div class="container">
+        <igx-icon>notification_important</igx-icon>
+        <ng-container *ngIf="selectionMode === 'multiple' || selectionMode === 'multipleCascade'">
+           <p>Number of selected rows: {{selectedRowsCount}}</p>
+        </ng-container>
+        <ng-container *ngIf="selectionMode === 'single' && this.selectedRowIndex !== undefined">
+            <p>Currently selected row index: {{selectedRowIndex}}</p>
+        </ng-container>
+        <ng-container *ngIf="selectionMode === 'single' && this.selectedRowIndex === undefined">
+            <p>There is no currently selected row.</p>
+        </ng-container>
+    </div>
+</igx-snackbar>
+
 <igx-snackbar #snackbar actionText="Got it. Thanks!" (clicked)="snackbar.close()">
     <div class="container">
         <igx-icon>notification_important</igx-icon>

src/app/tree-grid/tree-grid-selection-sample/tree-grid-selection-sample.component.scss

@@ -27,3 +27,7 @@ igx-buttongroup {
         margin: 20px;
     }
 }
+
+.container p {
+    margin-top: 20px;
+}

src/app/tree-grid/tree-grid-selection-sample/tree-grid-selection-sample.component.ts

@@ -9,12 +9,15 @@ import { generateEmployeeFlatData } from '../data/employees-flat';
 })
 export class TreeGridSelectionSampleComponent implements OnInit {
     @ViewChild('treeGrid', { static: true }) public treeGrid: IgxTreeGridComponent;
-    @ViewChild(IgxSnackbarComponent, { static: true }) public snackbar: IgxSnackbarComponent;
+    @ViewChild('snackbarRowCount', { static: true }) public snackbarRowCount: IgxSnackbarComponent;
+    @ViewChild('snackbar', { static: true }) public snackbar: IgxSnackbarComponent;
     public data: any[];
     public selectionMode = 'multiple';
     public selectionModes = [];
     public hideRowSelectors = false;
     public selectedRows = [1, 2, 3];
+    public selectedRowsCount;
+    public selectedRowIndex;
 
     constructor() {
         this.data = generateEmployeeFlatData();
@@ -32,10 +35,18 @@ export class TreeGridSelectionSampleComponent implements OnInit {
         this.snackbar.open();
     }
 
-    public handleRowSelection(event) { }
+    public handleRowSelection(event) {
+        this.selectedRowsCount = event.newSelection.length;
+        this.selectedRowIndex = event.newSelection[0];
+        this.snackbarRowCount.open();
+        this.snackbar.close();
+    }
 
     public selectCellSelectionMode(args) {
         this.selectionMode = this.selectionModes[args.index].selectMode;
+        this.snackbarRowCount.close();
         this.snackbar.open();
+        this.selectedRowsCount = undefined;
+        this.selectedRowIndex = undefined;
     }
 }