Skip to main content

DHTMLX Kanban. Open the editor by double-clicking on the task example

By default, clicking a card selects it and opens the editor. If you prefer selection on single-click and editing on double-click (a common UX pattern in desktop applications), you can reconfigure this behavior using event interceptors.

Live example​

const { Kanban, locateID } = kanban;

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

// prevent edit operation on card selection
board.api.intercept("set-edit", (ev) => {
    return ev?.eventSource != "select-card";
});

const container = document.getElementsByClassName("wx-kanban")[0];
container.addEventListener("dblclick", ev => {
    const id = locateID(ev);
    if (ev) board.api.exec("set-edit", { cardId: id });
});
<!-- component container -->
<div style="height: 100%; width: 100%" id="root"></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 intercepts set-edit and blocks it when triggered by card selection (ev.eventSource != "select-card"). Then a dblclick event listener on the Kanban container uses locateID(ev) to find which card was double-clicked and manually triggers api.exec("set-edit", { cardId: id }). This separates selection (single-click) from editing (double-click) cleanly.

Solution overview​

  1. Intercept set-edit to block automatic editor opening on card selection: return ev?.eventSource != "select-card"
  2. Add a dblclick listener to the .wx-kanban container element
  3. Use kanban.locateID(ev) to get the card ID from the click event
  4. Call board.api.exec("set-edit", { cardId: id }) to open the editor programmatically

Key points​

  • eventSource distinguishes triggers: The set-edit event includes eventSource indicating what caused it. Checking for "select-card" lets you block only click-triggered edits while keeping menu-triggered edits working
  • locateID resolves DOM to card ID: This utility finds the nearest card element from any click target and returns its ID. No manual DOM traversal needed
  • Single-click still selects: This approach only changes the edit trigger. Card selection on click works as before

API reference​

  • api.intercept: Intercepts and conditionally blocks events
  • api.exec: Triggers an event programmatically
  • locateID: Resolves a DOM event to a card ID

Additional resources​