The whole DHTMLX team is happy to announce the first release of our brand-new component – the JavaScript Kanban board. 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.
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’ll know about Kanban configuration and customization abilities.
Handy Task Management
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.
A task card can be edited using the Editor panel 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:
- modify a task label,
- set a priority,
- specify start and end dates,
- track progress,
- add attachments,
- assign employees responsible for task completion.
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.
Searching
The DHTMLX Kanban board includes a toolbar panel 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.
Ease of Configuration and Customization
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 Kanban API.
The cardShape configuration property allows you to configure the card appearance and define the card elements to be displayed:
label: true,
description: true,
progress: true,
start_date: true,
end_date: true,
menu: true,
attached: true,
priority: {
show: true,
values: cardPriority
},
users: {
show: true,
values: users
},
headerFields: [
{
key: "sprint",
type: "text",
label: "Custom field"
}
]
};
Moreover, you may apply a custom template to the Kanban cards. To that end, you have to specify the cardTemplate configuration property and define the styles and logic according to your project requirements.
The editorShape property allows configuring the editor controls for managing the card data:
{
// available types:
// text, textarea, date, select, combo, multiselect, files, color, progress
type: string, // an editor field type
key: string, // an editor field key
label?: string, // an editor field label
placeholder?: string, // an editor field placeholder
options?: [ // an array of the dropdown options
{ id: any, label: string },
{...}
],
config?: { // an editor uploader config
accept?: string,
disabled?: boolean,
multiple?: boolean,
folder?: boolean
},
// an editor uploader URL (this parameter is mandatory for the "files" type)
uploadURL?: string
},
{...}
]
You can initialize the Toolbar via the kanban.Toolbar constructor and modify its default structure and functionality. For example, you are free to hide any of built-in controls or add custom ones:
You can learn more about how to add and configure the Toolbar in the documentation.
Syncing with DHTMLX Gantt and Scheduler
One of the greatest news for our customers is the ability to synchronize DHTMLX Kanban with our Gantt chart and Scheduler event calendar. Thereby, you can develop a comprehensive tool for project and tasks management with data synchronized between these three JavaScript libraries.
Other Features
DHTMLX Kanban allows you to localize labels in the UI. 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.
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 work with a server as well as see an example of DHTMLX Kanban connected to the Go backend.
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.
You can review all DHTMLX Kanban v1.0 updates by checking the “What’s new” article in the documentation.
Feel free to test our brand-new library by downloading a free 30-day trial version.
If you have questions or ideas on improving DHTMLX Kanban, let’s discuss them in the comment section below.