Introducing DHTMLX To Do List

This article describes the key features of DHTMLX To Do List, including handy task management, ability to assign dates and participants, and user-friendly keyboard navigation. Moreover, we show you how to integrate To Do List with DHTMLX Gantt and what are the ways to customize its appearance.

Managing Projects and Tasks

DHTMLX To Do List consists of two separate parts. The first one is a Toolbar that allows adding new projects and switching between them using a combo control. Users can rename a currently active project or delete it by clicking on a corresponding command in the context menu.

The second part is a List where users can create an unlimited number of tasks with subtasks. By default, users can edit task content by double-clicking on it. They may also collapse or expand a task, indent or outdent it, move it to another project, or permanently delete a task from the list with the help of a context menu.

Check the sample

There are two modes of marking tasks complete you can choose from. The first one is a default or auto mode that allows automatically completing a parent task if a user checks all its children. Moreover, you may opt for the second or manual mode of checking/unchecking tasks that enables users to complete all tasks themselves.

##Using Tags One of the most convenient features of the DHTMLX To Do List is the ability to work with hashtags. It enables users to categorize tasks and reduce the time required for searching for the necessary task.

To add a tag, users have to type # with the required content and press Enter. Besides, the widget displays a list of all created tags to avoid making an error while typing. Hashtags are available in all To Do List projects and can be used to filter tasks. To do so, users need to click a tag or enter it in the search bar.

Setting Due Dates

The first To Do List release comes with the ability to set a due date for a task. By default, the due date has a green color that switches to red when the task is overdue. You can disable the date validation feature and make its content grey.

Check the sample

Moreover, you can configure To Do List to display dates in a custom format. DHTMLX widget shows dates in the “%d %M %Y” format, however, you may add the name of the day or display the month as a number.

Assigning Participants

With DHTMLX To Do List, users can assign participants to those tasks that require the attention of particular team members. Therefore, they need to open a task menu and select one or several participants from the dropdown list of the “Assign to” menu item. It’s also possible to allocate tasks between team members via the assignUser() and unassignUser() methods:

// assign a user to the task
list.assignUser({
    id: "3",
    userId: "user_1"
});

// unassign a user from the task
list.unassignUser({
    id: "2",
    userId: "user_1"
});

You can specify the list of participants via the users configuration property. It’s possible to add a description and image of the team member or set a color if the image isn’t uploaded.

const users = [
    { id: "user_1", label: "Don Smith", avatar: "../avatar_61.jpg"},
    { id: "user_2", label: "Nadia Chasey", avatar: "../avatar_63.jpg" },
    { id: "user_3", label: "Mike Young", avatar: "../avatar_03.jpg" },
    { id: "user_4", label: "Elvira Webb", avatar: "../avatar_33.jpg" }
];

const list = new ToDo("#root", { users });

Full-Fledged Keyboard Navigation

Starting from its first release, DHTMLX To Do List offers convenient keyboard navigation. It covers all necessary commands, such as duplicating, copying, and pasting tasks. Besides, users can add or delete tasks, expand or collapse a task list, and move the selected task up or down.

Integrating with DHTMLX Gantt

We’re happy to say that To Do List works smoothly with other DHTMLX widgets, such as Scheduler event calendar, Kanban board, and Suite UI library. Therefore, you can build feature-rich project and task management apps for any industry. You can see an example of syncing DHTMLX To Do List with our Gantt chart library below.

Check the sample

Easily Configurable and Customizable Appearance

Just like any DHTMLX widget, our To Do List library supports flexible configuration with the help of its intuitive API. For example, you can modify the toolbar structure by hiding the built-in controls or adding custom elements, e.g. a button or your company logo, using the items configuration property of Toolbar:

const toolbar = new Toolbar("#toolbar", {
    api: list.api,
    items: [
        `<div style="font-weight:500;font-size:18px;padding:0 10px; width: 100%">Logo<div/>`,
        "search",
        `<div style="margin-left: auto; padding-left: 10px;"><button class="g-btn">Custom button</button></div>`,
    ],
});

The List view is also configurable. By default, each parent task displays the progress of task completion as a ratio between completed subtasks and the total number of subtasks. However, you can show the percentage of completed children tasks by updating the counter settings inside the taskShape property. You should just change the default “number” value of the type attribute to the “percentage” inside the counter parameter:

const list = new ToDo("#root", {
    tasks,
    users,
    projects,
    taskShape: {
        counter: {
            type: "percentage" // "number" by default
        }
    }
});

DHTMLX To Do List allows you to modify its look and feel by using predefined CSS variables. They include base colors, fonts, icons, checkbox appearance, etc.

Check the sample

Summing up, the first version of DHTMLX To Do List allows creating a user-friendly checklist with a set of core features, including inline editing, hashtag usege, ability to assign participants and set due dates to tasks and subtasks, and more. You can estimate its functionality right now by downloading a free 30-day trial.