Skip to main content

resize-grid

Description​

Fires when the width of the grid panel changes

Usage​

"resize-grid": ({
   width: number,
   section?: "grid" | "subGrid",
   inProgress?: boolean,
}) => boolean | void;
info

For handling the actions you can use the Event Bus methods

Parameters​

The callback of the resize-grid action takes an object with the following parameters:

  • width - (required) the new width of the grid panel in pixels
  • section - (optional) the grid to resize: "grid" (default) for the grid on the left of the chart, "subGrid" for the Subgrid on the right of the chart | PRO feature
  • inProgress - (optional) true while the user is dragging the resizer; false when the user releases the resizer

Example​

Use the api.exec method to set the grid width programmatically:

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

  const { tasks, scales } = getData();

  function init(api) {
    api.exec("resize-grid", { width: 300 });
  }
</script>

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

To resize the Subgrid, add the section parameter:

api.exec("resize-grid", { width: 220, section: "subGrid" });

Use api.on() to react when the user drags the resizer handle:

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

  const { tasks, scales } = getData();

  function init(api) {
    api.on("resize-grid", ev => {
      console.log("Grid width changed to:", ev.width);
    });
  }
</script>

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

Related articles: