From b1d4d0999c4dad4d9ba031cc69a74abcdef1404e Mon Sep 17 00:00:00 2001
From: Teodosia Hristodorova <THristodorova@infragistics.com>
Date: Tue, 26 Jan 2021 12:42:03 +0200
Subject: [PATCH 1/2] Add Multiplecascade to TreeGreed selection sample

---
 .../tree-grid-selection-sample.component.html       | 13 +++++++++++++
 .../tree-grid-selection-sample.component.scss       |  4 +++-
 .../tree-grid-selection-sample.component.ts         | 10 ++++++----
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/app/tree-grid/tree-grid-selection-sample/tree-grid-selection-sample.component.html b/src/app/tree-grid/tree-grid-selection-sample/tree-grid-selection-sample.component.html
index 81d934883e..c79bb17eeb 100644
--- a/src/app/tree-grid/tree-grid-selection-sample/tree-grid-selection-sample.component.html
+++ b/src/app/tree-grid/tree-grid-selection-sample/tree-grid-selection-sample.component.html
@@ -5,6 +5,19 @@
         <igx-snackbar #snackbar actionText="Got it. Thanks!" (onAction)="snackbar.hide()">
             <div class="container">
                 <igx-icon>notification_important</igx-icon>
+                <ng-container *ngIf="selectionMode === 'multipleCascade'">
+                    <ul>
+                        <li><b>Now you can select multiple rows within a grid and their children.</b></li>
+                        <li>Click on row selector field or press SPACE key when some cell is active to toggle row
+                            selection.
+                        </li>
+                        <li>On cell click the row get selected and previous selection state is cleared.</li>
+                        <li>On cell click holding ctrl key, the row get selected and previous selection state is
+                            preserved.
+                        </li>
+                        <li>Shift + click select a range of rows.</li>
+                    </ul>
+                </ng-container>
                 <ng-container *ngIf="selectionMode === 'multiple'">
                     <ul>
                         <li><b>Now you can select multiple rows within a grid.</b></li>
diff --git a/src/app/tree-grid/tree-grid-selection-sample/tree-grid-selection-sample.component.scss b/src/app/tree-grid/tree-grid-selection-sample/tree-grid-selection-sample.component.scss
index 207c71bbd9..d4f70012fc 100644
--- a/src/app/tree-grid/tree-grid-selection-sample/tree-grid-selection-sample.component.scss
+++ b/src/app/tree-grid/tree-grid-selection-sample/tree-grid-selection-sample.component.scss
@@ -10,7 +10,9 @@
 .grid__wrapper {
     margin: 0 16px;
 }
-
+igx-buttongroup{
+    width: 500px;
+}
 igx-snackbar {
     position: absolute;
     top: 0;
diff --git a/src/app/tree-grid/tree-grid-selection-sample/tree-grid-selection-sample.component.ts b/src/app/tree-grid/tree-grid-selection-sample/tree-grid-selection-sample.component.ts
index c019726f6e..facba73c0f 100644
--- a/src/app/tree-grid/tree-grid-selection-sample/tree-grid-selection-sample.component.ts
+++ b/src/app/tree-grid/tree-grid-selection-sample/tree-grid-selection-sample.component.ts
@@ -18,10 +18,12 @@ export class TreeGridSelectionSampleComponent implements OnInit {
 
     constructor() {
         this.data = generateEmployeeFlatData();
+
         this.selectionModes = [
-            { label: "none", selected: this.selectionMode === "none", togglable: true },
-            { label: "single", selected: this.selectionMode === "single", togglable: true },
-            { label: "multiple", selected: this.selectionMode === "multiple", togglable: true }
+            { label: "none", selectMode: "none", selected: this.selectionMode === "none", togglable: true },
+            { label: "single", selectMode: "single", selected: this.selectionMode === "single", togglable: true },
+            { label: "multiple", selectMode: "multiple", selected: this.selectionMode === "multiple", togglable: true },
+            { label: "cascade", selectMode: "multipleCascade", selected: this.selectionMode === "multipleCascade", togglable: true }
         ];
     }
 
@@ -33,7 +35,7 @@ export class TreeGridSelectionSampleComponent implements OnInit {
     public handleRowSelection(event) { }
 
     public selectCellSelectionMode(args) {
-        this.selectionMode = this.selectionModes[args.index].label;
+      this.selectionMode = this.selectionModes[args.index].selectMode;
         this.snackbar.show();
     }
 }

From 808882436dbd27323595130eef3142f01e72ec37 Mon Sep 17 00:00:00 2001
From: Teodosia Hristodorova <THristodorova@infragistics.com>
Date: Tue, 26 Jan 2021 12:51:13 +0200
Subject: [PATCH 2/2] fixed lint

---
 .../tree-grid-selection-sample.component.ts                     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/tree-grid/tree-grid-selection-sample/tree-grid-selection-sample.component.ts b/src/app/tree-grid/tree-grid-selection-sample/tree-grid-selection-sample.component.ts
index facba73c0f..6b19fed125 100644
--- a/src/app/tree-grid/tree-grid-selection-sample/tree-grid-selection-sample.component.ts
+++ b/src/app/tree-grid/tree-grid-selection-sample/tree-grid-selection-sample.component.ts
@@ -35,7 +35,7 @@ export class TreeGridSelectionSampleComponent implements OnInit {
     public handleRowSelection(event) { }
 
     public selectCellSelectionMode(args) {
-      this.selectionMode = this.selectionModes[args.index].selectMode;
+        this.selectionMode = this.selectionModes[args.index].selectMode;
         this.snackbar.show();
     }
 }