Skip to main content

provide-data

Description​

Provides new data for a branch

You should call this action to provide data for a branch.

Usage​

"provide-data": ({
  id: string | number,
  data: {
   tasks?: ITask[],
   links?: ILInk[],
   assignments?: IAssignment[]
  };
  nested?: boolean
}) => boolean|void;

Parameters​

  • id - (required) the ID of the task for which data should be provided
  • data - (required) new data provided for a branch:
    • tasks - (optional) array of child tasks
    • links - (optional) array of links belonging to the branch
    • assignments - (optional) array of assignments for child tasks; merged into the existing assignments collection. Only takes effect when Gantt has been initialised with an assignments array (PRO Edition).
  • nested - (optional) if true, every loaded child task that has children is opened (open: true); otherwise, the loaded tasks keep their open values
info

For handling the actions you can use the Event Bus methods

Example​

In the example below we listen to the request-data action with the help of the api.on() method, fetch the tasks branch data from the server and parse to the component calling the provide-data action.

import { useState, useEffect } from "react";
import { Gantt } from "@svar-ui/react-gantt";

const server = "https://some-server";

export default function App() {
  const [tasks, setTasks] = useState([]);
  const [links, setLinks] = useState([]);

  // dates come from the server as strings, convert them to Date objects
  function parseDates(data) {
    data.forEach(item => {
      item.start = new Date(item.start);
      if (item.end) item.end = new Date(item.end);
    });
    return data;
  }

  useEffect(() => {
    Promise.all([
      fetch(server + "/tasks")
        .then(res => res.json())
        .then(arr => parseDates(arr)),
      fetch(server + "/links").then(res => res.json()),
    ]).then(([t, l]) => {
      setTasks(t);
      setLinks(l);
    });
  }, []);

  function init(api) {
    api.on("request-data", ev => {
      Promise.all([
        fetch(`${server}/tasks/${ev.id}`)
          .then(res => res.json())
          .then(arr => parseDates(arr)),
        fetch(`${server}/links/${ev.id}`).then(res => res.json()),
      ]).then(([tasks, links]) => {
        api.exec("provide-data", {
          id: ev.id,
          data: {
            tasks,
            links,
          },
        });
      });
    });
  }

  return <Gantt init={init} tasks={tasks} links={links} />;
}

When a task with lazy: true is opened by open-task, Gantt triggers request-data. Load the data in the handler and pass it to provide-data:

api.on("request-data", ev => {
   restProvider
      .getData(ev.id, { nested: ev.nested })
      .then(({ tasks, links }) => {
         api.exec("provide-data", {
            id: ev.id,
            data: { tasks, links },
            nested: ev.nested,
         });
      });
});

When the project uses resources, forward the matching assignments alongside the tasks and links so that resource columns and resource-load reflect the newly loaded branch:

api.on("request-data", ev => {
   restProvider
      .getData(ev.id, { assignments: true })
      .then(({ tasks, links, assignments }) => {
         api.exec("provide-data", {
            id: ev.id,
            data: { tasks, links, assignments },
         });
      });
});

Related sample:

Related articles: