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:

import { getData } from "./common/data";
import { Gantt } from "@svar-ui/react-gantt";

const { tasks, scales } = getData();

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

export default function App() {
  return <Gantt tasks={tasks} scales={scales} init={init} />;
}

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

import { getData } from "./common/data";
import { Gantt } from "@svar-ui/react-gantt";

const { tasks, scales } = getData();

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

export default function App() {
  return <Gantt tasks={tasks} scales={scales} init={init} />;
}

Related articles: