Skip to main content

Hierarchal context menus

Add hierarchal items to the context menu.

import canvasDatagrid from 'canvas-datagrid';
import data from '/data.json';

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

grid.addEventListener('contextmenu', function (e) {
  e.items.push({
    title: 'Top level item',
    items: [
      {
        title: 'Child item #1',
        click: function (ev) {
          grid.data[0].col1 = e.cell.value;
          grid.draw();
        },
      },
      {
        title: 'Child item #2',
        click: function (ev) {
          grid.data[0].col1 = e.cell.value;
          grid.draw();
        },
      },
    ],
  });
  e.items.push({
    title:
      'You have ' +
      grid.selectedRows.filter(function (row) {
        return !!row;
      }).length +
      ' rows selected',
  });
});

app.append(gridElement);