We are happy to finish the winter season with the release of DHTMLX To Do List 1.3. This minor yet valuable update strengthens our JS component in terms of configurability and functionality. In v1.3, you get full control over task management settings with full customizability of menus for projects, tasks, and users. Thanks to the newly added ability to undo and redo changes, working with task lists of any complexity has become more convenient and reliable. These features will help to increase the flexibility and usability of our JavaScript To Do List for both web developers and end-users.
Let us review these additions to the DHTMLX To Do List component in more detail.
Menu Customization
In DHTMLX To Do List, menus serve as a store of operations (or items) available for a selected task or project. For end-users, this element is a relevant alternative to hotkey combinations. In v1.3, menus become fully customizable, meaning you are free to modify default menus (delete current options, add new ones, style items, etc.) or even disable menus for certain parts of your to do list.
Programmatically, menu settings are managed via the menu property. It can be specified as a Boolean for enabling/disabling menus for users, tasks, and projects or as a function to play around with menu parameters.
Let’s consider a few examples of context menu customizations:
- Default and custom options in a context menu
As you can see in the example above, tasks in the list come with a custom context menu containing a part of the default options and two new ones – “Add current date” and “Complete/Mark incomplete”. New items in the context menu are added using the handler function that serves for performing actions on custom menu items.
- Tasks without a context menu
Here we have a JS to do list, where only tasks have no context menu.
In code, it can be done as follows:
tasks,
users,
projects,
menu: ({ type, store }) => {
return type !== "task"
},
});
In needed, you can remove the menu from other parts of your list:
return type !== "toolbar"
Also, it is possible to specify that this custom setting should not be applied to a certain project:
return false;
}
- Menu personalization
In this example, context menu items are marked with custom icons. In addition, you can also change the styling of some items (e.g. change color).
For developers, the flexibility acquired with this novelty ensures better adaptability to individual project requirements, while end-users benefit from a more intuitive experience by seeing only relevant actions.
Undo/Redo Functionality
Using special tools for task management like our JS library can make things much easier. But what if you make a mistake or unintended change in your lists? Making corrections manually each time sounds a little exhausting. No worries, the updated DHTMLX To Do List offers undo/redo operations to avoid such unpleasant experiences. This feature allows controlling the editing history of actions on projects and tasks (create, delete, check, assign users, etc.), textual content, and structural changes to your to-do list. Thus, undo/redo operations help end-users to save time and be more productive.
Under the hood, you can initialize a JavaScript to do list with the undo/redo feature enabled by default via the history configuration property. In this property, it is also possible to enable separate history management of projects in the list by adding projects: true and to set the overall number of stored editing actions (unlimited by default) using the limit parameter:
tasks,
users,
projects,
history: {
projects:true,//false(enables history management for the whole list)
limit: 5
}
});
Apart from that, the list of available methods now includes new undo() and redo() methods responsible for corresponding operations.
The Toolbar API of the component now includes undo and redo controls used to activate corresponding operations via buttons in the toolbar panel. These options should be added in the items property to be added to the toolbar configuration:
api: list.api,
items: [
"combo",
"search",
"undo",
"redo",
"menu",
],
});
- Hotkey combinations
DHTMLX To Do List offers full-fledged keyboard navigation for managing projects and tasks with numerous hotkeys for common operations, multi-select, and bulk actions. Therefore, we could not but add hotkey combinations for undoing CTRL (CMD) + Z or redoing Ctrl (CMD)+Y or CTRL (CMD) + SHIFT + Z editing actions.
That’s all the updates included in DHTMLX To Do List v1.3. For more technical details about these features, check out the “What’s New” section.
You can download a free 30-day trial version to test these novelties in your scenarios. For our current clients, v1.3 is available in their Client’s Area.