Skip to main content

Undo/redo

The functionality is available in PRO Edition only

PRO

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:

import { useRef } from "react";
import { Gantt } from "@svar-ui/react-gantt";
import { Button } from "@svar-ui/react-core";
import { getData } from "../data";

const { tasks, links } = getData();

function App() {
  const api = useRef();

  const undo = () => { api.current.exec("undo"); };
  const redo = () => { api.current.exec("redo"); };

  return (
    <>
      <Button onClick={undo}>Undo</Button>
      <Button onClick={redo}>Redo</Button>
      <Gantt ref={api} tasks={tasks} links={links} undo />
    </>
  );
}

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:

import { useRef } from "react";
import { Gantt, Toolbar, getToolbarButtons } from "@svar-ui/react-gantt";
import { getData } from "../data";

const { tasks, links } = getData();
const items = getToolbarButtons({ undo: true });

function App() {
  const api = useRef();

  return (
    <>
      <Toolbar api={api} items={items} />
      <Gantt ref={api} tasks={tasks} links={links} undo />
    </>
  );
}

Related samples: