Skip to main content

Editing

This page describes how to edit tasks in chart UI and in the grid area. For the instructions on adding and configuring the Editor component, refer to the Editor section.

Edit tasks in chart UI​

The task editor dialog provides fields for viewing and editing tasks. This section shows how to control which UI operations with tasks should be allowed in Gantt.

Prevent default UI actions​

By default, all actions are enabled, but you can make the widget read-only or selectively block certain operations such as adding tasks, dragging, or creating links.

Gantt API provides an interception mechanism for all user actions.
Every action handler can return:

  • false → blocks the action
  • true or undefined → allows the action to continue

You can use the api.intercept() method to define these rules.

Disable dragging tasks (horizontally on the chart)​

To block horizontal dragging, listen to the drag-task event and check its parameters. This allows you to determine which dimension the drag occurs in — vertical or horizontal. If the drag is horizontal (start/end dates change), you can block it. To block horizontal drag:

api.intercept("drag-task", ev => {
      // left position or width has been changed
      if (typeof ev.left !== "undefined" || typeof ev.width !== "undefined") return false;
});

Disable reordering tasks (vertically in the grid)​

This works the same way as disabling horizontal dragging, but here we listen specifically for changes to the top parameter. If the top parameter is present, it means a vertical drag occurs (row reordering in the grid), and the action should be blocked.

To block vertical reordering:

api.intercept("drag-task", ev => {
    // top position has been changed
    if (typeof ev.top !== "undefined") return false;
});

Adding tasks​

If you need to block adding tasks for specific cases (for example, only for certain parent tasks), you can intercept the add-task action:

api.intercept("add-task", ev => {
    // don't add children to task with id=4
    if(ev.target == 4) return false;
});

If you want to completely disable adding tasks in the UI, remove the column that displays the "+" buttons:

<script>
  import { Gantt, defaultColumns } from "@svar-ui/svelte-gantt";
  let columns = defaultColumns.filter(c => c.id !== "add-task");
</script>

<Gantt {columns} />

If you need to block creating links only for specific tasks, you can intercept the add-link action:

api.intercept("add-link", ({link}) => {
    // don't add links to task with id=4
    if(link.source == 4 || link.target == 4)
      return false;
});

If you want to completely disable link creation in the UI, hide the link markers using CSS:

<div class="gantt hide-links" >
             <Gantt/>
</div>

.gantt.hide-links > :global(.wx-gantt .wx-bar .wx-link) {
             display: none;
}

If you need to block deleting links for specific tasks, you can intercept the delete-link action:

api.intercept("delete-link", ({ id }) => {
    const links = api.getState().links;
    const link = links.byId(id);

    // don't delete links from task with id=4
    if(link.source == 4 || link.target == 4) 
      return false;
});

If you want to completely disable link deletion in the UI, hide the delete buttons and disable selectable link behavior using CSS:

<div class="gantt hide-delete-links" >
             <Gantt/>
</div>

.gantt.hide-delete-links > :global(.wx-gantt .wx-delete-link) {
             display: none;
}
.gantt.hide-delete-links > :global(.wx-gantt .wx-line:hover) {
             cursor: default;
             stroke: var(--wx-gantt-link-color);
}
.gantt.hide-delete-links > :global(.wx-gantt .wx-line.wx-line-selectable) {
             cursor: default;
}

Editing progress in the chart​

If you want to disable editing progress for all tasks, you can hide the progress handle using CSS:

<div class="gantt hide-progress" >
             <Gantt/>
</div>

.gantt.hide-progress > :global(.wx-gantt .wx-bar .wx-progress-marker) {
             display: none;
}

Related sample: Prevent actions

Read-only mode​

info

In this mode you cannot create and edit tasks and links, and drag task bars.

To make the entire Gantt read-only, set the readonly property to true and define it inside the Gantt tag.

<script>
  import { getData } from "./data";
  import { Gantt } from "@svar-ui/svelte-gantt";
  
  const data = getData();
  
  let readonly = true;      
</script>    

<Gantt tasks={data.tasks} {readonly} />

Related sample: Read-only mode

Edit tasks in grid​

About the grid area and its configuration refer to Grid columns. This section describes how to apply and customize inline editors in the grid.

Applying in-built inline editors​

To apply the inline editor to column cells, set the editor parameter of the columns property to the required value ("text" | "combo" | "datepicker" | "richselect").

Example:

<script>
  import { getData } from "../data";
  import { Gantt } from "@svar-ui/svelte-gantt";

  let { skinSettings } = $props();

  const data = getData();

  const columns = [
    {
      id: "text",
      header: "Task name",
      width: 170,
      sort: true,
      editor: "text",
    },
    {
      id: "start",
      header: "Start date",
      width: 120,
      align: "center",
      sort: true,
      editor: "datepicker",
    },
  ];
</script>

<Gantt
  {...skinSettings}
  tasks={data.tasks}
  links={data.links}
  scales={data.scales}
  {columns}
/>

Related sample: Grid inline editors

Customizing built-in editors​

You can apply a template and custom Svelte component to the cell editor (except the "text" type editor). In this case, column "editor" should be an object with "type" and "config". "config" allows to set a custom component in the "cell" property.

Please note that for the "combo" editor, the cell component will be applied to dropdown options only, while for "datepicker" to the input field.

First, you need to prepare a custom component file. Components in editor cells have access to the data property via $props:

  • data - inline editors data (for example, for combo and richselect it's an item from options, for datepicker - date value)

Let's consider a custom component for values of inline editors in "start" column. The component will show formatted date and calendar icon:

DataCell component
<script>
  let { data } = $props();
  const options = { year: "numeric", month: "numeric", day: "numeric"};
</script>

{#if data}
  <div class="container">
    <span>{data.toLocaleString("en-US", options)}</span>
    <i class="icon wxi-calendar"></i>
  </div>
{/if}

<style>
  .container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .icon {
    display: inline-flex;
    align-items: center;
    font-size: 20px;
    color: #b5b5b5;
  }
</style>

Apply this component in "cell" property of an inline editor config:

<script>
  import { getData } from "../data";
  import { Gantt } from "@svar-ui/svelte-gantt";
  import DateCell from "../custom/DateCell.svelte";
  
  const data = getData();
  
  const columns = [
    { id: "text", header: "Task name", flexgrow: 1 },
    {
      id: "start",
      header: "Start date",
      width: 120,
      align: "center",
      editor: {
        type: "datepicker",
        config: {
          cell: DateCell
        }
      }
    }
  ];
</script>

<Gantt
  tasks={data.tasks}
  links={data.links}
  scales={data.scales}
  {columns}
/>

Related sample: Custom grid columns