{"id":10609,"date":"2022-10-10T13:10:23","date_gmt":"2022-10-10T10:10:23","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=10609"},"modified":"2024-08-10T14:02:02","modified_gmt":"2024-08-10T11:02:02","slug":"dhtmlx-to-do-list-1-1","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-to-do-list-1-1\/","title":{"rendered":"DHTMLX To Do List 1.1 with Multiselect and Bulk Actions, Drag-and-Drop, Tasks Sorting, and More"},"content":{"rendered":"

Today, we are happy to present DHTMLX To Do List v1.1. Even though it falls under the category of a minor release, this update is a significant step forward in the maturity and usability of the product. <\/p>\n

We introduce a pack of useful features that will help end-users to handle their lists of errands much easier and faster. From now on, it is possible to work with any number of tasks and move them around with drag-and-drop, sort lists according to various criteria, show and hide completed tasks, and more. For convenient implementation of new features, the API of our JavaScript To Do List<\/a> now has a collection of new methods, events, and parameters.<\/p>\n

Download the new version of DHTMLX To Do List ><\/a><\/strong><\/p>\n

In this article, we offer detailed highlights of the new capabilities provided in v1.1.<\/p>\n

Drag-and-Drop Support<\/h5>\n

One of the most significant novelties aimed to contribute to a better user experience with our JavaScript To Do List is drag-and-drop support<\/a>. In practice, it allows vertically rearranging any number of tasks with related subtasks to new places and desired levels of nesting at once. When dragging selected tasks, end-users can copy them by pressing the Alt key. When your JavaScript To Do List is operated via touch devices, this useful functionality works with 500ms delay. It helps to enhance the smoothness of the interface and prevent unintended resets.
\n\"v1.1Check the sample ><\/a><\/p>\n

Starting from v1.1, drag-and-drop is enabled by default. But it can be disabled by setting the value of the drag<\/a><\/strong> property to false<\/em>:<\/p>\n

const<\/span> list =<\/span> new<\/span> ToDo(<\/span>"#root"<\/span>,<\/span> {<\/span>
\n   tasks:<\/span> [<\/span>
\n       {<\/span> id:<\/span> "1"<\/span>,<\/span> text:<\/span> "Task 1 #tag1"<\/span> }<\/span>,<\/span>
\n       ...
\n   ]<\/span>,<\/span>
\n   drag:<\/span> false<\/span> \/\/ true by default<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n
const<\/span> list =<\/span> new<\/span> ToDo(<\/span>"#root"<\/span>,<\/span> {<\/span>
\n   tasks:<\/span> [<\/span>
\n       {<\/span> id:<\/span> "1"<\/span>,<\/span> text:<\/span> "Task 1 #tag1"<\/span> }<\/span>,<\/span>
\n       ...
\n   ]<\/span>,<\/span>
\n   drag:<\/span> {<\/span>
\n       expand:<\/span> false<\/span> \/\/ true by default<\/span>
\n   }<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n
Multi Select and Bulk Actions<\/h5>\n

When managing a list of things to do, it may be necessary to perform certain actions on a group of tasks. Dealing with each task one by one can be tedious and time-consuming. The new version of DHTMLX To Do List helps to optimize this process by providing the ability to select<\/a> any number of tasks and manipulate<\/a> them simultaneously. <\/p>\n

In v1.1, interactions with a group of tasks are available in the following ways:
\n1) via keyboard shortcuts
\nWe added the following keyboard shortcuts that allow selecting list items in various ways:<\/p>\n

There are new start-drag<\/a><\/strong>, drag<\/a><\/strong>, and end-drag<\/a><\/strong> events that fire at the respective stages of drag-and-drop.<\/p>\n

You can also use an extended version of the drag<\/a><\/strong> property with the expand<\/strong> parameter for specifying whether tasks with nested subtasks should be collapsed or expanded when you hover over them during drag-and-drop.<\/p>\n