Skip to main content

select-card

Selects a card for editing. When the Editor component is mounted, this opens it with the selected card's data. Pass null to close the editor and deselect.

Usage​

{
	id: CardID | null;
}
  • id - the card to select, or null to deselect and close the editor.

Trigger​

// open the editor on a specific card
api.exec("select-card", { id: "card-1" });

// close the editor
api.exec("select-card", { id: null });

Observe​

api.on("select-card", ({ id }) => {
	console.log(id ? `Editing card ${id}` : "Editor closed");
});

Intercept​

api.intercept("select-card", ({ id }) => {
	// prevent opening locked cards
	if (id !== null) {
		const card = api.getState().cards.getById(id);
		return !card?.locked;
	}
});

Component handler​

<Kanban
  {cards}
  {columns}
  onselectcard={({ id }) => {
    console.log(id ? `Selected ${id}` : "Deselected");
  }}
/>
  • Editing guide — how the editor opens and saves
  • Editor — the sidebar/modal editor driven by select-card
  • cardPopup — custom popup that replaces the editor click target