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