Open a tree

Open a tree grid on a specific row. Use the expandtree event to control the data and settings of the tree grid.

import canvasDatagrid from 'canvas-datagrid';
import createData from '/create-data';

const app = document.getElementById('app');
const gridElement = document.createElement('div');
const grid = canvasDatagrid({
  parentNode: gridElement,
});

app.append(gridElement);

grid.style.height = '300px';
grid.style.width = '100%';
grid.data = createData();

grid.addEventListener('expandtree', function expandTree(e) {
  e.treeGrid.data = createData();
  // prevent repeated executions of this example code from blowing things up
  e.treeGrid.removeEventListener('expandtree', expandTree);
});
grid.expandTree(2);