Skip to main content

Configuring the task editor

Basic usage​

To use the task editor, import both Gantt and a standalone Editor component based on SVAR Editor from @svar-ui/react-gantt and pass the api reference to both:

import { useState } from "react";
import { Gantt, Editor } from "@svar-ui/react-gantt";

export default function App() {
  // useState replaces react's $state
  const [api, setApi] = useState(null);

  return (
    <>
      {/* use a callback ref to receive the Gantt instance */}
      <Gantt ref={setApi} />
      <Editor api={api} />
    </>
  );
}

Configuring the Editor​

The task editor dialog allows you to configure a set of fields (controls) for viewing and editing task data. The task editor modal dialog consists of configurable fields (controls) for managing task data. To define the editor fields, use the items property of the standalone Editor (https://docs.svar.dev/react/editor/api/editor/) component.

Supported editor field types include:

  • text and textarea
  • date
  • slider
  • select
  • counter
  • links

For example, to define a simple text input field, add its name to the comp field:

import { useState } from "react";
import { Gantt, Editor } from "@svar-ui/react-gantt";

export default function App() {
  const [api, setApi] = useState(null);

  const items = [
    {
      key: "text",
      comp: "text",
      label: "Name",
      config: {
        placeholder: "Add task name",
      },
    },
  ];

  return (
    <>
      <Gantt ref={setApi} />
      <Editor api={api} items={items} />
    </>
  );
}

To configure the default editor fields, import the getEditorItems helper to get the default array, modify it as needed, and pass the updated array to the Editor component via the items prop.

The example below shows how to remove the "Description" field (which uses the key "details") from the editor:

import { useState } from "react";
import { Gantt, Editor, getEditorItems } from "@svar-ui/react-gantt";

export default function App() {
  const [api, setApi] = useState(null);

  const items = getEditorItems.filter((item) => item.key !== "details");

  return (
    <>
      <Gantt ref={setApi} />
      <Editor api={api} items={items} />
    </>
  );
}

The next example demonstrates how to selectively use specific fields from the default array to configure a custom editor layout, and how to customize the editor's bottom toolbar with Save/Delete/Close buttons.

import { useState } from "react";
import { getData } from "../data";
import { Gantt, Editor, getEditorItems } from "@svar-ui/react-gantt";

export default function App() {
  const [api, setApi] = useState(null);
  const data = getData();

  // Define only the fields you want to include
  const keys = ["text", "type", "start", "end", "duration", "progress", "details"];
  const items = keys.map((key) => getEditorItems.find((op) => op.key === key));

  const bottomBar = {
    items: [
      { comp: "button", type: "secondary", text: "Close", id: "close" },
      { comp: "spacer" },
      { comp: "button", type: "danger", text: "Delete", id: "delete" },
      { comp: "button", type: "primary", text: "Save", id: "save" },
    ],
  };

  return (
    <>
      <Gantt
        ref={setApi}
        tasks={data.tasks}
        links={data.links}
        scales={data.scales}
      />
      <Editor api={api} items={items} bottomBar={bottomBar} topBar={false} placement="modal" />
    </>
  );
}

The next example demonstrates how to enable the TimePicker for comp: "date":

import { useState } from "react";
import { Gantt, Editor, getEditorItems } from "@svar-ui/react-gantt";
import { getData } from "../data";

export default function App() {
  const { tasks, links } = getData();

  const [api, setApi] = useState(null);

  const items = getEditorItems.map((ed) => ({
    ...ed,
    ...(ed.comp === "date" && { config: { time: true } }),
  }));

  return (
    <>
      <Gantt
        ref={setApi}
        tasks={tasks}
        links={links}
        durationUnit={"hour"}
      />
      <Editor api={api} items={items} />
    </>
  );
}

Relates samples:

Related articles: