Skip to main content

set-display-mode

Description​

Fires when the visible layout of the Gantt chart is switched

Usage​

"set-display-mode": ({
   mode: "all" | "grid" | "chart",
}) => boolean | void;
info

For handling the actions you can use the Event Bus methods

Parameters​

The callback of the set-display-mode action takes an object with the following parameters:

  • mode - (required) the layout to activate:
    • "all" — show both grid and chart panels
    • "grid" — show only the grid panel
    • "chart" — show only the chart panel
note

If compact mode is active, switching to "all" is ignored as only "grid" and "chart" are allowed in that state.

Example​

Use the api.exec method to switch the layout at runtime:

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

  const { tasks, scales } = getData();

  function init(api) {
    api.exec("set-display-mode", { mode: "chart" });
  }
</script>

<Gantt {tasks} {scales} {init} />

Related articles: