Configuring the task editor
Basic usage
To use the task editor, import both Gantt
and Editor from wx-svelte-gantt
and pass the api
reference to both:
<script>
import { Gantt, Editor } from "wx-svelte-gantt";
let api = $state();
</script>
<Gantt bind:this={api} />
<Editor {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 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:
<script>
import { Gantt, Editor } from "wx-svelte-gantt";
let api = $state();
const items = [
{
key: "text",
comp: "text",
label: "Name",
config: {
placeholder: "Add task name"
},
},
];
</script>
<Gantt bind:this={api} />
<Editor {api} {items} />
To configure the default editor fields, import the defaultEditorItems
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:
<script>
import { Gantt, Editor, defaultEditorItems } from "wx-svelte-gantt";
let api = $state();
const items = defaultEditorItems.filter(item => item.key !== "details");
</script>
<Gantt bind:this={api} />
<Editor {api} {items} />
The next example demonstrates how to selectively use specific fields from defaultEditorItems
to configure a custom editor layout, and how to customize the editor's bottom toolbar with Save/Delete/Close buttons.
<script>
import { getData } from "../data";
import { Gantt, Editor, defaultEditorItems } from "wx-svelte-gantt";
let api = $state();
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 => defaultEditorItems.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" },
],
};
</script>
<Gantt bind:this={api} tasks={data.tasks} links={data.links} scales={data.scales} />
<Editor {api} {items} {bottomBar} topBar=false placement="modal" />
The next example demonstrates how to enable the TimePicker
for comp: "date"
:
<script>
import { Gantt, Editor, defaultEditorItems } from "wx-svelte-gantt";
import { getData } from "../data";
const { tasks, links} = getData();
let api = $state();
const items = defaultEditorItems.map(ed => ({
...ed,
...(ed.comp === "date" && { config: { time: true } }),
}));
</script>
<Gantt
bind:this={api}
{tasks}
{links}
durationUnit={"hour"}
/>
<Editor {api} {items} />
~~~svelte
---
**Related articles**:
- [Adding a custom editor dialog](/guides/configuration/adding_custom_dialog)
- [defaultTaskTypes](/helpers/defaultTaskTypes)