Skip to main content

Operations with tasks

Adding a new task

To add a new task to the list, use the addTask() method:

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

Copying/pasting a task

Copy and paste

The quickest way to copy and paste a task is use the copyTask() method. For that, it is necessary to pass the following parameters to the method:

  • the ID of the task that you want to copy and paste
  • the ID of the future project (if it exists)
  • the ID of the target task where the copied task should be pasted
  • other parameters are optional
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 // the task will be pasted before the target one
});

Copy to the clipboard

To copy a necessary task to the clipboard without its further pasting, pass the ID of the task to the copyTask() method:

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

Saving IDs of other copies

info

If you want to copy the task and save other previously copied tasks, you need to pass the join: true parameter to the copyTask() method. Otherwise, only the specified task will be copied, all others copies created earlier will be reset.

Paste from the clipboard

You can paste the copied task from the clipboard to the necessary place via the pasteTask() method:

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

Updating a task

To dynamically update parameters of a task, apply the updateTask() method:

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

Moving a task

To move a task to another position, use the moveTask() method:

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 // the task will be placed before the target one
});
note

If you move a parent task, it will be moved together with its subtasks.

Deleting 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

Expanding/collapsing a task

To collapse a task, use the collapseTask() method. The method takes the ID of the task 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" });

Marking a task complete/incomplete

You may mark the necessary task as complete/incomplete via the corresponding checkTask() and uncheckTask() methods:

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

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

When manual: false is set, the result of applying the method depends on the value which is specified for the behavior attribute of the completed parameter of the taskShape property.

If the "auto" mode is specified via the taskShape property but you need to check/uncheck the task in the "manual" mode, set the manual parameter of the checkTask() or uncheckTask() method to true:

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

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

Changing the indent level of a task

To change the nesting level of a task dynamically, use the following two methods:

  • indentTask() - to demote the nesting level of a task to one lower level
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']
  • unindentTask() - to promote the nesting level of the task to one higher level
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

The result of applying the methods depends on the structure of the list

Filtering tasks

You can find the tasks that match the specified criteria with the help of the setFilter() method. The method supports the strict mode of filtering that allows you to filter tasks by the exact match.

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

To reset filtering, call the method without parameters:

// reset filtering
list.setFilter({});