Getting started in EJ2 TypeScript Kanban control
3 Nov 202314 minutes to read
This section briefly explains how to create Kanban component and configure its available functionalities in TypeScript using the Essential JS 2 quickstart seed repository.
This application is integrated with the
webpack.config.js
configuration and uses the latest version of the webpack-cli. It requires nodev14.15.0
or higher. For more information about webpack and its features, refer to the webpack documentation.
Dependencies
The following list of dependencies are required to use the Kanban component in your application:
|-- @syncfusion/ej2-kanban
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-buttons
|-- @syncfusion/ej2-data
|-- @syncfusion/ej2-dropdowns
|-- @syncfusion/ej2-icons
|-- @syncfusion/ej2-inputs
|-- @syncfusion/ej2-layouts
|-- @syncfusion/ej2-lists
|-- @syncfusion/ej2-navigations
|-- @syncfusion/ej2-popups
|-- @syncfusion/ej2-splitbuttons
Set up development environment
Open the command prompt from the required directory, and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from GitHub.
git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart
After cloning the application in the ej2-quickstart
folder, run the following command line to navigate to the ej2-quickstart
folder.
cd ej2-quickstart
Add Syncfusion JavaScript packages
Syncfusion JavaScript (Essential JS 2) packages are available on the npmjs.com public registry. You can install all Syncfusion JavaScript (Essential JS 2) controls in a single @syncfusion/ej2 package or individual packages for each control.
The quickstart application is preconfigured with the dependent @syncfusion/ej2 package in the ~/package.json
file. Use the following command to install the dependent npm packages from the command prompt.
npm install
Import the Syncfusion CSS styles
Kanban CSS files are available in the ej2-kanban and its sub-component package folder. This can be referenced in your application using the following code.
The quickstart application is preconfigured to use the Material
theme in the ~/src/styles/styles.css
file, as shown below:
@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-layouts/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-kanban/styles/material.css';
In case, if you want to make use of the combined CSS files of entire components, then you can avail it from the root folder of Essential JS 2 package and reference it with the following code.
@import '../../node_modules/@syncfusion/ej2/material.css';
You can check out the themes section to know more about built-in themes and CSS reference for individual controls.
Initialize the Kanban
Add the HTML div tag defined with an id
attribute to your index.html
file, where the Kanban element is initialized.
[src/index.html]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kanban Typescript Component</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link rel="shortcut icon" href="resources/favicon.ico" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<!--Element where the Kanban will be rendered-->
<div id="Kanban"></div>
</body>
</html>
Import the Kanban component to your app.ts
file as follows and initialize it to the element defined with an id Kanban
in the index.html
file.
[src/app/app.ts]
import { Kanban } from '@syncfusion/ej2-kanban';
let kanbanObj: Kanban = new Kanban({
columns: [
{ headerText: 'Backlog', keyField: 'Open' },
{ headerText: 'In Progress', keyField: 'InProgress' },
{ headerText: 'Testing', keyField: 'Testing' },
{ headerText: 'Done', keyField: 'Close' }
]
});
kanbanObj.appendTo('#Kanban');
Now, run the application in the browser using the following command.
npm start
The output will display the empty Kanban.
import { Kanban } from '@syncfusion/ej2-kanban';
let kanbanObj: Kanban = new Kanban({
columns: [
{ headerText: 'Backlog', keyField: 'Open' },
{ headerText: 'In Progress', keyField: 'InProgress' },
{ headerText: 'Testing', keyField: 'Testing' },
{ headerText: 'Done', keyField: 'Close' }
],
});
kanbanObj.appendTo('#Kanban');
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kanban Columns Header</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Kanban Columns Header" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-kanban/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div class="content-wrapper">
<div id="Kanban"></div>
</div>
</div>
</body>
</html>
Populating cards
To populate the empty Kanban with cards, define the local JSON data or remote data using the dataSource
property. To define dataSource
, the mandatory fields in JSON object should be relevant to keyField
. In the following example, you can see the cards defined with default fields such as ID, Summary, and Status.
import { Kanban } from '@syncfusion/ej2-kanban';
import { kanbanData } from './datasource.ts';
let kanbanObj: Kanban = new Kanban({
dataSource: kanbanData,
keyField: 'Status',
columns: [
{ headerText: 'Backlog', keyField: 'Open' },
{ headerText: 'In Progress', keyField: 'InProgress' },
{ headerText: 'Testing', keyField: 'Testing' },
{ headerText: 'Done', keyField: 'Close' }
],
cardSettings: {
contentField: 'Summary',
headerField: 'Id',
}
});
kanbanObj.appendTo('#Kanban');
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kanban Cards</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Kanban Cards" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-kanban/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div class="content-wrapper">
<div id="Kanban"></div>
</div>
</div>
</body>
</html>
Enable swimlane
Swimlane
can be enabled by mapping the fields swimlaneSettings.keyField
to appropriate column name in dataSource. This enables the grouping of the cards based on the mapped column values.
import { Kanban } from '@syncfusion/ej2-kanban';
import { kanbanData } from './datasource.ts';
let kanbanObj: Kanban = new Kanban({
dataSource: kanbanData,
keyField: 'Status',
columns: [
{ headerText: 'Backlog', keyField: 'Open' },
{ headerText: 'In Progress', keyField: 'InProgress' },
{ headerText: 'Testing', keyField: 'Testing' },
{ headerText: 'Done', keyField: 'Close' }
],
cardSettings: {
contentField: 'Summary',
headerField: 'Id',
},
swimlaneSettings: {
keyField: 'Assignee'
}
});
kanbanObj.appendTo('#Kanban');
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kanban with Swimlane Rows</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Kanban swimlane rows" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-kanban/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div class="content-wrapper">
<div id="Kanban"></div>
</div>
</div>
</body>
</html>