Skip to main content

Undo/redo

PRO

The functionality is available in PRO Edition only

Undo/redo support requires enabling the undo property. Once enabled, users can also use Ctrl/Meta + Z to undo.

<Gantt ref="api" :tasks="tasks" :links="links" undo />

The following actions can be undone: adding, updating, deleting, moving, and copying tasks and links.

Custom buttons​

To trigger undo/redo programmatically, call api.exec() with the "undo" or "redo" action:

<script setup>
  import { Gantt } from "@svar-ui/vue-gantt";
  import { Button } from "@svar-ui/vue-core";
  import { getData } from "../data";
  import { ref } from "vue";

  const { tasks, links } = getData();
  const api = ref();

  function undo() { api.value.exec("undo"); }
  function redo() { api.value.exec("redo"); }
</script>

<template>
  <Button :onclick="undo">Undo</Button>
  <Button :onclick="redo">Redo</Button>
  <Gantt ref="api" :tasks="tasks" :links="links" undo />
</template>

Toolbar buttons​

First, import Toolbar and getToolbarButtons() with Gantt. To add undo/redo buttons to the Toolbar, pass { undo: true } to getToolbarButtons(). This appends the Undo and Redo icon buttons to the default toolbar configuration:

<script setup>
  import { Gantt, Toolbar, getToolbarButtons } from "@svar-ui/vue-gantt";
  import { getData } from "../data";
  import { ref } from "vue";

  const { tasks, links } = getData();
  const items = getToolbarButtons({ undo: true });
  const api = ref();
</script>

<template>
  <Toolbar :api="api" :items="items" />
  <Gantt ref="api" :tasks="tasks" :links="links" undo />
</template>

Related samples: