feat: add itemHasChildrenPath property (#3468)

packages/grid/src/vaadin-grid-data-provider-mixin.d.ts

@@ -101,6 +101,12 @@ export declare class DataProviderMixinClass<TItem> {
    */
   readonly loading: boolean | null | undefined;
 
+  /**
+   * Path to an item sub-property that indicates whether the item has child items.
+   * @attr {string} item-has-children-path
+   */
+  itemHasChildrenPath: string;
+
   /**
    * Path to an item sub-property that identifies the item.
    * @attr {string} item-id-path

packages/grid/src/vaadin-grid-data-provider-mixin.js

@@ -186,6 +186,15 @@ export const DataProviderMixin = (superClass) =>
           value: false
         },
 
+        /**
+         * Path to an item sub-property that indicates whether the item has child items.
+         * @attr {string} item-has-children-path
+         */
+        itemHasChildrenPath: {
+          type: String,
+          value: 'children'
+        },
+
         /**
          * Path to an item sub-property that identifies the item.
          * @attr {string} item-id-path

packages/grid/src/vaadin-grid-keyboard-navigation-mixin.js

@@ -216,14 +216,12 @@ export const KeyboardNavigationMixin = (superClass) =>
       }
     }
 
-    // TODO: A tree toggle component should not be the way to determine if the row is expandable
     /** @private */
     __isRowExpandable(row) {
-      const treeToggle = [...row.children].reduce(
-        (value, cell) => value || cell._content.querySelector('vaadin-grid-tree-toggle'),
-        null
-      );
-      return treeToggle && !treeToggle.expanded && !treeToggle.leaf;
+      if (this.itemHasChildrenPath) {
+        const item = row._item;
+        return item && this.get(this.itemHasChildrenPath, item) && !this._isExpanded(item);
+      }
     }
 
     /** @private */

packages/grid/src/vaadin-grid-tree-column.d.ts

@@ -28,6 +28,7 @@ declare class GridTreeColumn<TItem = GridDefaultItem> extends GridColumn<TItem>
   /**
    * JS Path of the property in the item that indicates whether the item has child items.
    * @attr {string} item-has-children-path
+   * @deprecated Use `grid.itemHasChildrenPath` instead.
    */
   itemHasChildrenPath: string | null | undefined;
 }

packages/grid/src/vaadin-grid-tree-column.js

@@ -34,10 +34,11 @@ class GridTreeColumn extends GridColumn {
       /**
        * JS Path of the property in the item that indicates whether the item has child items.
        * @attr {string} item-has-children-path
+       * @deprecated Use `grid.itemHasChildrenPath` instead.
        */
       itemHasChildrenPath: {
         type: String,
-        value: 'children'
+        observer: '_itemHasChildrenPathChanged'
       }
     };
   }
@@ -68,7 +69,7 @@ class GridTreeColumn extends GridColumn {
     toggle.__item = item;
     toggle.__rendererExpanded = expanded;
     toggle.expanded = expanded;
-    toggle.leaf = this.__isLeafItem(item, this.itemHasChildrenPath);
+    toggle.leaf = this.__isLeafItem(item, this._grid.itemHasChildrenPath);
     toggle.textContent = this.__getToggleContent(this.path, item);
     toggle.level = level;
   }
@@ -84,6 +85,19 @@ class GridTreeColumn extends GridColumn {
     return this.__defaultRenderer;
   }
 
+  /** @private */
+  _itemHasChildrenPathChanged(itemHasChildrenPath) {
+    if (itemHasChildrenPath) {
+      console.warn(
+        `WARNING: Since Vaadin 23, itemHasChildrenPath on <vaadin-grid-tree-column> is deprecated. Please set this property on the <vaadin-grid> instead.`
+      );
+
+      if (this._grid) {
+        this._grid.itemHasChildrenPath = itemHasChildrenPath;
+      }
+    }
+  }
+
   /**
    * Expands or collapses the row once the tree toggle is switched.
    * The listener handles only user-fired events.

packages/grid/test/accessibility.test.js

@@ -198,11 +198,9 @@ describe('accessibility', () => {
     beforeEach(() => {
       grid = fixtureSync(`
         <vaadin-grid item-id-path="name">
-          <vaadin-grid-tree-column path="name" header="" width="100px" flex-shrink="0"></vaadin-grid-tree-column>
           <vaadin-grid-column path="name" width="200px" flex-shrink="0"></vaadin-grid-column>
         </vaadin-grid>
       `);
-
       grid.dataProvider = hierarchicalDataProvider;
       flushGrid(grid);
     });

packages/grid/test/data-provider.test.js

@@ -250,6 +250,10 @@ describe('data provider', () => {
     });
 
     describe('first level', () => {
+      it('should set itemHasChildren path by default', () => {
+        expect(grid.itemHasChildrenPath).to.equal('children');
+      });
+
       it('should have collapsed items by default', () => {
         for (let i = 0; i < grid._effectiveSize; i++) {
           expect(isIndexExpanded(grid, i)).to.be.false;

packages/grid/test/scroll-to-index.test.js

@@ -30,8 +30,8 @@ const fixtures = {
     </vaadin-grid>
   `,
   treeGrid: `
-    <vaadin-grid style="width: 200px; height: 500px;">
-      <vaadin-grid-tree-column path="name" header="foo" item-has-children-path="hasChildren"></vaadin-grid-tree-column>
+    <vaadin-grid style="width: 200px; height: 500px;" item-has-children-path="hasChildren">
+      <vaadin-grid-tree-column path="name" header="foo"></vaadin-grid-tree-column>
     </vaadin-grid>
   `
 };

packages/grid/test/tree-toggle.test.js

@@ -144,24 +144,44 @@ describe('tree toggle', () => {
       expect(toggle.level).to.equal(0);
     });
 
-    it('should have a higher level', () => {
-      column.itemHasChildrenPath = 'hasChildren';
-      toggle.expanded = true;
-      const childToggle = getBodyCellContent(grid, 1, 0).firstElementChild;
-      expect(childToggle.level).to.equal(1);
-    });
-
-    it('should not be a leaf', () => {
-      column.itemHasChildrenPath = 'hasChildren';
-      expect(toggle.leaf).to.be.false;
-    });
-
     it('should ignore a custom renderer', () => {
       column.renderer = (root) => {
         root.innerHTML = 'cell';
       };
 
       expect(getBodyCellContent(grid, 0, 0).firstElementChild).to.equal(toggle);
     });
+
+    describe('itemHasChildrenPath', () => {
+      beforeEach(() => {
+        sinon.stub(console, 'warn');
+      });
+
+      afterEach(() => {
+        console.warn.restore();
+      });
+
+      it('should have a higher level', () => {
+        column.itemHasChildrenPath = 'hasChildren';
+        toggle.expanded = true;
+        const childToggle = getBodyCellContent(grid, 1, 0).firstElementChild;
+        expect(childToggle.level).to.equal(1);
+      });
+
+      it('should not be a leaf', () => {
+        column.itemHasChildrenPath = 'hasChildren';
+        expect(toggle.leaf).to.be.false;
+      });
+
+      it('should warn when setting column property', () => {
+        column.itemHasChildrenPath = 'hasChildren';
+        expect(console.warn.called).to.be.true;
+      });
+
+      it('should forward column property to the grid', () => {
+        column.itemHasChildrenPath = 'hasChildren';
+        expect(grid.itemHasChildrenPath).to.equal('hasChildren');
+      });
+    });
   });
 });

packages/grid/test/typings/grid.types.ts

@@ -141,6 +141,7 @@ assertType<number>(narrowedGrid.pageSize);
 assertType<number>(narrowedGrid.size);
 assertType<boolean | null | undefined>(narrowedGrid.loading);
 assertType<string | null | undefined>(narrowedGrid.itemIdPath);
+assertType<string>(narrowedGrid.itemHasChildrenPath);
 
 assertType<TestGridItem[] | undefined | null>(narrowedGrid.items);
 assertType<TestGridItem | null>(narrowedGrid.activeItem);