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
  • another two parameters (parent and reverse) are optional
list.copyTask({ 
id: "1.1", // ID of the task to copy
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 just the ID of the task to the copyTask() method:

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

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

Selecting/unselecting a task

To select a particular task, pass the ID of the task as a parameter to the selectTask() method:

list.selectTask({ 
id: "1.1",
});
tip

To get the ID of the currently selected task, use the getSelection() method

To remove selection from a selected task, pass the ID of the task as a parameter to the unselectTask() method:

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

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 selectable 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({});