Skip to main content

render-data

Description​

Fires when data is rendered when scrolling

Usage​

"render-data": ({ 
    from: number,
    start: number,
    end: number
}) => boolean|void;

Parameters​

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

  • from - (required) the point in pixels where visible rows start
  • start - (required) the ID of the first visible row
  • end - (required) the ID of the last row within the visible area
info

For handling the actions you can use the Event Bus methods

Example​

import { getData } from "../data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import { useRef, useEffect } from "react";

const GanttComponent = () => {
  const apiRef = useRef(null);
  const data = getData();

  useEffect(() => {
    if (apiRef.current) {
      apiRef.current.on("render-data", (ev) => {
        console.log("The ID of the last visible row", ev.end);
      });
    }
  }, [apiRef.current]);

  return (
    <Gantt ref={apiRef} tasks={data.tasks} links={data.links} scales={data.scales} />
  );
};

export default GanttComponent;

Related articles: How to access Gantt API