Skip to main content

DHTMLX Kanban. Links between tasks example

Task dependencies are common in project workflows: one task can't start until another finishes, or multiple tasks block a single deliverable. Links between cards capture these relationships as structured data and let users manage them from the card editor.

Live example​

const { Kanban } = kanban;
const { cards, columns, links } = getData();

const board = new Kanban("#root", {
  columns,
  cards,
  links,
  editorShape: [
    {
      type:"text",
      key: "label",
      label:"Label",
    },
    {
      type: "links",
      key: "links",
      label: "Links",
    },
  ],
});

<!-- component container -->
<div id="root" style="height: 100%;"></div>

<!-- dataset  -->
<script src="https://snippet.dhtmlx.com/codebase/data/kanban/01/dataset.js"></script>

The code passes a links array to the constructor alongside columns and cards. Each link object defines a connection between two cards. The editor includes a type: "links" field that lets users manage dependencies from the card editor, adding, viewing, and removing links without touching the board directly.

Solution overview​

  1. Define a links array with objects describing connections between cards
  2. Pass links to the Kanban constructor alongside columns and cards
  3. Add { type: "links", key: "links", label: "Links" } to editorShape for in-editor link management

Key points​

  • Links are separate data: Links live in their own array, not inside card objects. They reference cards by ID
  • Editor integration: The type: "links" editor field provides a UI for managing links without needing custom code
  • Links are managed in the editor, not on the board: Links are stored as data and surfaced through the type: "links" editor field - there is no visual overlay drawing connecting lines between cards on the board itself

API reference​

  • links: Defines task dependencies
  • editorShape: Editor field configuration including link management

Additional resources​