Skip to main content

move-task

Description

Fires when moving a task

Usage

"move-task": ({
id: string | number,
mode: string,
target?: string | number,
source?: string | number,
inProgress?: boolean
}) => boolean|void;

Parameters

The callback of the move-task action can take an object with the following parameters:

  • id - (required) the task ID
  • mode - (required) specifies where to move a task with the next values:
    • up - move up
    • down - move down
    • before - move before the target task if the target task id is specified
    • after - move after the target task if the target task id is specified
    • child - move to a new parent
  • target - (optional) the id of a task before/after which to move the current task
  • source - (optional) the id of a source task that is moved
  • inProgress - (optional) true marks that the process of moving a task is still in progress (a task is being dragged by user); false specified that a user has released a mouse after after dragging a task.
info

For handling the actions you can use the Event Bus methods

Example

Use the api.exec() method to trigger the action:

import React, { useState, useRef } from "react";
import { getData } from "./common/data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import { Button } from "wx-react-wx";

const App = () => {
const data = getData();
const apiRef = useRef();
const [selected, setSelected] = useState(null);

const handleMove = (mode) => {
apiRef.current.exec("move-task", { id: selected, mode });
};

return (
<>
<Toolbar>
{selected && (
<Button
type="primary"
onClick={() => {
handleMove("up");
}}
>
Move task up
</Button>
)}
</Toolbar>
<Gantt
apiRef={apiRef}
tasks={data.tasks}
//other settings
/>
</>
);
};

export default App;

Related articles: How to access Gantt API