Merge pull request #2455 from IgniteUI/teodosiah/add-multiplecascade-to-tree-grid-selection-sample

Add Multiplecascade to TreeGrid selection sample

Author: DiyanDimitrov

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!" (clicked)="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>

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;

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();
     }
 }