{"id":13415,"date":"2025-02-27T17:17:31","date_gmt":"2025-02-27T14:17:31","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=13415"},"modified":"2025-04-16T17:33:42","modified_gmt":"2025-04-16T14:33:42","slug":"dhtmlx-to-do-list-1-3","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-to-do-list-1-3\/","title":{"rendered":"DHTMLX To Do List 1.3: Fully Customizable Menus and Undo\/Redo Operations"},"content":{"rendered":"<p>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 <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxTodo\/\" rel=\"noopener\" target=\"_blank\">JavaScript To Do List<\/a> for both web developers and end-users.<\/p>\n\n\t\t<div class='post-banner'>\n\t\t    <div class='post-banner__inside'>\n\t\t        <div>\n\t\t            <div class=\"post-banner__title\">Download DHTMLX To Do List v1.3<\/div>\n\t\t            <div class=\"post-banner__text\">Estimate the updated functionality for building checklists of any complexity level<\/div>\n                <\/div>\n\t\t            \n                \n            <div class='post-banner__btn'>\n                <a href='https:\/\/dhtmlx.com\/docs\/products\/dhtmlxTodo\/download.shtml' title='' class='button-secondary'>Get free trial<\/a>\n            <\/div>\n        \n            <\/div>\n\t\t<\/div>\n\t\n<p>Let us review these additions to the DHTMLX To Do List component in more detail.<\/p>\n<h5>Menu Customization<\/h5>\n<p>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. <\/p>\n<p>Programmatically, menu settings are managed via the <strong><a href=\"https:\/\/docs.dhtmlx.com\/todolist\/api\/configs\/menu_config\/\" rel=\"noopener\" target=\"_blank\">menu<\/a><\/strong> 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.<\/p>\n<p>Let\u2019s consider a few examples of context menu customizations:<\/p>\n<ul>\n<li>Default and custom options in a context menu<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/02\/image5-1.gif\" alt=\"Combining default options with custom ones\" width=\"804\" height=\"688\" class=\"aligncenter size-full wp-image-13424\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/slpjstbb?tag=todolist&#038;mode=basic\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p>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 &#8211; &#8220;Add current date&#8221; and &#8220;Complete\/Mark incomplete&#8221;. New items in the context menu are added using the <strong>handler<\/strong> function that serves for performing actions on custom menu items.<\/p>\n<ul>\n<li>Tasks without a context menu<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/02\/image3-1.gif\" alt=\"no context menu in tasks\" width=\"800\" height=\"620\" class=\"aligncenter size-full wp-image-13423\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/5pnk7y0d?tag=todolist&#038;mode=basic\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p>Here we have a JS to do list, where only tasks have no context menu.<br \/>\nIn code, it can be done as follows:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> list <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> ToDo<span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;#root&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; tasks<span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; users<span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; projects<span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; menu<span class=\"sy0\">:<\/span> <span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span> type<span class=\"sy0\">,<\/span> store <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">return<\/span> type <span class=\"sy0\">!==<\/span> <span class=\"st0\">&quot;task&quot;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>In needed, you can remove the menu from other parts of your list:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">return<\/span> type <span class=\"sy0\">!==<\/span> <span class=\"st0\">&quot;user&quot;<\/span><br \/>\n<span class=\"kw1\">return<\/span> type <span class=\"sy0\">!==<\/span> <span class=\"st0\">&quot;toolbar&quot;<\/span><\/div><\/div>\n<p>Also, it is possible to specify that this custom setting should not be applied to a certain project:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>store<span class=\"sy0\">?<\/span>.<span class=\"me1\">getState<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">activeProject<\/span> <span class=\"sy0\">===<\/span> <span class=\"st0\">&quot;widgets&quot;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">return<\/span> <span class=\"kw2\">false<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<ul>\n<li>Menu personalization<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/02\/image1-3.png\" alt=\"custom icons in context menu\" width=\"804\" height=\"753\" class=\"aligncenter size-full wp-image-13420\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/02\/image1-3.png 804w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/02\/image1-3-300x281.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/02\/image1-3-768x719.png 768w\" sizes=\"auto, (max-width: 804px) 100vw, 804px\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/cmfqmg00?tag=todolist&#038;mode=basic\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p>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).<\/p>\n<p>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. <\/p>\n<h5>Undo\/Redo Functionality<\/h5>\n<p>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.<\/p>\n<p>Under the hood, you can initialize a JavaScript to do list with the undo\/redo feature enabled by default via the <strong><a href=\"https:\/\/docs.dhtmlx.com\/todolist\/api\/configs\/history_config\/\" rel=\"noopener\" target=\"_blank\">history<\/a><\/strong> configuration property. In this property, it is also possible to enable separate history management of projects in the list by adding <strong>projects: true<\/strong> and to set the overall number of stored editing actions (unlimited by default) using the <strong>limit<\/strong> parameter:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> list <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> ToDo<span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;#root&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; tasks<span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; users<span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; projects<span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; history<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; projects<span class=\"sy0\">:<\/span><span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><span class=\"co1\">\/\/false(enables history management for the whole list) <\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; limit<span class=\"sy0\">:<\/span> <span class=\"nu0\">5<\/span> <br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>Apart from that, the list of available methods now includes new <strong><a href=\"https:\/\/docs.dhtmlx.com\/todolist\/api\/methods\/undo_method\/\" rel=\"noopener\" target=\"_blank\">undo()<\/a><\/strong> and <strong><a href=\"https:\/\/docs.dhtmlx.com\/todolist\/api\/methods\/redo_method\/\" rel=\"noopener\" target=\"_blank\">redo()<\/a><\/strong> methods responsible for corresponding operations. <\/p>\n<p>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 <strong><a href=\"https:\/\/docs.dhtmlx.com\/todolist\/api\/toolbar_api\/configs\/items_config\/\" rel=\"noopener\" target=\"_blank\">items<\/a><\/strong> property to be added to the toolbar configuration:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> toolbar <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> Toolbar<span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;#toolbar&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; api<span class=\"sy0\">:<\/span> list.<span class=\"me1\">api<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; items<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;combo&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;search&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;undo&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;redo&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;menu&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#93;<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/02\/image4.gif\" alt=\"undo\/redo buttons in the toolbar\" width=\"804\" height=\"620\" class=\"aligncenter size-full wp-image-13422\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/wbtj31yo?tag=todolist&#038;mode=basic\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<ul>\n<li>Hotkey combinations<\/li>\n<\/ul>\n<p>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.<\/p>\n<p>That\u2019s all the updates included in DHTMLX To Do List v1.3. For more technical details about these features, check out the &#8220;<a href=\"https:\/\/docs.dhtmlx.com\/todolist\/whats_new\/#version-13\" rel=\"noopener\" target=\"_blank\">What&#8217;s New<\/a>&#8221; section.<\/p>\n<p>You can download a <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxTodo\/download.shtml\" rel=\"noopener\" target=\"_blank\">free 30-day trial version<\/a> to test these novelties in your scenarios. For our current clients, v1.3 is available in their <a href=\"https:\/\/dhtmlx.com\/clients\/\" rel=\"noopener\" target=\"_blank\">Client\u2019s Area<\/a>.<\/p>\n<h5>Related Materials<\/h5>\n<ul>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/todolist\/whats_new\/#version-13\" rel=\"noopener\" target=\"_blank\">What\u2019s new in v1.3<\/a><\/li>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/todolist\/\" rel=\"noopener\" target=\"_blank\">DHTMLX To Do List documentation<\/a><\/li>\n<li><a href=\"https:\/\/snippet.dhtmlx.com\/slpjstbb?tag=todolist&#038;mode=basic\" rel=\"noopener\" target=\"_blank\">DHTMLX To Do List samples<\/a><\/li>\n<li><a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxTodo\/download.shtml\" rel=\"noopener\" target=\"_blank\">Free 30-day trial version<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>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 &#8230;<\/p>\n","protected":false},"author":101014,"featured_media":13419,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[70],"tags":[68],"class_list":["post-13415","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-releases","tag-to-do-list"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/13415","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/101014"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=13415"}],"version-history":[{"count":10,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/13415\/revisions"}],"predecessor-version":[{"id":13417,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/13415\/revisions\/13417"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/13419"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=13415"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=13415"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=13415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}