Skip to main content

Preventing actions

Overview​

You can control which UI operations are allowed in Gantt.
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;
}