{"id":9452,"date":"2021-11-25T10:00:25","date_gmt":"2021-11-25T07:00:25","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=9452"},"modified":"2026-06-02T15:24:25","modified_gmt":"2026-06-02T12:24:25","slug":"releasing-dhtmlx-kanban-board-v-1-0","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/releasing-dhtmlx-kanban-board-v-1-0\/","title":{"rendered":"Releasing DHTMLX Kanban Board v1.0"},"content":{"rendered":"<p>The whole DHTMLX team is happy to announce the first release of our brand-new component &#8211; the <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxKanban\/\" rel=\"noopener\" target=\"_blank\">JavaScript Kanban board<\/a>. This tool is intended to easily visualize and manage workflows of any complexity. It has a user-friendly interface, cross-browser compatibility, as well as touch support.<\/p>\n<p>In this article, we want to review the main functionality of DHTMLX Kanban v1.0, including drag-n-drop, multiselection, and searching for tasks. Besides the features mentioned above, the widget can be easily synced with Gantt and Scheduler libraries. Moreover, you&#8217;ll know about Kanban configuration and customization abilities.<\/p>\n<p><a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxKanban\/download.shtml\" rel=\"noopener\" target=\"_blank\"><strong>Download free 30-day trial ><\/strong><\/a><\/p>\n<p><iframe data-src=\"https:\/\/snippet.dhtmlx.com\/5hcx01h4?mode=result\" frameborder=\"0\" width=\"100%\" height=\"560\" class=\"snippet-container js-iframe\"><\/iframe><\/p>\n<h5>Handy Task Management<\/h5>\n<p>With DHTMLX Kanban, users can create any number of tasks and arrange them into columns and rows. Users can also select one or several cards, drag the card to the desired column and row or delete it using the 3 dots menu.<\/p>\n<p>A task card can be edited using the <a href=\"https:\/\/docs.dhtmlx.com\/kanban\/#editor\" rel=\"noopener\" target=\"_blank\">Editor panel<\/a> that appears by clicking on the desired card. A card editor is made up of different inputs and controls for managing task data. For instance, users can manage card data in the following way:<\/p>\n<ul>\n<li>modify a task label,<\/li>\n<li>set a priority,<\/li>\n<li>specify start and end dates,<\/li>\n<li>track progress,<\/li>\n<li>add attachments,<\/li>\n<li>assign employees responsible for task completion.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/11\/creating-and-editing-kanban-tasks.gif\" alt=\"editing kanban tasks\" width=\"976\" height=\"680\" class=\"aligncenter size-full wp-image-9456\" \/><\/p>\n<p>You can allow your users to work on several projects within a single Kanban board by adding swimlanes. These elements split the board horizontally providing the ability to distribute cards between two or more sections. Users can customize the swimlane header and collapse it by clicking on the triangle icon.<\/p>\n<h5>Searching<\/h5>\n<p>The DHTMLX Kanban board includes a <a href=\"https:\/\/docs.dhtmlx.com\/kanban\/#toolbar\" rel=\"noopener\" target=\"_blank\">toolbar panel<\/a> which is a separate part of the interface. In addition to special elements for adding new columns and rows, the Toolbar displays a search bar in which users may enter text to highlight a necessary task. The Kanban board allows searching both by the card label and its description.<\/p>\n<h5>Ease of Configuration and Customization<\/h5>\n<p>Just like any DHTMLX library, the JavaScript Kanban component is easy to configure. You can modify the appearance of the toolbar, cards, and editor panel using the <a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/overview\/main_overview\/\" rel=\"noopener\" target=\"_blank\">Kanban API<\/a>.<\/p>\n<p>The <a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/config\/js_kanban_cardshape_config\/\" rel=\"noopener\" target=\"_blank\">cardShape<\/a> configuration property allows you to configure the card appearance and define the card elements to be displayed:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> cardShape <span class=\"sy0\">=<\/span> <span class=\"br0\">&#123;<\/span> <span class=\"co1\">\/\/ card configs<\/span><br \/>\n&nbsp; &nbsp; label<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; description<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; progress<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; start_date<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; end_date<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; menu<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; attached<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; priority<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> cardPriority<br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/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> users<br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/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><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; type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;text&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Custom field&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>Moreover, you may apply a custom template to the Kanban cards. To that end, you have to specify the <a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/config\/js_kanban_cardtemplate_config\/\" rel=\"noopener\" target=\"_blank\">cardTemplate<\/a> configuration property and define the styles and logic according to your project requirements.<\/p>\n<p><iframe data-src=\"https:\/\/snippet.dhtmlx.com\/8rhdq81d?mode=result\" frameborder=\"0\" width=\"100%\" height=\"520\" class=\"snippet-container js-iframe\"><\/iframe><\/p>\n<p>The <a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/config\/js_kanban_editorshape_config\/\" rel=\"noopener\" target=\"_blank\">editorShape<\/a> property allows configuring the editor controls for managing the card data:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">editorShape<span class=\"sy0\">?:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"co1\">\/\/ available types:<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"co1\">\/\/ text, textarea, date, select, combo, multiselect, files, color, progress<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; type<span class=\"sy0\">:<\/span> string<span class=\"sy0\">,<\/span> <span class=\"co1\">\/\/ an editor field type<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; key<span class=\"sy0\">:<\/span> string<span class=\"sy0\">,<\/span> <span class=\"co1\">\/\/ an editor field key<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; label<span class=\"sy0\">?:<\/span> string<span class=\"sy0\">,<\/span> <span class=\"co1\">\/\/ an editor field label<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; placeholder<span class=\"sy0\">?:<\/span> string<span class=\"sy0\">,<\/span> <span class=\"co1\">\/\/ an editor field placeholder<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; options<span class=\"sy0\">?:<\/span> <span class=\"br0\">&#91;<\/span> <span class=\"co1\">\/\/ an array of the dropdown options<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span> id<span class=\"sy0\">:<\/span> any<span class=\"sy0\">,<\/span> label<span class=\"sy0\">:<\/span> string <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span>...<span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#93;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; config<span class=\"sy0\">?:<\/span> <span class=\"br0\">&#123;<\/span> <span class=\"co1\">\/\/ an editor uploader config<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; accept<span class=\"sy0\">?:<\/span> string<span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; disabled<span class=\"sy0\">?:<\/span> <span class=\"kw5\">boolean<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; multiple<span class=\"sy0\">?:<\/span> <span class=\"kw5\">boolean<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; folder<span class=\"sy0\">?:<\/span> <span class=\"kw5\">boolean<\/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\">\/\/ an editor uploader URL (this parameter is mandatory for the &quot;files&quot; type)<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; uploadURL<span class=\"sy0\">?:<\/span> string<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><\/div><\/div>\n<p>You can initialize the Toolbar via the <strong>kanban.Toolbar<\/strong> constructor and modify  its default structure and functionality. For example, you are free to hide any of built-in controls or add custom ones:<\/p>\n<p><iframe data-src=\"https:\/\/snippet.dhtmlx.com\/s5r5h4ju?mode=result\" frameborder=\"0\" width=\"100%\" height=\"520\" class=\"snippet-container js-iframe\"><\/iframe><\/p>\n<p>You can learn more about how to add and configure the Toolbar <a href=\"https:\/\/docs.dhtmlx.com\/kanban\/guides\/configuration\/#toolbar\" rel=\"noopener\" target=\"_blank\">in the documentation<\/a>.<\/p>\n<h5>Syncing with DHTMLX Gantt and Scheduler<\/h5>\n<p>One of the greatest news for our customers is the ability to synchronize DHTMLX Kanban with our <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxGantt\/\" rel=\"noopener\" target=\"_blank\">Gantt chart<\/a> and <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxScheduler\/\" rel=\"noopener\" target=\"_blank\">Scheduler event calendar<\/a>. Thereby, you can develop a comprehensive tool for project and tasks management with data synchronized between these three JavaScript libraries.<\/p>\n<p><iframe data-src=\"https:\/\/snippet.dhtmlx.com\/i9i9icc6?mode=result\" frameborder=\"0\" width=\"100%\" height=\"580\" class=\"snippet-container js-iframe\"><\/iframe><\/p>\n<h5>Other Features<\/h5>\n<p>DHTMLX Kanban allows you to <a href=\"https:\/\/docs.dhtmlx.com\/kanban\/guides\/localization\/\" rel=\"noopener\" target=\"_blank\">localize labels in the UI<\/a>. By default, the widget uses the English locale. Besides this, you can specify the built-in RU and CN locales as well as create a custom one. To do this, you need to create an object with localized labels and apply it to the component.<\/p>\n<p>Our Kanban board works both with the client and server-side data. You can easily connect the component with any backend platform which supports the REST API. Here you can learn how to <a href=\"https:\/\/docs.dhtmlx.com\/kanban\/guides\/working_with_server\/\" rel=\"noopener\" target=\"_blank\">work with a server<\/a> as well as see an example of DHTMLX <a href=\"https:\/\/snippet.dhtmlx.com\/f25y0809\" rel=\"noopener\" target=\"_blank\">Kanban connected to the Go backend<\/a>.<\/p>\n<p>With DHTMLX Kanban, you can build a user-friendly tool with interactive UI design. The component supports touch events and allows creating, editing, and arranging cards and columns with just a tap.<\/p>\n<p>You can review all DHTMLX Kanban v1.0 updates by checking the <a href=\"https:\/\/docs.dhtmlx.com\/kanban\/news\/whats_new\/\" rel=\"noopener\" target=\"_blank\">&#8220;What&#8217;s new&#8221;<\/a> article in the documentation.<\/p>\n<p>Feel free to test our brand-new library by downloading a <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxKanban\/download.shtml\" rel=\"noopener\" target=\"_blank\">free 30-day trial version<\/a>.<\/p>\n<p>If you have questions or ideas on improving DHTMLX Kanban, let&#8217;s discuss them in the comment section below.<\/p>\n<h5>Related Materials:<\/h5>\n<ul>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/news\/whats_new\/\" rel=\"noopener\" target=\"_blank\">Full What&#8217;s new in v1.0 list<\/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<li><a href=\"https:\/\/snippet.dhtmlx.com\/5hcx01h4?text=%23kanban\" rel=\"noopener\" target=\"_blank\">Code snippets<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The whole DHTMLX team is happy to announce the first release of our brand-new component &#8211; the JavaScript Kanban board. This tool is intended to easily visualize and manage &#8230;<\/p>\n","protected":false},"author":101013,"featured_media":9457,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[70],"tags":[33,64],"class_list":["post-9452","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\/9452","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=9452"}],"version-history":[{"count":10,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/9452\/revisions"}],"predecessor-version":[{"id":15605,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/9452\/revisions\/15605"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/9457"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=9452"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=9452"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=9452"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}