{"id":11149,"date":"2023-03-22T12:00:15","date_gmt":"2023-03-22T09:00:15","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=11149"},"modified":"2026-06-30T17:09:36","modified_gmt":"2026-06-30T14:09:36","slug":"dhtmlx-kanban-1-4","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-kanban-1-4\/","title":{"rendered":"DHTMLX Kanban 1.4 with New Themes, Comments, Votes, Linking Tasks, and More"},"content":{"rendered":"<p>Today we are excited to announce the release of DHTMLX Kanban v1.4. Despite its minor status, this update of our <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxKanban\/\" rel=\"noopener\" target=\"_blank\">JavaScript Kanban library<\/a> delivers a range of significant new features and improvements that will benefit both web developers and end-users. <\/p>\n<p>The new version makes it much easier for you to change the overall look of your task board with new Willow and Willow-Dark themes as well as any separate elements with new css parameters. Our Kanban also helps teams collaborate using new capabilities to leave comments for tasks and vote for them. Now you can specify dependencies between cards, set the default context menu for custom cards, set a custom format for date inputs in the editor, and limit the number of assignees for one task. Moreover, there are two new demos on popular use-case scenarios.<\/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 Kanban v1.4<\/div>\n\t\t            <div class=\"post-banner__text\">Estimate the updated functionality for building modern task management apps<\/div>\n                <\/div>\n\t\t            \n                \n            <div class='post-banner__btn'>\n                <a href='https:\/\/dhtmlx.com\/docs\/products\/dhtmlxKanban\/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 delve deeper into the details of this release.<\/p>\n<h5>New Built-in Kanban Themes<\/h5>\n<p>When you integrate a JavaScript Kanban board into a web app, a nice modern design is as important as features and efficiency. We have added two new built-in themes &#8211; Willow and Willow-Dark. These new options will complement the default Material theme and help you with styling. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/bandicam-2023-03-22-14-55-10-089-1024x644.jpg\" alt=\"DHTMLX Kanban 1.4\" width=\"1024\" height=\"644\" class=\"aligncenter size-large wp-image-11191\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/bandicam-2023-03-22-14-55-10-089-1024x644.jpg 1024w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/bandicam-2023-03-22-14-55-10-089-300x189.jpg 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/bandicam-2023-03-22-14-55-10-089-768x483.jpg 768w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/bandicam-2023-03-22-14-55-10-089.jpg 1217w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/jnw54xif?mode=wide\" rel=\"noopener\" target=\"_blank\">Willow Dark theme. Check the snippet ><\/a><\/p>\n<p>There are 3 ways to apply a theme in our Kanban.<\/p>\n<p>1) Use the <strong>theme<\/strong> property containing the following parameters:<\/p>\n<ul>\n<li><strong>name<\/strong> &#8211; defines the name of the theme that you want to use<\/li>\n<li><strong>fonts<\/strong> &#8211;  specifies whether fonts from the CDN should be loaded or not (loaded by default)<\/li>\n<\/ul>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">theme<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp;name<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;material&quot;<\/span><span class=\"sy0\">|<\/span> <span class=\"st0\">&quot;willow&quot;<\/span> <span class=\"sy0\">|<\/span> <span class=\"st0\">&quot;willow-dark&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp;fonts<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">|<\/span><span class=\"kw2\">false<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>The <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/config\/toolbar_items_config\/\">theme<\/a><\/strong> property was also 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\">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> board.<span class=\"me1\">api<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp;theme<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;material&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"sy0\">|<\/span> <span class=\"st0\">&quot;willow&quot;<\/span> <span class=\"sy0\">|<\/span> <span class=\"st0\">&quot;willow-dark&quot;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>To apply the required theme to the Kanban container and Toolbar dynamically, use the <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/methods\/toolbar_setconfig_method\/\" rel=\"noopener\" target=\"_blank\">setConfig()<\/a><\/strong> method.<\/p>\n<p>2) Apply the needed theme by adding the corresponding <strong>css<\/strong> classes to the Kanban containers:<\/p>\n<div class=\"codecolorer-container html4strict default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"html4strict codecolorer\"><span class=\"sc-1\">&lt;!-- Kanban toolbar --&gt;<\/span><br \/>\n<span class=\"sc2\">&lt;<span class=\"kw2\">div<\/span> <span class=\"kw3\">id<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;toolbar&quot;<\/span> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;wx-willow-theme&quot;<\/span>&gt;&lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">div<\/span>&gt;<\/span><br \/>\n<span class=\"sc-1\">&lt;!-- Kanban container --&gt;<\/span><br \/>\n<span class=\"sc2\">&lt;<span class=\"kw2\">div<\/span> <span class=\"kw3\">id<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;root&quot;<\/span> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;wx-willow-theme&quot;<\/span>&gt;&lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">div<\/span>&gt;<\/span><\/div><\/div>\n<p>3) Include the theme on the page from the skins folder:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"sy0\">&lt;<\/span>link type<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;stylesheet&quot;<\/span> href<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;path\/to\/kanban\/skins\/willow-dark.css&quot;<\/span><span class=\"sy0\">\/&gt;<\/span><\/div><\/div>\n<h5>Comments in Kanban Cards<\/h5>\n<p>Teams of various sizes use Kanban apps for visually arranging and tracking their workflow. Therefore, it will be nice for web developers to be able to offer them some means of communication within the Kanban board. And DHTMLX Kanban 1.4 comes with the ability to add, update, and delete comments in cards.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/Comments.gif\" alt=\"Kanban 1.4 - comments\" width=\"948\" height=\"768\" class=\"aligncenter size-full wp-image-11181\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/5hcx01h4?tag=kanban&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><br \/>\nComments aren&#8217;t displayed by default. To show the number of comments on each card, use the <strong>comments<\/strong> parameter of the <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/config\/js_kanban_cardshape_config\/\" rel=\"noopener\" target=\"_blank\">cardShape<\/a><\/strong> property:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">cardShape<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; ... <span class=\"co1\">\/\/ other card settings<\/span><br \/>\n&nbsp; &nbsp; users<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; show<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; values<span class=\"sy0\">:<\/span><span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span> id<span class=\"sy0\">:<\/span> <span class=\"nu0\">1<\/span><span class=\"sy0\">,<\/span> label<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Steve Smith&quot;<\/span><span class=\"sy0\">,<\/span> avatar<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;..\/assets\/user.jpg&quot;<\/span> <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span> id<span class=\"sy0\">:<\/span> <span class=\"nu0\">2<\/span><span class=\"sy0\">,<\/span> label<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Aaron Long&quot;<\/span> <span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; &nbsp; comments<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>Comments can be added, edited and removed via the Kanban editor. For this, the editor supports a  a new field type &#8211;  <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/guides\/configuration\/#comments-type\" rel=\"noopener\" target=\"_blank\">type: &#8220;comments&#8221;<\/a><\/strong>, so you can add it in the <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/config\/js_kanban_editorshape_config\/\" rel=\"noopener\" target=\"_blank\">editorShape<\/a><\/strong> object:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> board <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> Kanban<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; columns<span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; cards<span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; cardShape<span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; editorShape<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; ...<span class=\"me1\">defaultEditorShape<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;comments&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;comments&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Comments&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; config<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placement<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;editor&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#93;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; currentUser<span class=\"sy0\">:<\/span> <span class=\"nu0\">1<\/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>You should specify the ID of the current user in the <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/config\/js_kanban_currentuser_config\/\" rel=\"noopener\" target=\"_blank\">currentUser<\/a><\/strong> property. The value of this property must correspond to one of the IDs set in the <strong>cardShape.users<\/strong> property. Otherwise, comments will be available only for reading.<\/p>\n<p>The ID specified in the <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/config\/js_kanban_currentuser_config\/\" rel=\"noopener\" target=\"_blank\">currentUser<\/a><\/strong> property is also necessary for the correct operation of <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/methods\/js_kanban_addcomment_method\/\" rel=\"noopener\" target=\"_blank\">addComment()<\/a><\/strong>, <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/methods\/js_kanban_updatecomment_method\/\" rel=\"noopener\" target=\"_blank\">updateComment()<\/a><\/strong>, and <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/methods\/js_kanban_deletecomment_method\/\" rel=\"noopener\" target=\"_blank\">deleteComment()<\/a><\/strong> methods, which are responsible for basic actions related to comments. These methods come with <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/events\/js_kanban_addcomment_event\/\" rel=\"noopener\" target=\"_blank\">add-comment<\/a><\/strong>, <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/events\/js_kanban_updatecomment_event\/\" rel=\"noopener\" target=\"_blank\">update-comment<\/a><\/strong>, <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/events\/js_kanban_deletecomment_event\/\" rel=\"noopener\" target=\"_blank\">delete-comment<\/a><\/strong> events that are called when the corresponding action takes place.<\/p>\n<h5>Votes for Tasks<\/h5>\n<p>There is one more great feature included in v1.4 to ensure better interaction between Kanban users on ongoing activities. We are talking about the ability to add votes for tasks. It is a simple yet reliable way to prioritize tasks or vote on some issues taking into account the opinions of all team members.<\/p>\n<p>In a Kanban board built with DHTMLX, voting for a card is simple: just click on a thumbs-up icon in the editor. A repeated click on the icon will cancel the vote.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/Like.gif\" alt=\"Kanban 1.4 - Votes\" width=\"960\" height=\"768\" class=\"aligncenter size-full wp-image-11183\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/5hcx01h4?tag=kanban&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><br \/>\nTo add voting to Kanban, you need to set the value of the <strong>votes<\/strong> parameter to true in the <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/config\/js_kanban_cardshape_config\/\" rel=\"noopener\" target=\"_blank\">cardShape<\/a><\/strong> object:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">cardShape<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp;... <span class=\"co1\">\/\/ other card settings<\/span><br \/>\n&nbsp; &nbsp; votes<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>We also created a new <a href=\"https:\/\/snippet.dhtmlx.com\/5hcx01h4?tag=kanban&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">demo<\/a> demonstrating how to extend the backend to support the voting functionality.<\/p>\n<h5>Dependencies between Tasks<\/h5>\n<p>When you manage day-to-day business activities with a Kanban app, the completion of one task might affect other tasks. In other words, Kanban tasks may be linked with each other via parent-child, predecessor-successor relations or they can simply belong to one part of the project. For instance, it happens when a complex task is broken down into more manageable pieces. <\/p>\n<p>The new version of our Kanban component gives you a way to specify such relations (or dependencies) between tasks with so-called links. It is done via the editor, where end-users can specify either a dominant or subordinate role for a given task and link it to other tasks with a particular type of dependency. <\/p>\n<p><iframe data-src=\"https:\/\/snippet.dhtmlx.com\/81qu7qh0?mode=result\" frameborder=\"0\" width=\"100%\" height=\"560\"class=\"snippet-container js-iframe\"><\/iframe> <\/p>\n<p>The editor now supports a <a href=\"https:\/\/docs.dhtmlx.com\/kanban\/guides\/configuration\/#links-type\" rel=\"noopener\" target=\"_blank\">field for links<\/a>, thus you can add it to the <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/config\/js_kanban_editorshape_config\/\" rel=\"noopener\" target=\"_blank\">editorShape<\/a><\/strong> property:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">new<\/span> kanban.<span class=\"me1\">Kanban<\/span><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;editorShape<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp;<span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;links&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;key<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;links&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;label<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Links&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp;<span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp;<span class=\"co1\">\/\/ settings of other fields<\/span><br \/>\n&nbsp; &nbsp;<span class=\"br0\">&#93;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>Links data are stored in the <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/config\/js_kanban_links_config\/\" rel=\"noopener\" target=\"_blank\">links<\/a><\/strong> property of Kanban API. It&#8217;s an array of objects, each with a set of required parameters:<\/p>\n<ol>\n<li><strong>id<\/strong> &#8211;  the ID of the link<\/li>\n<li><strong>masterId<\/strong> &#8211; the ID of the card assigned to the dominant role in the link<\/li>\n<li><strong>slaveId<\/strong> &#8211; the ID of the card assigned to the subordinate role in the link<\/li>\n<li><strong>relation<\/strong> &#8211; the type of link that helps to define various dependencies between tasks such as:<\/li>\n<\/ol>\n<ul>\n<li><strong>&#8220;relatesTo&#8221;<\/strong> &#8211; marks tasks as related without specifying any dependency between them<\/li>\n<li><strong>&#8220;requiredFor&#8221;<\/strong> &#8211; makes one task dependable on the completion of the other one<\/li>\n<li><strong>&#8220;duplicate&#8221;<\/strong> &#8211; links duplicated tasks<\/li>\n<li><strong>&#8220;parent&#8221;<\/strong> &#8211; creates a parent (master) &#8211; child (slave) hierarchy<\/li>\n<\/ul>\n<p>The <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/config\/js_kanban_links_config\/\" rel=\"noopener\" target=\"_blank\">links<\/a><\/strong> property is used in code like that:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">links<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp;<span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp;id<span class=\"sy0\">:<\/span> string <span class=\"sy0\">|<\/span> number<span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp;masterId<span class=\"sy0\">:<\/span> string <span class=\"sy0\">|<\/span> number<span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp;slaveId<span class=\"sy0\">:<\/span> string <span class=\"sy0\">|<\/span> number<span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp;relation<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;relatesTo&quot;<\/span> <span class=\"sy0\">|<\/span> <span class=\"st0\">&quot;requiredFor&quot;<\/span> <span class=\"sy0\">|<\/span> <span class=\"st0\">&quot;duplicate&quot;<\/span> <span class=\"sy0\">|<\/span> <span class=\"st0\">&quot;parent&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp;<span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp;<span class=\"br0\">&#123;<\/span>...<span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#93;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>You can also load new data for links dynamically using the <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/methods\/js_kanban_parse_method\/\" rel=\"noopener\" target=\"_blank\">parse()<\/a><\/strong> method.<\/p>\n<p>This feature is also complemented with two new events &#8211; <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/events\/js_kanban_addlink_event\/\" rel=\"noopener\" target=\"_blank\">add-link<\/a><\/strong> and <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/events\/js_kanban_deletelink_event\/\" rel=\"noopener\" target=\"_blank\">delete-link<\/a><\/strong>. They are called when links in cards are added and deleted respectively.<\/p>\n<h5>Expanded Styling Capabilities<\/h5>\n<p>As a nice addition to new themes, we also decided to enrich v1.4 with new capabilities requested by our clients and allow you to introduce more targeted styling changes to your JavaScript Kanban. We added a CSS parameter to Kanban properties responsible for configuring different elements of the board. <\/p>\n<p>You can add CSS classes to specific cards, rows, and columns or define common CSS classes for all or several cards, rows, and columns at a time via their shapes.<\/p>\n<p>For instance, that\u2019s how Kanban columns may look like after manipulations with the <strong>css<\/strong> parameter in the <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/config\/js_kanban_columns_config\/\" rel=\"noopener\" target=\"_blank\">columns<\/a><\/strong> config:<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/image2-2-1024x466.png\" alt=\"Kanban 1.4 - customized columns\" width=\"1024\" height=\"466\" class=\"aligncenter size-large wp-image-11163\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/image2-2-1024x466.png 1024w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/image2-2-300x136.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/image2-2-768x349.png 768w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/image2-2.png 1234w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/otnt03ft?tag=kanban&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p>Moreover, the columns property also received the <strong>overlay<\/strong> parameter that defines an overlay layer for a specific column, where you can set a custom template for this column. For instance, you can prohibit moving cards to a particular column and add text content on top of the column with the clarification:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">column<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; overlay<span class=\"sy0\">:<\/span> template<span class=\"br0\">&#40;<\/span>`<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"sy0\">&lt;<\/span>div <span class=\"kw5\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;blockOverlay disable-drop&quot;<\/span><span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"sy0\">&lt;<\/span>span <span class=\"kw5\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;disable-drop-header&quot;<\/span><span class=\"sy0\">&gt;<\/span>Drop is not allowed<span class=\"sy0\">&lt;\/<\/span>span<span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"sy0\">&lt;<\/span>span <span class=\"kw5\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;disable-drop-description&quot;<\/span><span class=\"sy0\">&gt;<\/span>Only testers can move cards to <span class=\"kw1\">this<\/span> column<span class=\"sy0\">&lt;\/<\/span>span<span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"sy0\">&lt;\/<\/span>div<span class=\"sy0\">&gt;<\/span>`<span class=\"br0\">&#41;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp;<span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><\/div><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/image1.gif\" alt=\"Kanban 1.4 - overlay layer for a column\" width=\"996\" height=\"388\" class=\"aligncenter size-full wp-image-11164\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/nfv59yif?tag=kanban&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p>But you can go even further. For instance, you can modify the styling of cards depending on their relevance and highlight relevant and outdated tasks in different colors. Now it can be done with the <strong>css<\/strong> parameter in the <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/config\/js_kanban_cardshape_config\/\" rel=\"noopener\" target=\"_blank\">cardShape<\/a><\/strong> object:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">cardShape<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span> <br \/>\n&nbsp; <span class=\"co1\">\/\/ card settings<\/span><br \/>\n&nbsp; &nbsp;css<span class=\"sy0\">:<\/span> <span class=\"br0\">&#40;<\/span>card<span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> card.<span class=\"me1\">type<\/span> <span class=\"sy0\">==<\/span> <span class=\"st0\">&quot;feature&quot;<\/span> <span class=\"sy0\">?<\/span> <span class=\"st0\">&quot;green&quot;<\/span> <span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;red&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp;headerFields<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp;<span class=\"br0\">&#123;<\/span> <span class=\"co1\">\/\/ custom field<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;key<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;sprint&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;css<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;custom_style&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;label<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Sprint&quot;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp;<span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; &nbsp;<span class=\"br0\">&#93;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>Here <strong>css<\/strong> is a function that applies a css class for changing the card style depending on the date. Cards with dates preceding the current date are colored differently on the fly.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/Date.gif\" alt=\"Kanban 1.4 - Dates\" width=\"952\" height=\"768\" class=\"aligncenter size-full wp-image-11184\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/7fvc3rr1?tag=kanban&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p>The <strong>css<\/strong> parameter with the same functionality is now also available in <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/config\/js_kanban_columnshape_config\/\" rel=\"noopener\" target=\"_blank\">columnShape<\/a><\/strong> and <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/config\/js_kanban_rowshape_config\/\" rel=\"noopener\" target=\"_blank\">rowShape<\/a><\/strong> properties.<\/p>\n<p>As a result, you can change the appearance of the main Kanban elements to your liking during the initialization or depending on some logic.<\/p>\n<h5>Context Menu in Custom Cards<\/h5>\n<p>Since its inception, DHTMLX Kanban provided you with an opportunity to customize the appearance and behavior of cards by creating a custom template with the <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/config\/js_kanban_cardtemplate_config\/\" rel=\"noopener\" target=\"_blank\">cardTemplate<\/a><\/strong> property. However, this approach presupposes that the default card is fully replaced with the custom one. It became an obstacle for those who wanted to use their custom templates in combination with a handy default context menu.<\/p>\n<p>We solved this issue in v1.4. Now you can add a context menu in your custom template. You just need to specify a custom icon in the template markup and add the <strong>data-menu-id=${cardFields.id}<\/strong> expression as shown in the example below.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">function<\/span> cardTemplate<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span> cardFields<span class=\"sy0\">,<\/span> selected<span class=\"sy0\">,<\/span> dragging<span class=\"sy0\">,<\/span> cardShape <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp;<span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>selected<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">return<\/span> `<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"sy0\">&lt;<\/span>div className<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;custom-card&quot;<\/span> style<span class=\"sy0\">=<\/span><span class=\"br0\">&#123;<\/span><span class=\"br0\">&#123;<\/span>padding<span class=\"sy0\">:<\/span> <span class=\"st0\">'20px'<\/span><span class=\"br0\">&#125;<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"sy0\">&lt;<\/span>div className<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;status-color&quot;<\/span> style<span class=\"sy0\">=<\/span><span class=\"br0\">&#123;<\/span><span class=\"br0\">&#123;<\/span>background<span class=\"sy0\">:<\/span> <span class=\"st0\">'${cardFields.color}'<\/span><span class=\"br0\">&#125;<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">&gt;&lt;\/<\/span>div<span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"sy0\">&lt;<\/span>div data<span class=\"sy0\">-<\/span>menu<span class=\"sy0\">-<\/span>id<span class=\"sy0\">=<\/span>$<span class=\"br0\">&#123;<\/span>cardFields.<span class=\"me1\">id<\/span><span class=\"br0\">&#125;<\/span> <span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"sy0\">&lt;<\/span>i className<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;wxi-dots-v&quot;<\/span><span class=\"sy0\">&gt;&lt;\/<\/span>i<span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"sy0\">&lt;\/<\/span>div<span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Selected<span class=\"sy0\">:<\/span>$<span class=\"br0\">&#123;<\/span>cardFields.<span class=\"me1\">label<\/span><span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"sy0\">&lt;\/<\/span>div<span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;`<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp;<span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/image4-1-1024x293.png\" alt=\"Kanban 1.4 - default context menu in custom cards\" width=\"1024\" height=\"293\" class=\"aligncenter size-large wp-image-11168\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/image4-1-1024x293.png 1024w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/image4-1-300x86.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/image4-1-768x219.png 768w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/image4-1.png 1316w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/arx4z0am?tag=kanban&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<h5>Custom Date Format in Kanban Editor<\/h5>\n<p>Using the new version of our Kanban library, you are not limited to showing dates in the Kanban editor using just the default format. Starting from v1.4, you are free to define your own date format by setting the newly added <strong>format<\/strong> parameter for <strong>date<\/strong> and <strong>dateRange<\/strong> types in the <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/config\/js_kanban_editorshape_config\/\" rel=\"noopener\" target=\"_blank\">editorShape<\/a><\/strong> config.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">new<\/span> Kanban<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; columns<span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; cards<span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; editorShape<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;dateRange&quot;<\/span><span class=\"sy0\">|<\/span><span class=\"st0\">&quot;date&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;start_date&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Start Date&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; format<span class=\"sy0\">:<\/span><span class=\"st0\">&quot;%m.%d.%Y&quot;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/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\/2023\/03\/image5-1024x398.png\" alt=\"Kanban 1.4 - custom date format\" width=\"1024\" height=\"398\" class=\"aligncenter size-large wp-image-11170\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/image5-1024x398.png 1024w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/image5-300x117.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/image5-768x298.png 768w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/image5.png 1305w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/76as63ul?tag=kanban&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<h5>Controlling Number of Assignees for Tasks<\/h5>\n<p>Resource management plays a crucial role in the success of any project. Therefore, it is great to have a reliable mechanism for keeping track of resource allocation. And DHTMLX Kanban 1.4 comes with the ability to limit the number of participants for a given activity. You can define whether one or several users can be assigned to a card.<\/p>\n<p>In the example below, for instance, it is shown that you can select just one assignee via the drop-down list.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/image6-1024x447.png\" alt=\"Kanban 1.4 - limit the number of assigness for one card\" width=\"1024\" height=\"447\" class=\"aligncenter size-large wp-image-11171\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/image6-1024x447.png 1024w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/image6-300x131.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/image6-768x336.png 768w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/image6.png 1325w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/2rlg4qvk?tag=kanban&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><br \/>\nSo, there are two possible options specified with the <strong>type<\/strong> parameter in the <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/config\/js_kanban_editorshape_config\/\" rel=\"noopener\" target=\"_blank\">editorShape<\/a><\/strong> property:<\/p>\n<ul>\n<li><strong>&#8220;select&#8221;<\/strong> or <strong>&#8220;combo&#8221;<\/strong> type to allow adding just one user to a card<\/li>\n<li><strong>&#8220;multiselect&#8221;<\/strong> type to allow adding several users to a card<\/li>\n<\/ul>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> editorShape <span class=\"sy0\">=<\/span> <span class=\"br0\">&#91;<\/span> <span class=\"co1\">\/\/ editor settings<\/span><br \/>\n&nbsp; &nbsp;...<span class=\"me1\">kanban<\/span>.<span class=\"me1\">defaultEditorShape<\/span><span class=\"sy0\">,<\/span> <span class=\"co1\">\/\/ include the default settings<\/span><br \/>\n&nbsp; &nbsp;<span class=\"br0\">&#123;<\/span> <span class=\"co1\">\/\/ add custom fields<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp;type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;select&quot;<\/span><span class=\"sy0\">|<\/span><span class=\"st0\">&quot;multiselect&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp;key<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;users&quot;<\/span><span class=\"sy0\">|<\/span><span class=\"st0\">&quot;users&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp;label<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;User&quot;<\/span><span class=\"sy0\">|<\/span><span class=\"st0\">&quot;Users&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp;values<span class=\"sy0\">:<\/span> users<span class=\"sy0\">|<\/span>users<br \/>\n&nbsp; &nbsp;<span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#93;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>And do not forget that the <strong>users<\/strong> field must be enabled in the <strong>cardShape<\/strong> object for this to work (disabled by default). To do that, set the <strong>show<\/strong> parameter to <em>true<\/em> and add users data via the <strong>values<\/strong> parameter.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">cardShape<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp;users<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp;show<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp;values<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class=\"br0\">&#123;<\/span> id<span class=\"sy0\">:<\/span> <span class=\"nu0\">1<\/span><span class=\"sy0\">,<\/span> label<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;John Smith&quot;<\/span><span class=\"sy0\">,<\/span> avatar<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;..\/assets\/user.jpg&quot;<\/span> <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class=\"br0\">&#123;<\/span> id<span class=\"sy0\">:<\/span> <span class=\"nu0\">2<\/span><span class=\"sy0\">,<\/span> label<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Aaron Short&quot;<\/span> <span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp;<span class=\"br0\">&#93;<\/span><br \/>\n&nbsp; &nbsp;<span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<h5>Other Improvements<\/h5>\n<p>This release also includes some minor, but still noteworthy improvements:<br \/>\n1. Starting from v1.4, you get new events for handling the drag-and-drop process of cards. Now you can keep track of all 3 drag-and-drop stages using the corresponding <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/events\/js_kanban_startdragcard_event\/\" rel=\"noopener\" target=\"_blank\">start-drag-card<\/a><\/strong>, <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/events\/js_kanban_dragcard_event\/\" rel=\"noopener\" target=\"_blank\">drag-card<\/a><\/strong>, and <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/events\/js_kanban_enddragcard_event\/\" rel=\"noopener\" target=\"_blank\">end-drag-card<\/a><\/strong> events.<\/p>\n<p>2. The <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/internal\/js_kanban_getstate_method\/\" rel=\"noopener\" target=\"_blank\">api.getState()<\/a><\/strong> method was updated. We deprecated the following parameters: <strong>dropAreaItemsCoords<\/strong>, <strong>dropAreasCoords<\/strong>, <strong>overAreaMeta<\/strong>.<\/p>\n<p>3. Moreover, our development team prepared two live samples to give you a clear idea of how to <a href=\"https:\/\/snippet.dhtmlx.com\/ze4sgj0w?tag=kanban&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">manage several projects<\/a> and <a href=\"https:\/\/snippet.dhtmlx.com\/e5ed7z00?tag=kanban&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">load data dynamically when a column is expanding<\/a> in Kanban.<\/p>\n<p>Take time to visit this <a href=\"https:\/\/docs.dhtmlx.com\/kanban\/news\/whats_new\/#version-14\" rel=\"noopener\" target=\"_blank\">documentation page<\/a> and review all the new features and improvements provided in this update.<\/p>\n<p>All you need to know about the migration to v1.4 is provided in the <a href=\"https:\/\/docs.dhtmlx.com\/kanban\/news\/migration\/\" rel=\"noopener\" target=\"_blank\">\u201cMigration to newer versions\u201d<\/a> section.<\/p>\n<p>To get acquainted with the DHTMLX Kanban v1.4 on the practical level, <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxKanban\/download.shtml\" rel=\"noopener\" target=\"_blank\">download a free 30-day trial version<\/a>. For our current clients, v1.4 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\/kanban\/news\/whats_new\/#version-14\" rel=\"noopener\" target=\"_blank\">What\u2019s new in v1.4<\/a><\/li>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/\" rel=\"noopener\" target=\"_blank\">DHTMLX Kanban documentation<\/a><\/li>\n<li><a href=\"https:\/\/snippet.dhtmlx.com\/5hcx01h4?tag=kanban&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">DHTMLX Kanban examples<\/a><\/li>\n<li><a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxKanban\/download.shtml\" rel=\"noopener\" target=\"_blank\">Free 30-day trial version<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Today we are excited to announce the release of DHTMLX Kanban v1.4. Despite its minor status, this update of our JavaScript Kanban library delivers a range of significant new &#8230;<\/p>\n","protected":false},"author":101014,"featured_media":11173,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[70],"tags":[33,64],"class_list":["post-11149","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-releases","tag-all-posts","tag-kanban"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/11149","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=11149"}],"version-history":[{"count":23,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/11149\/revisions"}],"predecessor-version":[{"id":15757,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/11149\/revisions\/15757"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/11173"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=11149"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=11149"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=11149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}