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" | ("grid" | "chart" | "subGrid")[],
}) => 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. It is either a string:

    • "all" — show the grid and the chart panels. The Subgrid panel is added if there are columns with section: "subGrid" | PRO feature
    • "grid" — show only the grid panel
    • "chart" — show only the chart panel

    or an array with any combination of the panels (the "subGrid" panel is a PRO feature):

    ["grid", "chart"]             // the grid and the chart
    ["chart", "subGrid"]          // the chart and the Subgrid
    ["grid"]                      // only grid

The set of panels becomes the preferred layout of the chart.

note

If compact mode is active, Gantt shows one panel only. Switching to "all" is ignored in that state.

Example​

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

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

  const { tasks, scales } = getData();

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

<template>
  <Gantt :tasks="tasks" :scales="scales" :init="init" />
</template>

Related articles: