Merge pull request #831 from ghiscoding/feat/tree-data-change-toggled-item

feat(tree): add `dynamicallyToggledItemState` method to toggle parent(s)

Author: ghiscoding

src/app/examples/grid-tree-data-parent-child.component.html

@@ -35,6 +35,21 @@ <h2>
         <span class="icon mdi mdi-history"></span>
         <span>Reapply Previous Toggled Items</span>
       </button>
+      <button (click)="collapseAllWithoutEvent()" class="btn btn-outline-secondary btn-sm"
+              data-test="collapse-all-noevent-btn">
+        <span class="mdi mdi-arrow-collapse"></span>
+        <span>Collapse All (without triggering event)</span>
+      </button>
+      <button (click)="dynamicallyToggledFirstParent()" class="btn btn-outline-secondary btn-sm"
+              data-test="dynamically-toggle-first-parent-btn">
+        <span>Dynamically Toggle First Parent</span>
+      </button>
+      <button (click)="reapplyToggledItems()" data-test="reapply-toggled-items-btn"
+              class="btn btn-outline-secondary btn-sm"
+              disabled.bind="hasNoExpandCollapseChanged">
+        <span class="mdi mdi-history"></span>
+        <span>Reapply Previous Toggled Items</span>
+      </button>
       <div class.bind="loadingClass"></div>
     </div>
   </div>
@@ -75,6 +90,17 @@ <h2>
                      [gridOptions]="gridOptions"
                      [dataset]="dataset"
                      (onGridStateChanged)="handleOnGridStateChanged($event.detail)"
-                     (onAngularGridCreated)="angularGridReady($event.detail)">
+                     (onAngularGridCreated)="angularGridReady($event.detail)"
+                     (onBeforeFilterChange)="showSpinner()"
+                     (onFilterChanged)="hideSpinner()"
+                     (onBeforeFilterClear)="showSpinner()"
+                     (onFilterCleared)="hideSpinner()"
+                     (onBeforeSortChange)="showSpinner()"
+                     (onSortChanged)="hideSpinner()"
+                     (onBeforeToggleTreeCollapse)="showSpinner()"
+                     (onToggle-tree-collapsed)="hideSpinner()"
+                     (onTree-full-toggle-start)="showSpinner()"
+                     (onTree-full-toggle-end)="handleOnTreeFullToggleEnd($event.detail)"
+                     (onTree-item-toggled)="handleOnTreeItemToggled($event.detail)">
   </angular-slickgrid>
 </div>

src/app/examples/grid-tree-data-parent-child.component.ts

@@ -11,6 +11,7 @@ import {
   GridStateChange,
   GridStateType,
   TreeToggledItem,
+  TreeToggleStateChange,
 } from './../modules/angular-slickgrid';
 
 const NB_ITEMS = 500;
@@ -72,7 +73,7 @@ export class GridTreeDataParentChildComponent implements OnInit {
         id: 'percentComplete', name: '% Complete', field: 'percentComplete',
         minWidth: 120, maxWidth: 200, exportWithFormatter: false,
         sortable: true, filterable: true, filter: { model: Filters.compoundSlider, operator: '>=' },
-        formatter: Formatters.percentCompleteBar, type: FieldType.number,
+        formatter: Formatters.percentCompleteBarWithText, type: FieldType.number,
       },
       {
         id: 'start', name: 'Start', field: 'start', minWidth: 60,
@@ -137,7 +138,7 @@ export class GridTreeDataParentChildComponent implements OnInit {
       multiColumnSort: false, // multi-column sorting is not supported with Tree Data, so you need to disable it
       presets: {
         filters: [{ columnId: 'percentComplete', searchTerms: [25], operator: '>=' }],
-        treeData: { toggledItems: [{ itemId: 1, isCollapsed: false }] },
+        // treeData: { toggledItems: [{ itemId: 1, isCollapsed: false }] },
       },
 
       // change header/cell row height for material design theme
@@ -255,7 +256,6 @@ export class GridTreeDataParentChildComponent implements OnInit {
     let indent = 0;
     const parents = [];
     const data = [];
-
     // prepare the data
     for (let i = 0; i < rowCount; i++) {
       const randomYear = 2000 + Math.floor(Math.random() * 10);
@@ -286,7 +286,6 @@ export class GridTreeDataParentChildComponent implements OnInit {
         indent--;
         parents.pop();
       }
-
       if (parents.length > 0) {
         parentId = parents[parents.length - 1];
       } else {
@@ -306,20 +305,45 @@ export class GridTreeDataParentChildComponent implements OnInit {
     return data;
   }
 
-  /** Dispatched event of a Grid State Changed event */
+  handleOnTreeFullToggleEnd(treeToggleExecution: TreeToggleStateChange) {
+    console.log('Tree Data changes', treeToggleExecution);
+    this.hideSpinner();
+  }
+
+  /** Whenever a parent is being toggled, we'll keep a reference of all of these changes so that we can reapply them whenever we want */
+  handleOnTreeItemToggled(treeToggleExecution: TreeToggleStateChange) {
+    this.hasNoExpandCollapseChanged = false;
+    this.treeToggleItems = treeToggleExecution.toggledItems as TreeToggledItem[];
+    console.log('Tree Data changes', treeToggleExecution);
+  }
+
   handleOnGridStateChanged(gridStateChange: GridStateChange) {
     this.hasNoExpandCollapseChanged = false;
 
-    if (gridStateChange.change!.type === GridStateType.treeData) {
-      console.log('Tree Data gridStateChange', gridStateChange.gridState!.treeData);
-      this.treeToggleItems = gridStateChange.gridState!.treeData!.toggledItems as TreeToggledItem[];
+    if (gridStateChange?.change?.type === GridStateType.treeData) {
+      console.log('Tree Data gridStateChange', gridStateChange?.gridState?.treeData);
+      this.treeToggleItems = gridStateChange?.gridState?.treeData?.toggledItems as TreeToggledItem[];
     }
   }
 
   logTreeDataToggledItems() {
     console.log(this.angularGrid.treeDataService.getToggledItems());
   }
 
+  dynamicallyToggledFirstParent() {
+    const parentPropName = 'parentId';
+    const treeLevelPropName = 'treeLevel'; // if undefined in your options, the default prop name is "__treeLevel"
+    const newTreeLevel = 1;
+
+    // find first parent object and toggle it
+    const childItemFound = this.dataset.find((item) => item[treeLevelPropName] === newTreeLevel);
+    const parentItemFound = this.angularGrid.dataView.getItemByIdx(childItemFound[parentPropName]);
+
+    if (childItemFound && parentItemFound) {
+      this.angularGrid.treeDataService.dynamicallyToggleItemState([{ itemId: parentItemFound.id, isCollapsed: !parentItemFound.__collapsed }]);
+    }
+  }
+
   reapplyToggledItems() {
     this.angularGrid.treeDataService.applyToggledItemStateChanges(this.treeToggleItems);
   }