Skip to main content

resize-grid

Description​

Fires when the width of the grid panel changes

Usage​

"resize-grid": ({
   width: number,
}) => 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

Example​

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

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

  const { tasks, scales } = getData();

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

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

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

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

  const { tasks, scales } = getData();

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

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

Related articles: