About this sample

This example shows how to create a custom node class that exposes some new properties in addition to the ones defined by TableNode and implements its own drawing logic.

  • Editable nodes - select a node with a mouseclick and select an editable field (name, title, comment) to change its' text
  • Editable images - select an image to edit and paste a url to change it
  • Adding and deleting nodes - right-click on any node to add a child to it. Right-clicking without a node will add an unconected node to the diagram. Delete a node by pressing the delete button with a selected node
  • Drag a node without a boss to any node to assign it as that node's child
  • IDs within the hierarchy are distributed automatically
  • Hierarchy rearranges automatically once changes by the user are made

This page requires a browser that supports HTML 5 Canvas element.