Skip to main content

DHTMLX Kanban. Readonly mode example

Sometimes a Kanban board needs to be displayed without allowing modifications: for dashboards, reporting views, or presentation mode. Readonly mode disables all interactive editing while keeping the board fully rendered and navigable.

Live example​

const { Kanban, Toolbar } = kanban;

const board = new Kanban("#root", {
    columns,
    cards,
    readonly: true,
});
new Toolbar("#toolbar", {
    api: board.api,
    items: ["search"],
});
<!-- component containers -->
<div id="toolbar"></div>
<div id="root" style="height: calc(100% - 56px);"></div>

<!-- dataset -->

<script>
const columns = [
		{
			label: "Backlog",
			id: "backlog",
		},
		{
			label: "In progress",
			id: "inprogress",
		},
		{
			label: "Testing",
			id: "testing",
		},
		{
			label: "Done",
			id: "done",
		},
	];
    
    const cards = [
		{
			label: "Integration with Angular/React",
			column: "backlog",
		},
		{
			label: "Archive the cards/boards ",
			column: "backlog",
		},
		{
			label: "Searching and filtering",
			column: "backlog",
		},
		{
			label: "Set the tasks priorities",
			column: "inprogress",
		},
		{
			label: "Custom icons",
			column: "inprogress",
		},
		{
			label: "Integration with Gantt",
			column: "inprogress",
		},
		{
			label: "Drag and drop",
			column: "testing",
		},
		{
			label: "Adding images",
			column: "testing",
		},
		{
			label: "Create cards and lists from the UI and from code",
			column: "done",
		},
		{
			label: "Draw swimlanes",
			column: "done",
		},
		{
			label: "Progress bar",
			column: "done",
		},
	];
</script>

The code sets readonly: true in the constructor config. This single property disables drag-and-drop, card editing, context menus, and column management. The Toolbar is initialized with only items: ["search"], since add/edit controls would be pointless in readonly mode.

Solution overview​

  1. Pass readonly: true in the Kanban constructor config
  2. Optionally limit toolbar items to read-only actions like search: items: ["search"]

Key points​

  • One property disables everything: readonly: true turns off drag-and-drop, editing, card menus, and column/row management in one shot
  • Toolbar is not automatically limited: The toolbar still renders all default items unless you explicitly restrict them with items
  • Can be toggled at runtime: Use the setConfig method to switch between readonly and editable modes dynamically

API reference​

  • readonly: Enables or disables readonly mode
  • Toolbar items: Controls which buttons appear in the toolbar

Additional resources​