{"id":9944,"date":"2022-02-15T13:13:38","date_gmt":"2022-02-15T10:13:38","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=9944"},"modified":"2023-05-02T13:58:38","modified_gmt":"2023-05-02T10:58:38","slug":"dhtmlx-kanban-1-1-wip-validation-new-operations-columns-rows-typescript-support","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-kanban-1-1-wip-validation-new-operations-columns-rows-typescript-support\/","title":{"rendered":"DHTMLX Kanban 1.1: WIP Validation, New Operations on Columns and Rows, TypeScript Support, and More."},"content":{"rendered":"<p>It has been a few months since the release of the brand-new DHTMLX <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxKanban\/\" rel=\"noopener\" target=\"_blank\">JavaScript Kanban Board<\/a> but we are already seeing keen interest in our new product from the development community. We received feedback from teams who tested it in their scenarios. It helped us to prepare the list of the most wanted features and improvements and get down to work with no delay. So, meet DHTMLX Kanban 1.1!<\/p>\n<p>This minor release comes with a pack of useful features for improving the workflow visualization experience with DHTMLX. In v1.1, it became possible to change the position of any column and row from the UI, specify the limit number of cards for columns and swimlanes, and expand and collapse columns.  Moreover, our development team provided full support for TypeScript definitions that help to speed up the implementation of a JavaScript Kanban in a web project.<\/p>\n<p><strong><a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxKanban\/download.shtml\" rel=\"noopener\" target=\"_blank\">Download a new version of DHTMLX Kanban Board ><\/a><\/strong><\/p>\n<p>Let us get acquainted with the novelties in more detail.<\/p>\n<h5>Moving Rows and Columns via UI<\/h5>\n<p>When building a JavaScript Kanban board, you can hardly predict the scale and complexity level of projects that will be tracked by end-users with this tool. Therefore, in addition to hard coding, it is nice to have an opportunity to change the Kanban structure right from the UI. Starting from v1.1, end-users can <a href=\"https:\/\/docs.dhtmlx.com\/kanban\/#board\" rel=\"noopener\" target=\"_blank\">move rows and columns in the needed direction<\/a> using the corresponding context menu (3 dots icon).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2022\/02\/image2.gif\" alt=\"DHTMLX Kanban - moving columns and  rows via UI\" width=\"996\" height=\"708\" class=\"aligncenter size-full wp-image-9948\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/5hcx01h4\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p>Under the hood, the Kanban columns reordering is implemented via the new <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/methods\/js_kanban_movecolumn_method\/\" rel=\"noopener\" target=\"_blank\">moveColumn()<\/a><\/strong> method. It takes two parameters:<\/p>\n<ul>\n<li><strong>id<\/strong> for an ID of a column being moved,<\/li>\n<li><strong>before<\/strong> for an ID of a column that will eventually come after the moved one.<\/li>\n<\/ul>\n<div class=\"codecolorer-container javascript default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">moveColumn<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; id<span class=\"sy0\">:<\/span> string <span class=\"sy0\">|<\/span> number<span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; before<span class=\"sy0\">:<\/span> string <span class=\"sy0\">|<\/span> number<br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">:<\/span> <span class=\"kw1\">void<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>This method comes with the corresponding <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/events\/js_kanban_movecolumn_event\/\">move-column<\/a><\/strong> event that is called when the column is moved.<\/p>\n<div class=\"codecolorer-container javascript default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"st0\">&quot;move-column&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; id<span class=\"sy0\">:<\/span> string <span class=\"sy0\">|<\/span> number<span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; before <span class=\"sy0\">:<\/span> string <span class=\"sy0\">|<\/span> number<br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"kw1\">void<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>Reordering of rows is performed in the same way using the newly added <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/methods\/js_kanban_moverow_method\/\" rel=\"noopener\" target=\"_blank\">moveRow<\/a><\/strong> method and <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/events\/js_kanban_moverow_event\/\" rel=\"noopener\" target=\"_blank\">move-row<\/a><\/strong> event.<\/p>\n<h5>Setting Limits for Cards in Columns and Swimlanes (WIP)<\/h5>\n<p>With a Kanban board, project managers can achieve more coherence and transparency in handling various business processes. But still, everything can turn into a mess when too many tasks pile up at any active stage of the project. That is why we introduced the WIP (work-in-progress) validation. In other words, it is possible to set the number of cards allowed for each column and swimlane (row) of the Kanban board. It will help teams to define an optimal pace of work and focus on tasks with a higher priority.<\/p>\n<p>From now on, this kind of functionality is also available in our JavaScript component. To apply limits for cards in your Kanban board built with DHTMLX, you will need to set the following new parameters in the <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/config\/js_kanban_columns_config\/\" rel=\"noopener\" target=\"_blank\">columns<\/a><\/strong> array:<\/p>\n<ul>\n<li>limit &#8211; takes <strong>number<\/strong> and <strong>object<\/strong> types of  values for setting the maximum number of cards in a column or in a swimlane (row) by its ID in a column respectively,<\/li>\n<li>strictLimit &#8211; allows prohibiting users to add and drag cards to columns or swimlanes, where this action leads to exceeding the value specified in the <strong>limit<\/strong> parameter.  It is enabled by setting the parameter\u2019s value to <em>true<\/em>.<\/li>\n<\/ul>\n<div class=\"codecolorer-container javascript default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> columns <span class=\"sy0\">=<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; label<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Backlog&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;backlog&quot;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; label<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;In progress&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;inprogress&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; limit<span class=\"sy0\">:<\/span> <span class=\"nu0\">2<\/span><span class=\"sy0\">,<\/span> <span class=\"co1\">\/\/ a limit for the column<\/span><br \/>\n&nbsp; &nbsp; strictLimit<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; label<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Testing&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;testing&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; limit<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; <span class=\"co1\">\/\/ limits for swimlanes<\/span><br \/>\n&nbsp; &nbsp; &nbsp; feature<span class=\"sy0\">:<\/span> <span class=\"nu0\">2<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; task<span class=\"sy0\">:<\/span> <span class=\"nu0\">2<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; label<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Done&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;done&quot;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#93;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p><iframe loading=\"lazy\" src=\"https:\/\/snippet.dhtmlx.com\/2blo6hx8?mode=result\" frameborder=\"0\" width=\"100%\" height=\"840\"><\/iframe><\/p>\n<h5>Collapsing and Expanding Columns<\/h5>\n<p>The new version of the DHTMLX Kanban Board delivers a useful capability to <a href=\"https:\/\/docs.dhtmlx.com\/kanban\/#board\" rel=\"noopener\" target=\"_blank\">collapse and expand Kanban columns<\/a>. It facilitates the effective analysis of a specific piece of project data. End-users can hide any column that is not needed at the given time and turn their full attention to more important aspects of the project.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2022\/02\/image3-1.gif\" alt=\"DHTMLX Kanban v1.1 - collapsing \/expanding columns\" width=\"940\" height=\"652\" class=\"aligncenter size-full wp-image-9949\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/5hcx01h4\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p>In the example above, this feature is indicated with an arrow on column labels. <\/p>\n<p>The current state of any Kanban column is defined with the <strong>collapsed<\/strong> parameter. To make a specific column collapsed by default, you have to set this parameter to <em>true<\/em> in the corresponding data object of the <strong><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/api\/config\/js_kanban_columns_config\/\" rel=\"noopener\" target=\"_blank\">columns<\/a><\/strong> config. <\/p>\n<h5>Built-in TypeScript Definitions<\/h5>\n<p>For many programmers, TypeScript has become a must for convenient and productive coding. At DHTMLX, we always try to make our products as developer-friendly as possible. Thus, our Kanban library now offers support for <a href=\"https:\/\/docs.dhtmlx.com\/kanban\/guides\/typescript_support\/\" rel=\"noopener\" target=\"_blank\">TypeScript definitions<\/a> out of the box. Taking advantage of type suggestions, type checking, and autocompletion, web developers will be able to boost the implementation process of a JavaScript Kanban board in their web apps.<\/p>\n<h5>Other Improvements<\/h5>\n<p>Previously,  our Kanban component allowed simultaneously selecting several cards with tasks using the &#8220;CTRL (Command) + click&#8221; combination. But many of you probably will want to use a more common shortcut &#8220;<a href=\"https:\/\/docs.dhtmlx.com\/kanban\/#board\" rel=\"noopener\" target=\"_blank\">Shift + click<\/a>&#8221; for such operations. To avoid any confusion, we decided to add this popular option in v1.1.<\/p>\n<p>This <a href=\"https:\/\/docs.dhtmlx.com\/kanban\/news\/whats_new\/#version-11\" rel=\"noopener\" target=\"_blank\">documentation page<\/a> offers a deeper insight into updates provided in this release. <\/p>\n<p>Take a chance to test all new features for free by downloading a <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxKanban\/download.shtml\" rel=\"noopener\" target=\"_blank\">30-day trial version<\/a> of the DHTMLX Kanban Board v1.1. Our current clients can get access to a new version via their <a href=\"https:\/\/dhtmlx.com\/clients\/\" rel=\"noopener\" target=\"_blank\">Client\u2019s Area<\/a>.<\/p>\n<p>Your feedback is an important source of ideas for making DHTMLX products better, therefore we encourage you to continue sharing your thoughts on our releases. <\/p>\n<h5>Related Materials:<\/h5>\n<ul>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/kanban\/news\/whats_new\/#version-11\">What\u2019s new in v1.1<\/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\/2blo6hx8?mode=wide&#038;text=#kanban\" rel=\"noopener\" target=\"_blank\">DHTMLX Kanban Code Snippets<\/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>It has been a few months since the release of the brand-new DHTMLX JavaScript Kanban Board but we are already seeing keen interest in our new product from the &#8230;<\/p>\n","protected":false},"author":101014,"featured_media":9964,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[70],"tags":[33,64,41],"class_list":["post-9944","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-releases","tag-all-posts","tag-kanban","tag-typescript"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/9944","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=9944"}],"version-history":[{"count":13,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/9944\/revisions"}],"predecessor-version":[{"id":9963,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/9944\/revisions\/9963"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/9964"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=9944"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=9944"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=9944"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}