DHTMLX To Do List 1.0 with Advanced Task Assignment, Inline Editing, and Handy Keyboard Navigation
We’re pleased to announce the release of our new widget — JavaScript To Do List. With DHTMLX To Do List, your users will be able to create and manage checklists of any complexity and nested level.
This article describes the key features of DHTMLX To Do List v1.0, 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.
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.
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.
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.
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.
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.
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.
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.
Originally published on the DHTMLX blog: https://dhtmlx.com/blog/dhtmlx-list-1-0-advanced-task-assignment-inline-editing-handy-keyboard-navigation/
