DHTMLX Kanban 1.4 with New Themes, Comments, Votes, Linking Tasks, and More

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 features and improvements that will benefit both web developers and end-users.

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.

Download DHTMLX Kanban v1.4
Estimate the updated functionality for building modern task management apps
Get free trial

Let us delve deeper into the details of this release.

New Built-in Kanban Themes

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 – Willow and Willow-Dark. These new options will complement the default Material theme and help you with styling.

DHTMLX Kanban 1.4Willow Dark theme. Check the snippet >

There are 3 ways to apply a theme in our Kanban.

1) Use the theme property containing the following parameters:

  • name – defines the name of the theme that you want to use
  • fonts – specifies whether fonts from the CDN should be loaded or not (loaded by default)
theme: {
   name: "material"| "willow" | "willow-dark",
   fonts: true|false

The theme property was also added to the Toolbar configuration:

new Toolbar("#toolbar", {
   api: board.api,
   theme: "material", | "willow" | "willow-dark"

To apply the required theme to the Kanban container and Toolbar dynamically, use the setConfig() method.

2) Apply the needed theme by adding the corresponding css classes to the Kanban containers:

<!-- Kanban toolbar -->
<div id="toolbar" class="wx-willow-theme"></div>
<!-- Kanban container -->
<div id="root" class="wx-willow-theme"></div>

3) Include the theme on the page from the skins folder:

<link type="stylesheet" href="path/to/kanban/skins/willow-dark.css"/>
Comments in Kanban Cards

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.
Kanban 1.4 - commentsCheck the sample >
Comments aren’t displayed by default. To show the number of comments on each card, use the comments parameter of the cardShape property:

cardShape: {
    ... // other card settings
    users: {
        show: true,
            { id: 1, label: "Steve Smith", avatar: "../assets/user.jpg" },
            { id: 2, label: "Aaron Long" }
    comments: true,

Comments can be added, edited and removed via the Kanban editor. For this, the editor supports a a new field type – type: “comments”, so you can add it in the editorShape object:

const board = new Kanban("#root", {
    editorShape: [
            type: "comments",
            key: "comments",
            label: "Comments",
            config: {
                placement: "editor",
    currentUser: 1,

You should specify the ID of the current user in the currentUser property. The value of this property must correspond to one of the IDs set in the cardShape.users property. Otherwise, comments will be available only for reading.

The ID specified in the currentUser property is also necessary for the correct operation of addComment(), updateComment(), and deleteComment() methods, which are responsible for basic actions related to comments. These methods come with add-comment, update-comment, delete-comment events that are called when the corresponding action takes place.

Votes for Tasks

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.

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.
Kanban 1.4 - VotesCheck the sample >
To add voting to Kanban, you need to set the value of the votes parameter to true in the cardShape object:

cardShape: {
   ... // other card settings
    votes: true,

We also created a new demo demonstrating how to extend the backend to support the voting functionality.

Dependencies between Tasks

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.

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.

The editor now supports a field for links, thus you can add it to the editorShape property:

new kanban.Kanban("#root", {
   editorShape: [
           type: "links",
           key: "links",
           label: "Links",
       // settings of other fields

Links data are stored in the links property of Kanban API. It’s an array of objects, each with a set of required parameters:

  1. id – the ID of the link
  2. masterId – the ID of the card assigned to the dominant role in the link
  3. slaveId – the ID of the card assigned to the subordinate role in the link
  4. relation – the type of link that helps to define various dependencies between tasks such as:
  • “relatesTo” – marks tasks as related without specifying any dependency between them
  • “requiredFor” – makes one task dependable on the completion of the other one
  • “duplicate” – links duplicated tasks
  • “parent” – creates a parent (master) – child (slave) hierarchy

The links property is used in code like that:

links: [
       id: string | number,
       masterId: string | number,
       slaveId: string | number,
       relation: "relatesTo" | "requiredFor" | "duplicate" | "parent",

You can also load new data for links dynamically using the parse() method.

This feature is also complemented with two new events – add-link and delete-link. They are called when links in cards are added and deleted respectively.

Expanded Styling Capabilities

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.

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.

For instance, that’s how Kanban columns may look like after manipulations with the css parameter in the columns config:
Kanban 1.4 - customized columnsCheck the sample >

Moreover, the columns property also received the overlay 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:

column: {
    overlay: template(`
        <div class="blockOverlay disable-drop">
            <span class="disable-drop-header">Drop is not allowed</span>
            <span class="disable-drop-description">Only testers can move cards to this column</span>

Kanban 1.4 - overlay layer for a columnCheck the sample >

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 css parameter in the cardShape object:

cardShape: {
  // card settings
   css: (card) => card.type == "feature" ? "green" : "red",
   headerFields: [
       { // custom field
           key: "sprint",
           css: "custom_style",
           label: "Sprint"

Here css 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.
Kanban 1.4 - DatesCheck the sample >

The css parameter with the same functionality is now also available in columnShape and rowShape properties.

As a result, you can change the appearance of the main Kanban elements to your liking during the initialization or depending on some logic.

Context Menu in Custom Cards

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 cardTemplate 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.

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 data-menu-id=${cardFields.id} expression as shown in the example below.

function cardTemplate({ cardFields, selected, dragging, cardShape }){
       if (selected) {
            return `
                  <div className="custom-card" style={{padding: '20px'}}>
                    <div className="status-color" style={{background: '${cardFields.color}'}}></div>
                    <div data-menu-id=${cardFields.id} >
                              <i className="wxi-dots-v"></i>

Kanban 1.4 - default context menu in custom cardsCheck the sample >

Custom Date Format in Kanban Editor

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 format parameter for date and dateRange types in the editorShape config.

new Kanban("#root", {
    editorShape: [
            type: "dateRange"|"date",
            key: "start_date",
            label: "Start Date",

Kanban 1.4 - custom date formatCheck the sample >

Controlling Number of Assignees for Tasks

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.

In the example below, for instance, it is shown that you can select just one assignee via the drop-down list.
Kanban 1.4 - limit the number of assigness for one cardCheck the sample >
So, there are two possible options specified with the type parameter in the editorShape property:

  • “select” or “combo” type to allow adding just one user to a card
  • “multiselect” type to allow adding several users to a card
const editorShape = [ // editor settings
   ...kanban.defaultEditorShape, // include the default settings
   { // add custom fields
       type: "select"|"multiselect",
       key: "users"|"users",
       label: "User"|"Users",
       values: users|users

And do not forget that the users field must be enabled in the cardShape object for this to work (disabled by default). To do that, set the show parameter to true and add users data via the values parameter.

cardShape: {
   users: {
       show: true,
       values: [
           { id: 1, label: "John Smith", avatar: "../assets/user.jpg" },
           { id: 2, label: "Aaron Short" }
Other Improvements

This release also includes some minor, but still noteworthy improvements:
1. 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 start-drag-card, drag-card, and end-drag-card events.

2. The api.getState() method was updated. We deprecated the following parameters: dropAreaItemsCoords, dropAreasCoords, overAreaMeta.

3. Moreover, our development team prepared two live samples to give you a clear idea of how to manage several projects and load data dynamically when a column is expanding in Kanban.

Take time to visit this documentation page and review all the new features and improvements provided in this update.

All you need to know about the migration to v1.4 is provided in the “Migration to newer versions” section.

To get acquainted with the DHTMLX Kanban v1.4 on the practical level, download a free 30-day trial version. For our current clients, v1.4 is available in their Client’s Area.

Related Materials:

Advance your web development with DHTMLX

Gantt chart
Event calendar
Diagram library
30+ other JS components