Skip to main content

DHTMLX Kanban. Save mode example

By default, the Kanban editor saves changes as you change values in inputs. For cases where you need explicit save/cancel control, such as preventing accidental edits, you can switch to manual save mode.

Live example​

new kanban.Kanban("#root", {
    columns,
    cards,
    editor: { autoSave: false },
});
<!-- component container -->
<div id="root" style="height: 100%;"></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 editor: { autoSave: false } in the constructor config. With this setting, the card editor shows a Save button (and a Cancel button in modal placement) instead of saving on every keystroke. Users must explicitly confirm their changes, which gives your application a chance to validate or intercept the update.

Solution overview​

  1. Pass editor: { autoSave: false } in the Kanban constructor config
  2. The editor will now display a Save button (and a Cancel button when using modal placement)
  3. Changes are only applied when the user clicks Save

Key points​

  • Default is auto-save: Without this setting, every change in the editor is applied immediately. There is no Save button
  • Applies to all editor fields: The autoSave flag affects all fields in the editor, not individual ones

API reference​

  • editor: Configures editor behavior including auto-save mode

Additional resources​