Skip to main content

DHTMLX Kanban. Switching between projects example

When managing multiple projects in a single interface, users need to switch between different sets of tasks without leaving the page. Reloading the board data via parse lets you swap entire project datasets while keeping the same column structure.

Live example​

const { columns, cards } = getData();

const board = new kanban.Kanban("#root", {
    columns,
    cards
});

document.getElementById("project").addEventListener("change", function (e) {
    board.parse({
        cards:
            e.target.value == "kanban"?
            cards:
            supportCards
    })
});
<!-- custom styles -->
<link rel="stylesheet" href="https://snippet.dhtmlx.com/codebase/assets/css/auxiliary_controls.css">

<!-- component containers -->
<section class="dhx_sample-controls">
    <label for="project" class="dhx_sample-label">Select project:</label>
    <select name="project" class="dhx_select dhx_sample-input" id="project">
        <option value="kanban" selected>Kanban</option>
        <option value="support">Support</option>
    </select>
</section>
<div id="root" style="height: 100%;"></div>

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

<script>
const supportCards = [
        {
            label: "Complete the documentation",
            column: "inprogress",
        },
        {
            label: "Write new tests",
            column: "backlog",
        },
    ];
</script>

The code listens to a <select> dropdown and calls board.parse({ cards: newCards }) when the selection changes. The parse method replaces the current card data with the new dataset while preserving the existing columns. Each project has its own cards array, and the dropdown value determines which one is loaded.

Solution overview​

  1. Initialize the board with the default project's cards and columns
  2. Listen for changes on a project selector (dropdown, tabs, etc.)
  3. Call board.parse({ cards: projectCards }) to replace the board data

Key points​

  • parse replaces data: Unlike addCard, parse wipes existing cards and loads new ones. It's a full data refresh, not an incremental update
  • Columns persist: Passing only cards to parse keeps the existing column structure. Pass columns too if they differ per project
  • No reinitialization needed: parse updates the board in place without creating a new Kanban instance
  • parse is an alias of setConfig: alternatively, if you change several props at once, e.g. parse new data and set a different columnKey or rowKey, you can safely call setConfig({ cards: [...], ..., columnKey: "col" }), parse is an alias of setConfig for data properties.

API reference​

  • parse: Loads new data into an existing board

Additional resources​