Skip to main content

DHTMLX Kanban. Opening the editor in a modal window example

Kanban supports two editor placements: a sidebar panel that appears alongside the board (the default), and a modal dialog that overlays it. The modal layout splits fields into two columns: left and right, using the modalSection field property, which helps separate content fields from metadata.

Live example​

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

const board = new Kanban("#root", {
    columns,
    cards,
    cardShape: {
        ...cardShape,
        votes: true,
        cover: true,
    },
    editorShape,
    editor: {
        placement: "modal", // "sidebar" (default) | "modal"
        autoSave: false 
    },
    currentUser: 1,
});

new kanban.Toolbar("#toolbar", {
    api: board.api,
});
<!-- component containers -->
<div id="toolbar"></div>
<div id="root" style="height: calc(100% - 56px)"></div>

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

<script>
const users = [
		{
			id: 1,
			label: "Steve Smith",
			avatar: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/user-1.jpg",
		},
		{
			id: 2,
			label: "Aaron Long",
			avatar: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/user-2.jpg",
		},
		{
			id: 3,
			label: "Angela Allen",
			avatar: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/user-3.jpg",
		},
		{
			id: 4,
			label: "Angela Long",
			avatar: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/user-4.jpg",
		},
		{
			id: 5,
			label: "John Doe",
		},
	];

    const cardShape = {
		label: true,
		description: true,
		progress: true,
		start_date: true,
		end_date: true,
		users: {
			show: true,
			values: users,
			limit: card => {
				return card.id === 1 ? 3 : 2;
			},
			showLimit: true,
		},
		priority: {
			show: true,
			values: [
				{ id: 1, color: "#FF5252", label: "High" },
				{ id: 2, color: "#FFC975", label: "Medium" },
				{ id: 3, color: "#65D3B3", label: "Low" },
			],
		},
		color: true,
		menu: true,
		attached: true,
	};
    const editorShape = [
        {
            key: "label",
            type: "text",
            label: "Label",
            modalSection: "left", // places the control in the left column of the modal editor
        },
        {
            key: "description",
            type: "textarea",
            label: "Description",
            modalSection: "left",
        },
        {
            type: "date",
            key: "start_date",
            label: "Start date",
            modalSection: "right", // places the control in the right column of the modal editor
        },
        {
            type: "date",
            key: "end_date",
            label: "End date",
            modalSection: "right",
        },
        {
            type: "combo",
            label: "Priority",
            key: "priority",
            modalSection: "right",
        },
        {
            type: "multiselect",
            key: "users",
            label: "Users",
            modalSection: "right",
        },
        {
            type: "color",
            label: "Color",
            key: "color",
            modalSection: "right",
        },
        {
            type: "progress",
            key: "progress",
            label: "Progress",
            modalSection: "right",
        },
        {
            type: "links",
            key: "links",
            label: "Links",
            modalSection: "left",
        },
        {
            type: "comments",
            key: "comments",
            label: "Comments",
            config: {
                placement: "editor",
            },
            modalSection: "left",
        },
    ];
</script>

The code sets editor: { placement: "modal", autoSave: false } in the constructor. Each field in editorShape includes a modalSection property ("left" or "right") to control its position in the two-column modal layout. Text-heavy fields (label, description, comments, links) go in the left column, while metadata fields (dates, priority, users, color, progress) go in the right column. The autoSave: false adds explicit Save/Cancel buttons to the modal.

Solution overview​

  1. Set editor: { placement: "modal" } in the constructor config
  2. Add modalSection: "left" or modalSection: "right" to each field in editorShape
  3. Optionally set autoSave: false to add Save/Cancel buttons

Key points​

  • modalSection controls layout: Without it, all fields stack in a single column. Use "left" for content fields and "right" for metadata
  • autoSave: false is recommended for modals: Auto-save can be confusing in a modal context. Users expect to confirm or cancel changes explicitly
  • Same editorShape format: The modal uses the same field definitions as the sidebar. Just add modalSection to each field

API reference​

  • editor: Editor configuration including placement and autoSave
  • editorShape: Editor field definitions with modalSection

Additional resources​