Skip to main content

Operations with tasks

Add a new task​

To add a new task to the list, use the addTask() method. The example below adds a task under a specified parent:

list.addTask({
    id: "1.1.1",
    project: "first",
    parent: "1.1",
    targetId: "1.1.2",
    reverse: true,
    task: {
        text: "Task 1.1.1",
    }
});

Copy and paste a task​

Copy and paste​

The quickest way to copy and paste a task is the copyTask() method. Pass the following parameters:

  • id — id of the task to copy and paste
  • project — id of the target project, if it exists
  • targetId — id of the target task where the copied task is pasted
  • other parameters are optional

The snippet below copies a task into a new project:

list.copyTask({ 
    id: "1.1", // ID of the task to copy
    join: false, // resets copies of other tasks and copies only this task
    project: "p_2", // ID of the future project (if exists)
    parent: "2.1", // ID of the future parent
    targetId: "2.1.2", // ID of the target task
    reverse: true // paste the task before the target one
});

Copy to the clipboard​

To copy a task to the clipboard without pasting it, pass the task id to the copyTask() method:

list.copyTask({ 
    id: "1.1"
});

Save ids of other copies​

info

To copy a task and keep previously copied tasks, pass join: true to the copyTask() method. Otherwise, the method copies only the specified task and resets all earlier copies.

Paste from the clipboard​

Paste a copied task from the clipboard to the required place through the pasteTask() method. The snippet below pastes the copied task next to a target task:

list.pasteTask({ 
    parent: "1",
    targetId: "1.2",
});
info

The clone-task event fires after paste-task when the clipboard content lands at the target position. The callback receives the parent id, the project id, the target id, and a batch array with the cloned task objects.

Update a task​

To update parameters of a task dynamically, use the updateTask() method. The example below changes the text of a task:

list.updateTask({ 
    id: "1.1.1",
    task: {
        text: "Completed task"
    }
});

Move a task​

To move a task to another position, use the moveTask() method. The snippet below moves a task into another project:

list.moveTask({ 
    id: "1.1", // ID of the task to move
    project:"p_2", // ID of the future project (if exists)
    parent: "2", // ID of the future parent
    targetId: "2.1", // ID of the target task
    reverse: true // place the task before the target one
});
note

A parent task moves together with its subtasks.

Delete a task​

To delete a task, use the deleteTask() method:

list.deleteTask({ id: "1.2" });
note

The method removes the task with all its child tasks.

Expand and collapse a task​

To collapse a task, use the collapseTask() method. The method takes the task id as a parameter:

list.collapseTask({ id: "1.1" });

To expand a collapsed task by its id, use the expandTask() method:

list.expandTask({ id: "1.1" });

Context menu​

Each task and user has a context menu. Track its activity with two events:

  • open-menu — fires when the menu opens; provides the item id, the menu type, and optionally an array of task ids (source) for batch operations
  • close-menu — fires when the menu closes; provides the item id and the menu type

The example below logs menu lifecycle events:

list.api.on("open-menu", ({ id, type, source }) => {
    console.log("menu opened for", id, "type", type, "source", source);
});

list.api.on("close-menu", ({ id, type }) => {
    console.log("menu closed for", id, "type", type);
});

Change log: The open-menu and close-menu events were added in v1.1.

Mark a task complete or incomplete​

Mark a task as complete or incomplete through the checkTask() and uncheckTask() methods. The example below shows both calls:

list.checkTask({ 
    id: "1.1.1",
    manual: false
});

list.uncheckTask({ 
    id: "1.1.1",
    manual: false
});

When manual: false, the result depends on taskShape.completed.behavior (see the taskShape reference for details).

If taskShape.completed.behavior is "auto" but you need a one-off manual check, set manual: true:

list.checkTask({ 
    id: "1.1.1",
    manual: true
});

list.uncheckTask({ 
    id: "1.1.1",
    manual: true
});

Change the indent level of a task​

Change the nesting level of a task dynamically through the following methods:

The snippet below demotes a task one level deeper:

const list = new ToDo("#root", {
    tasks: [
        { id: "1", text: "Task 1 #tag1" },
        { id: "1.1", text: "Task 1.1", parent: "1" },
        { id: "1.1.1", text: "Task 1.1.1", parent: "1.1" },
        { id: "1.2", text: "Task 1.2", parent: "1" },
    ]
});

list.indentTask({ id: "1.2" });

console.log(list.getParentIds({ id: "1.2" })); //  ['1.1', '1']

The example below promotes a task one level up:

const list = new ToDo("#root", {
    tasks: [
        { id: "1", text: "Task 1 #tag1" },
        { id: "1.1", text: "Task 1.1", parent: "1" },
        { id: "1.1.1", text: "Task 1.1.1", parent: "1.1" },
        { id: "1.2", text: "Task 1.2", parent: "1" },
    ]
});

list.unindentTask({ id: "1.2" });

console.log(list.getParentIds({ id: "1.2" })); //  []
info

If the task is already at the top level, unindentTask() does nothing.

Filter tasks​

Find tasks that match the specified criteria with the setFilter() method. The method supports the strict mode for exact-match filtering. The snippet below filters tasks by a hashtag:

// filter data by the specified rules
list.setFilter({
    match: "#tag1",
    highlight: true,
    strict: true
});

To reset filtering, pass match: null:

// reset filtering
list.setFilter({ match: null });

Undo and redo​

The To Do List tracks the history of changes by default. To revert the last operation, call the undo() method. To restore an operation reverted by undo(), call the redo() method:

list.addTask({ task: { text: "New task" } });

list.undo(); // revert the addition
list.redo(); // restore it

The history scope and depth depend on the history configuration property. See Configuration → History of changes for details.

Change log: The undo() and redo() methods were added in v1.3.

Need more help?Contact Support