Merge pull request #975 from ghiscoding/chore/update-tree-data-item

chore(demo): add code sample to update Tree Data item, closes #974

Author: ghiscoding

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

@@ -60,6 +60,10 @@ <h2>
         <span class="icon mdi mdi-plus color-white"></span>
         <span>Add New Item (in 1st group)</span>
       </button>
+      <button (click)="updateFirstRow()" data-test="update-item-btn" class="btn btn-outline-secondary btn-sm">
+        <span class="icon mdi mdi-pencil"></span>
+        <span>Update 1st Row Item</span>
+      </button>
       <button (click)="collapseAll()" data-test="collapse-all-btn" class="btn btn-outline-secondary btn-sm">
         <span class="icon mdi mdi-arrow-collapse"></span>
         <span>Collapse All</span>

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

@@ -216,6 +216,29 @@ export class GridTreeDataParentChildComponent implements OnInit {
     }
   }
 
+  updateFirstRow() {
+    // to update any of the grid rows, we CANNOT simply pass a new updated object
+    // we MUST read it from the DataView first (that will include all mutated Tree Data props, like `__treeLevel`, `__parentId`, ...) and then update it
+    const item = this.angularGrid.dataView.getItemById<any>(0);
+
+    // option 1
+    /*
+    // now that we have the extra Tree Data props, we can update any of the object properties (while keeping the Tree Data props)
+    item.duration = `11 days`;
+    item.percentComplete = 77;
+    item.start = new Date();
+    item.finish = new Date();
+    item.effortDriven = false;
+
+    // finally we can now update the item which includes our updated props + the Tree Data props (`__treeLevel`, ...)
+    this.angularGrid.gridService.updateItem(item);
+    */
+
+    // optiona 2 - alternative
+    // we could also simply use the spread operator directly
+    this.angularGrid.gridService.updateItem({ ...item, duration: `11 days`, percentComplete: 77, start: new Date(), finish: new Date(), effortDriven: false });
+  }
+
   collapseAll() {
     this.angularGrid.treeDataService.toggleTreeDataCollapse(true);
   }

test/cypress/e2e/example28.cy.js

@@ -1,4 +1,5 @@
 /// <reference types="cypress" />
+import { changeTimezone, zeroPadding } from '../plugins/utilities';
 
 function removeExtraSpaces(text) {
   return `${text}`.replace(/\s+/g, ' ').trim();
@@ -208,6 +209,29 @@ describe('Example 28 - Tree Data (from a flat dataset with parentId references)'
       .contains('Task 500');
   });
 
+  it('should be able to update the 1st row item (Task 0)', () => {
+    cy.get('[data-test=update-item-btn]')
+      .contains('Update 1st Row Item')
+      .click();
+
+    const now = new Date();
+    const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    const today = changeTimezone(now, tz);
+
+    const currentDate = today.getDate();
+    let currentMonth = today.getMonth() + 1; // month is zero based, let's add 1 to it
+    if (currentMonth < 10) {
+      currentMonth = `0${currentMonth}`; // add zero padding
+    }
+    const currentYear = today.getFullYear();
+
+    cy.get(`#grid28 [style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0)`).should('contain', 'Task 0');
+    cy.get(`#grid28 [style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(1)`).should('contain', '11 days');
+    cy.get(`#grid28 [style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', '77%');
+    cy.get(`#grid28 [style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(3)`).should('contain', `${currentYear}-${zeroPadding(currentMonth)}-${zeroPadding(currentDate)}`);
+    cy.get(`#grid28 [style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(4)`).should('contain', `${currentYear}-${zeroPadding(currentMonth)}-${zeroPadding(currentDate)}`);
+  });
+
   it('should collapse the Tree and not expect to see the newly inserted item (Task 500) because all child will be collapsed', () => {
     cy.get('[data-test=collapse-all-btn]')
       .contains('Collapse All')