v4.1.0 - Tree support

Live Demo →
API Documentation →

New Features Since v4.0:

• Tree support for data provider:

  grid.dataProvider = function(params, callback) {
    // New request param: `params.parentItem`:
    // - `null` when first tree level is requested,
    // - parent item reference when a tree sublevel is requested.
    
    yourApiRequest(params, function(response) {
      // Callback expects items for the page, and total size of this tree level
      callback(response.items, response.totalLevelSize);
    });
  };

• New template variables for use in <vaadin-grid-column> body cell templates:

  • level (type: integer Number), current item’s level of the tree. First level is 0.
  • expanded (type: Boolean), true when current item’s tree sublevel is expanded. Supports two-way binding. Default is false, tree is collapsed.

• New helper element: <vaadin-grid-tree-toggle> for use in column templates:

  <vaadin-grid data-provider="[[treeDataProvider]]">
    <vaadin-grid-column>
      <template class="header">Name</template>
      <template>
  
        <vaadin-grid-tree-toggle
            leaf="[[!item.hasChildren]]"
            expanded="{{expanded}}"
            level="[[level]]">
          [[item.name]]
        </vaadin-grid-tree-toggle>
  
      </template>
    </vaadin-grid-column>
  </vaadin-grid>

• New <vaadin-grid> tree APIs:

  • expandItem(item) method
  • collapseItem(item) method
  • expandedItems array

• loading (Boolean, read-only, notifying) property API is exposed on the <vaadin-grid> element.

• loading state attribute on the row parts is available for theming