Let us get acquainted with the novelties in more detail.
Moving Rows and Columns via UI
Under the hood, the Kanban columns reordering is implemented via the new moveColumn() method. It takes two parameters:
- id for an ID of a column being moved,
- before for an ID of a column that will eventually come after the moved one.
id: string | number,
before: string | number
This method comes with the corresponding move-column event that is called when the column is moved.
id: string | number,
before : string | number
}) => void;
Setting Limits for Cards in Columns and Swimlanes (WIP)
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.
- limit – takes number and object 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,
- strictLimit – allows prohibiting users to add and drag cards to columns or swimlanes, where this action leads to exceeding the value specified in the limit parameter. It is enabled by setting the parameter’s value to true.
label: "In progress",
limit: 2, // a limit for the column
// limits for swimlanes
Collapsing and Expanding Columns
The new version of the DHTMLX Kanban Board delivers a useful capability to collapse and expand Kanban columns. 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.
Check the sample >
In the example above, this feature is indicated with an arrow on column labels.
The current state of any Kanban column is defined with the collapsed parameter. To make a specific column collapsed by default, you have to set this parameter to true in the corresponding data object of the columns config.
Built-in TypeScript Definitions
Previously, our Kanban component allowed simultaneously selecting several cards with tasks using the “CTRL (Command) + click” combination. But many of you probably will want to use a more common shortcut “Shift + click” for such operations. To avoid any confusion, we decided to add this popular option in v1.1.
This documentation page offers a deeper insight into updates provided in this release.
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.