{"id":10289,"date":"2022-06-21T13:19:39","date_gmt":"2022-06-21T10:19:39","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=10289"},"modified":"2023-05-02T13:12:58","modified_gmt":"2023-05-02T10:12:58","slug":"dhtmlx-list-1-0-advanced-task-assignment-inline-editing-handy-keyboard-navigation","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-list-1-0-advanced-task-assignment-inline-editing-handy-keyboard-navigation\/","title":{"rendered":"DHTMLX To Do List 1.0 with Advanced Task Assignment, Inline Editing, and Handy Keyboard Navigation"},"content":{"rendered":"<p>We&#8217;re pleased to announce the release of our new widget &#8211; <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxTodo\/\" rel=\"noopener\" target=\"_blank\">JavaScript To Do List<\/a>. With DHTMLX To Do List, your users will be able to create and manage checklists of any complexity and nested level.<\/p>\n<p>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.<\/p>\n<p><a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxTodo\/download.shtml\" rel=\"noopener\" target=\"_blank\"><strong>Download free trial ><\/strong><\/a><\/p>\n<h5>Managing Projects and Tasks<\/h5>\n<p>DHTMLX To Do List consists of two separate parts. The first one is a <a href=\"https:\/\/docs.dhtmlx.com\/todolist\/#toolbar\" rel=\"noopener\" target=\"_blank\">Toolbar<\/a> 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 full list of operations with projects via API is available <a href=\"https:\/\/docs.dhtmlx.com\/todolist\/guides\/project_operations\/\" rel=\"noopener\" target=\"_blank\">in the documentation<\/a>.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/snippet.dhtmlx.com\/gcl5eyjm?mode=result\" frameborder=\"0\" width=\"100%\" height=\"560\"><\/iframe><\/p>\n<p>The second part is a <a href=\"https:\/\/docs.dhtmlx.com\/todolist\/#list\" rel=\"noopener\" target=\"_blank\">List<\/a> where users can create an unlimited number of tasks with subtasks. By default, users can <a href=\"https:\/\/docs.dhtmlx.com\/todolist\/guides\/inline_editing\/\" rel=\"noopener\" target=\"_blank\">edit task content by double-clicking on it<\/a>. 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. The To Do List documentation describes how to <a href=\"https:\/\/docs.dhtmlx.com\/todolist\/#managing-tasks\" rel=\"noopener\" target=\"_blank\">manage tasks from the UI<\/a> and includes a list of <a href=\"https:\/\/docs.dhtmlx.com\/todolist\/guides\/task_operations\/\" rel=\"noopener\" target=\"_blank\">task operations available via API<\/a>.<\/p>\n<p>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.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/snippet.dhtmlx.com\/5892fcr2?mode=result\" frameborder=\"0\" width=\"100%\" height=\"560\"><\/iframe><\/p>\n<p>Moreover, you may opt for the second or manual mode of checking\/unchecking tasks that enables users to complete all tasks themselves.<\/p>\n<h5>Using Tags<\/h5>\n<p>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.<\/p>\n<p>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.<\/p>\n<h5>Setting Due Dates<\/h5>\n<p>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 by disabling the <strong>validate<\/strong> setting inside the <strong>date<\/strong> parameter of the <a href=\"https:\/\/docs.dhtmlx.com\/todolist\/api\/configs\/taskshape_config\/\" rel=\"noopener\" target=\"_blank\">taskShape<\/a> property.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/snippet.dhtmlx.com\/magidhw8?mode=result\" frameborder=\"0\" width=\"100%\" height=\"560\"><\/iframe><\/p>\n<p>Moreover, you can configure To Do List to display dates in a custom format. DHTMLX widget shows dates in the &#8220;%d %M %Y&#8221; format. You may add the name of the day or display the month as a number by specifying the corresponding characters in the date settings via the <strong>taskShape<\/strong> property. See the full list of characters for setting a date format <a href=\"https:\/\/docs.dhtmlx.com\/todolist\/api\/configs\/taskshape_config\/#list-of-characters\" rel=\"noopener\" target=\"_blank\">in the documentation<\/a>.<\/p>\n<h5>Assigning Participants<\/h5>\n<p>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 &#8220;Assign to&#8221; menu item. It\u2019s also possible to allocate tasks between team members via the <a href=\"https:\/\/docs.dhtmlx.com\/todolist\/api\/methods\/assignuser_method\/\" rel=\"noopener\" target=\"_blank\">assignUser()<\/a> and <a href=\"https:\/\/docs.dhtmlx.com\/todolist\/api\/methods\/unassignuser_method\/\" rel=\"noopener\" target=\"_blank\">unassignUser()<\/a> methods:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"co1\">\/\/ assign a user to the task<\/span><br \/>\nlist.<span class=\"me1\">assignUser<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;3&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; userId<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;user_1&quot;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n<span class=\"co1\">\/\/ unassign a user from the task<\/span><br \/>\nlist.<span class=\"me1\">unassignUser<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;2&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; userId<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;user_1&quot;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>You can specify the list of participants via the <a href=\"https:\/\/docs.dhtmlx.com\/todolist\/api\/configs\/users_config\/\" rel=\"noopener\" target=\"_blank\">users<\/a> configuration property. It&#8217;s possible to add a description and image of the team member or set a color if the image isn&#8217;t uploaded.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> users <span class=\"sy0\">=<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#123;<\/span> id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;user_1&quot;<\/span><span class=\"sy0\">,<\/span> label<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Don Smith&quot;<\/span><span class=\"sy0\">,<\/span> avatar<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;..\/avatar_61.jpg&quot;<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#123;<\/span> id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;user_2&quot;<\/span><span class=\"sy0\">,<\/span> label<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Nadia Chasey&quot;<\/span><span class=\"sy0\">,<\/span> avatar<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;..\/avatar_63.jpg&quot;<\/span> <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#123;<\/span> id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;user_3&quot;<\/span><span class=\"sy0\">,<\/span> label<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Mike Young&quot;<\/span><span class=\"sy0\">,<\/span> avatar<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;..\/avatar_03.jpg&quot;<\/span> <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#123;<\/span> id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;user_4&quot;<\/span><span class=\"sy0\">,<\/span> label<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Elvira Webb&quot;<\/span><span class=\"sy0\">,<\/span> avatar<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;..\/avatar_33.jpg&quot;<\/span> <span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#93;<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n<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> users <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<h5>Full-Fledged Keyboard Navigation<\/h5>\n<p>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. You can find out the <a href=\"https:\/\/docs.dhtmlx.com\/todolist\/api\/events\/keypressontodo_event\/#keyboard-shortcuts\" rel=\"noopener\" target=\"_blank\">full list of keyboard shortcuts<\/a> in the documentation.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2022\/06\/to-do-list-keys.gif\" alt=\"to-do-list-keys\" width=\"675\" height=\"462\" class=\"aligncenter size-full wp-image-10294\" \/><\/p>\n<h5>Integrating with DHTMLX Gantt<\/h5>\n<p>We&#8217;re happy to say that To Do List works smoothly with other DHTMLX widgets, such as <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxScheduler\/\" rel=\"noopener\" target=\"_blank\">Scheduler event calendar<\/a>, <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxKanban\/\" rel=\"noopener\" target=\"_blank\">Kanban board<\/a>, and <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxSuite\/\" rel=\"noopener\" target=\"_blank\">Suite UI library<\/a>. Therefore, you can build feature-rich project and task management apps for any industry. Here is an example of syncing DHTMLX To Do List with our <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxGantt\/\" rel=\"noopener\" target=\"_blank\">Gantt chart library<\/a>.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/snippet.dhtmlx.com\/i8qy8tp0?mode=result\" frameborder=\"0\" width=\"100%\" height=\"560\"><\/iframe><\/p>\n<h5>Easily Configurable and Customizable Appearance<\/h5>\n<p>Just like any DHTMLX widget, our To Do List library supports flexible configuration with the help of its <a href=\"https:\/\/docs.dhtmlx.com\/todolist\/category\/api\/\" rel=\"noopener\" target=\"_blank\">intuitive API<\/a>. 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 <a href=\"https:\/\/docs.dhtmlx.com\/todolist\/api\/toolbar_api\/configs\/items_config\/\" rel=\"noopener\" target=\"_blank\">items<\/a> configuration property of Toolbar:<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/snippet.dhtmlx.com\/jrnestbk?mode=js\" frameborder=\"0\" width=\"100%\" height=\"560\"><\/iframe><\/p>\n<p>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 <strong>taskShape<\/strong> property. You should just change the default <strong>&#8220;number&#8221;<\/strong> value of the <strong>type<\/strong> attribute to the <strong>&#8220;percentage&#8221;<\/strong> inside the counter 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; taskShape<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; counter<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;percentage&quot;<\/span> <span class=\"co1\">\/\/ &quot;number&quot; by default<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/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>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. You can find the full list of CSS variables <a href=\"https:\/\/docs.dhtmlx.com\/todolist\/guides\/stylization\/\" rel=\"noopener\" target=\"_blank\">in the documentation<\/a>.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/snippet.dhtmlx.com\/thmx9921?mode=result\" frameborder=\"0\" width=\"100%\" height=\"560\"><\/iframe><\/p>\n<h5>Other Features<\/h5>\n<p>You can make a To Do List read-only by setting a <a href=\"https:\/\/docs.dhtmlx.com\/todolist\/api\/configs\/readonly_config\/\" rel=\"noopener\" target=\"_blank\">readonly<\/a> configuration property to true.<\/p>\n<p>By default, DHTMLX To Do List uses an English locale. However, you can localize its UI by choosing some of the predefined locales or creating custom ones. You can read about how to localize To Do List as well as where to download ready-made locales <a href=\"https:\/\/docs.dhtmlx.com\/todolist\/guides\/localization\/\" rel=\"noopener\" target=\"_blank\">in the documentation<\/a>.<\/p>\n<p>Our To Do List works both with the client and server-side data. By default, the widget comes with the <a href=\"https:\/\/github.com\/web-widgets\/todo-go\" rel=\"noopener\" target=\"_blank\">Go<\/a> and <a href=\"https:\/\/github.com\/web-widgets\/todo-node\" rel=\"noopener\" target=\"_blank\">Node<\/a> backend. However, it may be easily <a href=\"http:\/\/connected with any backend platform\" rel=\"noopener\" target=\"_blank\">connected with any backend platform<\/a> using the REST API.<\/p>\n<p>You can read about the initial functionality of DHTMLX To Do List v1.0 in the &#8220;<a href=\"https:\/\/docs.dhtmlx.com\/todolist\/whats_new\/\" rel=\"noopener\" target=\"_blank\">What&#8217;s new<\/a>&#8221; article in the documentation.<\/p>\n<p>To estimate the functionality of our brand-new JavaScript library, <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxTodo\/download.shtml\" rel=\"noopener\" target=\"_blank\">download a free 30-day trial<\/a>.<\/p>\n<p>We&#8217;re pleased to discuss the future releases as well as answer your questions about DHTMLX To Do List in the comment section below.<\/p>\n<h5>Related Materials:<\/h5>\n<ul>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/todolist\/whats_new\/\" rel=\"noopener\" target=\"_blank\">What&#8217;s new in v1.0<\/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<li><a href=\"https:\/\/snippet.dhtmlx.com\/3vwlbwee?text=#todolist\" rel=\"noopener\" target=\"_blank\">Code snippets<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re pleased to announce the release of our new widget &#8211; JavaScript To Do List. With DHTMLX To Do List, your users will be able to create and manage &#8230;<\/p>\n","protected":false},"author":101013,"featured_media":10292,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[70],"tags":[33,68],"class_list":["post-10289","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-releases","tag-all-posts","tag-to-do-list"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/10289","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\/101013"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=10289"}],"version-history":[{"count":7,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/10289\/revisions"}],"predecessor-version":[{"id":10291,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/10289\/revisions\/10291"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/10292"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=10289"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=10289"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=10289"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}