We are glad to introduce the control that was requested most in our feedback portal for Essential JS 2: the Kanban board, which is a preview and is available in our 2020 Volume 1 release.
The Kanban board is useful for designing applications containing task-scheduling boards used for product or software development, project management, personal task management, and much more. It organizes tasks with transparent workflows and can be integrated in any team environment. The control comes with all the features necessary to design a board.
This blog post showcases the following key features of the Kanban board in JavaScript:
To get started with the Kanban board, refer to our documentation.
Create a data manager or JavaScript object array collection (JSON) to bind card data to the Kanban control. Now, you can bind data to cards from local and remote services through the data manager, which handles RESTful JSON data services.
Create a data structure, as shown in the following code example.
let kanbanData:Array<object> = [
{
Id: 'Demo meeting',
Summary: 'Presentation about new features of the control',
Status: 'Open'
},
{
Id: 'Requirement',
Summary: "Gather the requirements for adding a new feature",
Status: 'InProgress'
},
{
Id: 'Validation',
Summary: 'Validate the customer-reported issue',
Status: 'Close'
}
];
The following code renders the Kanban control with the local data source found in the previous code example.
import { Kanban } from '@syncfusion/ej2-kanban';
let kanbanData:Array<object> = [
{
Id: 'Demo meeting',
Summary: 'Presentation about new features of the control',
Status: 'Open'
},
{
Id: 'Requirement',
Summary: "Gather the requirements for adding a new feature",
Status: 'InProgress'
},
{
Id: 'Validation',
Summary: 'Validate the customer-reported issue',
Status: 'Close'
}
];
let kanbanObj: Kanban = new Kanban({
dataSource: kanbanData,
keyField: 'Status',
columns: [
{ headerText: 'Backlog', keyField: 'Open' },
{ headerText: 'In Progress', keyField: 'InProgress' },
{ headerText: 'Done', keyField: 'Close' }
],
cardSettings:{ contentField:"Summary", headerField:"Id" }
});
kanbanObj.appendTo('#Kanban');
The data manager can also be used to bind local data to the Kanban control. Declare the data manager as shown in the following code example.
import { Kanban } from '@syncfusion/ej2-kanban';
import { DataManager, Query } from '@syncfusion/ej2-data';
let kanbanData:Array<object> = [
{
Id: 'Demo meeting',
Summary: 'Presentation about new features of the control',
Status: 'Open'
},
{
Id: 'Requirement',
Summary: "Gather the requirements for adding a new feature",
Status: 'InProgress'
},
{
Id: 'Validation',
Summary: 'Validate the customer-reported issue',
Status: 'Close'
}
];
let result: Object[] = new DataManager(kanbanData).executeLocal(new Query());
let kanbanObj: Kanban = new Kanban({
dataSource: result,
keyField: 'Status',
columns: [
{ headerText: 'Backlog', keyField: 'Open' },
{ headerText: 'In Progress', keyField: 'InProgress' },
{ headerText: 'Done', keyField: 'Close' }
],
cardSettings:{ contentField:"Summary", headerField:"Id" }
});
kanbanObj.appendTo('#Kanban');
To bind data to the Kanban control using remote data sources, map the service URL to the data manager. The data manager supports various adaptors to bind data from different remote services. They are:
The following code example shows binding remote data using the data manager.
import { Kanban } from '@syncfusion/ej2-kanban';
import { DataManager } from '@syncfusion/ej2-data';
let dataManger: DataManager = new DataManager({
url: 'https://js.syncfusion.com/ejServices/wcf/Northwind.svc/Tasks',
crossDomain: true
});
let kanbanObj: Kanban = new Kanban({
dataSource: dataManger,
keyField: 'Status',
columns: [
{ headerText: 'To Do', keyField: 'Open' },
{ headerText: 'In Progress', keyField: 'InProgress' },
{ headerText: 'Testing', keyField: 'Testing' },
{ headerText: 'Done', keyField: 'Close' }
],
cardSettings:{ contentField:"Summary", headerField:"Id" }
});
kanbanObj.appendTo('#Kanban');
Cards play a major role in Kanban boards. Every card represents a task. Cards have header and content sections that are loaded from correspondingly mapped fields.
You can drag and drop a card to change its state. The card’s styles are derived from the Syncfusion CSS card control. Its layout can be customized using templates to help design it in line with the application.
The following code example shows the declaration of the card template.
<script id="cardTemplate" type="text/x-jsrender">
<div class='e-card-content'>
<table class="card-template-wrap">
<tbody>
<tr>
<td class="CardHeader">Type:</td>
<td>${Type}</td>
</tr>
<tr>
<td class="CardHeader">Priority:</td>
<td>${Priority}</td>
</tr>
<tr>
<td class="CardHeader">Summary:</td>
<td>${Summary}</td>
</tr>
</tbody>
</table>
</div>
</script>
The following code renders the Kanban control.
import { Kanban } from '@syncfusion/ej2-kanban';
import { DataManager, Query } from '@syncfusion/ej2-data';
let dataManger: DataManager = new DataManager({
url: 'https://js.syncfusion.com/ejServices/wcf/Northwind.svc/Tasks',
crossDomain: true
});
let kanbanObj: Kanban = new Kanban({
dataSource: dataManger,
keyField: 'Status',
columns: [
{ headerText: 'To Do', keyField: 'Open' },
{ headerText: 'In Progress', keyField: 'InProgress' },
{ headerText: 'Testing', keyField: 'Testing' },
{ headerText: 'Done', keyField: 'Close' }
],
cardSettings: {
headerField: 'Id',
template:"#cardTemplate"
}
});
kanbanObj.appendTo('#Kanban');
The Kanban control organizes each stage in a process as a column (e.g., backlogs, in-progress tasks, completed tasks). You can add any number of columns you want. Cards flow between the stages until they are moved to the completed stage.
The columns contain the following configurations:
The following code example shows the declaration of columns in the Kanban control.
let kanbanObj: Kanban = new Kanban({
…
columns: [
{ keyField: 'Open', headerText: 'To Do', template:"#headerTemplate", allowToggle:true, isExpanded: false, minCount: 1, maxCount: 5},
…
],
…
});
You can customize the column header with your own UI using HTML and CSS. The following code example illustrates this.
let kanbanObj: Kanban = new Kanban({
columns: [
{ template:"#headerTemplate", keyField: 'Open'},
{ template:"#headerTemplate", keyField: 'InProgress'},
{ template:"#headerTemplate", keyField: 'Testing'},
{ template:"#headerTemplate", keyField: 'Close' }
],
});
HTML
<script id="headerTemplate" type="text/x-jsrender">
<div class="header-template-wrap">
<div class="header-icon e-icons ${keyField}"></div>
<div class="header-text">${headerText}</div>
</div>
</script>
Stacked headers divide and organize subheadings in a table by logically grouping columns according to header. The following code example illustrates this.
let kanbanObj: Kanban = new Kanban({
…
stackedHeaders:[
{ text: 'Open', keyFields: 'Open', },
{ text: 'Doing', keyFields: 'InProgress, Review' },
{ text: 'Completed', keyFields: 'Close' }
],
…
});
Swimlane rows layout cards horizontally based on category and according to a specific key (e.g., engineer, priority, EPIC, etc.). The swimlane row displays the text of a corresponding key and the count of cards in the swimlane. To configure a swimlane, map the corresponding key and text fields in the swimlaneSettings property.
The header of the swimlane can be customized through a template. Users can drag and drop cards between swimlanes. If necessary, you can hide an empty swimlane row in the Kanban board. Cards in swimlane can be sorted in ascending or descending order.
The following code shows the declaration of the swimlane in the Kanban control.
let kanbanObj: Kanban = new Kanban({
swimlaneSettings: {
keyField: 'Assignee',
textField:'Assignee',
allowDragAndDrop: true,
showEmptyRow: true,
showItemCount: true,
sortBy: 'Ascending',
template: '#swimlaneTemplate'
},
});
Each swimlane row header can be customized with an image and text, as shown in the following code.
let kanbanObj: Kanban = new Kanban({
swimlaneSettings: {
keyField: 'Assignee',
template: '#swimlaneTemplate',
}
});
<script id="swimlaneTemplate" type="text/x-jsrender">
<div class='swimlane-template e-swimlane-template-table'>
<div class="e-swimlane-row-text"><img src="./src/kanban/images/${keyField}.png" alt=""/><span>${textField}</span></div>
</div>
</script>
The Kanban control has full-fledge support to manipulate cards (create, read, update, and delete) using a built-in dialog module, custom fields, or a dialog template
The built-in dialog editing module helps create, edit, and delete a card based on mapped fields.
The Kanban control provides an option to add custom fields with built-in dialog fields. The following code example shows the dialog setting for the fields.
let kanbanObj: Kanban = new Kanban({
dialogSettings: {
fields: [
{ key: 'Id', type: 'Input' },
{ key: 'Status', type: 'DropDown' },
{ key: 'Estimate', type: 'Numeric' },
{ key: 'Summary', type: 'TextArea' }
]
}
});
The Kanban control offers template support, with which you can create a custom editing window. The following code example illustrates this.
Let kanbanObj: Kanban = new Kanban({
dialogSettings: {
template: '#dialogTemplate'
},
});
Work-in-progress (WIP) validation limits the tasks allowed in each column in a Kanban board. For example, you can limit the “in-progress” column to only one task at a time. WIP validation provides the following benefits:
If validation fails, the columns are indicated with a “validation failed” state. The following code example shows differentiation when minimum and maximum validation fails by applying two different variations of appearance.
let kanbanObj: Kanban = new Kanban({
columns: [
{ headerText: 'To Do', keyField: 'Open', minCount: 1, maxCount: 5 },
{ headerText: 'In Progress', keyField: 'InProgress', minCount:1, maxCount:2 },
{ headerText: 'Testing', keyField: 'Testing' },
{ headerText: 'Done', keyField: 'Close' }
],
});
Toggling columns helps when displaying a large number of columns on a board. Using this feature, you can collapse a few columns by clicking an icon that prevents the user from scrolling the board. Also, you can collapse a column when a page loads. The following code example illustrates this.
let kanbanObj: Kanban = new Kanban({
columns: [
{ headerText: 'To Do', keyField: 'Open' },
{ headerText: 'In Progress', keyField: 'InProgress' },
{ headerText: 'Testing', keyField: 'Testing', allowToggle:true, isExpanded:false },
{ headerText: 'Done', keyField: 'Close' }
],
});
The Kanban control supports to two types of tooltips: a default tooltip, and a tooltip template.
The card tooltip can be enabled by using the property enableTooltip. When enabling this property, card information is shown in the tooltip by default.
let kanbanObj: Kanban = new Kanban({
…
enableTooltip:true,
…
});
A tooltip can be customized using a template. The following code example illustrates this.
let kanbanObj: Kanban = new Kanban({
…
enableTooltip:true,
tooltipTemplate:"#tooltipTemplate",
…
}); Customize the default appearance of the UI elements of the Kanban control by using HTML and CSS. The appearance of the following UI elements can be customized:
The following SASS-based built-in themes are available for the Kanban control:
You can check out the source of our JavaScript Kanban control on GitHub and NPM.
When creating our Kanban control for the 2020 Volume 1 release, we covered most of the common requirements and included a modular architecture. Currently, the control is available for JavaScript, Angular, React, Vue, ASP.NET MVC, ASP.NET Core, and Blazor.
We look forward to you trying out the Kanban control and providing your feedback. If you are new to Syncfusion, try our control’s features by downloading a free trial. You can also explore our online demo and our documentation.
If you have any questions or feedback, please let us know in the comments section. You can also contact us through our support forum or Direct-Trac.