| title | Getting started with Kanban component |
|---|---|
| description | Rendering a Kanban control |
| platform | Angular |
| control | kanban |
| documentation | ug |
| keywords | ejkanban, kanban, kanban widget, js kanban |
Before we start with the Kanban, please refer this page page for general information regarding integrating Syncfusion widget’s.
To render the Kanban control, the following list of external dependencies are needed,
- jQuery - 1.7.1 and later versions
- jsRender - to render the templates
- Angular - Angular latest versions
The other required internal dependencies are tabulated below,
| Files | Description/Usage |
|---|---|
| ej.core.min.js | It is referred always before using all the JS controls. |
| ej.data.min.js | Used to handle data operation and is used while binding data to the JS controls. |
| ej.touch.min.js | It is referred when using touch functionalities in Kanban. |
| ej.draggable.min.js | It is referred when using drag and drop in Kanban. |
| ej.kanban.min.js |
Kanban core script file which includes kanban related scripts files such as ej.kanban.base.js, ej.kanban.common.js,ej.kanban.dragAndDrop.js,ej.kanban.edit.js,ej.kanban.adaptive.js,ej.kanban.filter.js,ej.kanban.scroller.js,ej.kanban.selection.js,ej.kanban.swimlane.js and ej.kanban.context.js |
| ej.globalize.min.js | It is referred when using localization in Kanban. |
| ej.scroller.min.js | It is referred when scrolling is used in the Kanban. |
| ej.waitingpopup.min.js | It is referred when waiting popup used. |
| ej.dropdownlist.min.js | These files are used while enable the Editing feature in the Kanban. |
| ej.dialog.min.js | |
| ej.button.min.js | |
| ej.datepicker.min.js | |
| ej.datetimepicker.min.js | |
| ej.editor.min.js | |
| ej.toolbar.min.js | These files are used while enable the Filtering feature in the Kanban. |
| ej.menu.min.js | These files are used while enable the context menu feature in the Kanban. |
| ej.checkbox.min.js | |
| ej.rte.min.js | These files are used while using the cell edit type as RTE in the Kanban. |
N> Kanban uses one or more sub-controls, therefore refer the ej.web.all.min.js (which encapsulates all the ej controls and frameworks in a single file) in the application instead of referring all the above specified internal dependencies.
To get the real appearance of the Kanban, the dependent CSS file ej.web.all.min.css (which includes styles of all the widgets) should also needs to be referred.
Create an HTML page and add the scripts references in the order mentioned in the following code example.
{% highlight html %}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Essential Studio for JavaScript">
<meta name="author" content="Syncfusion">
<title></title>
<!-- Essential Studio for JavaScript theme reference -->
<link rel="stylesheet" href="http://cdn.syncfusion.com/{{ site.releaseversion }}/js/web/flat-azure/ej.web.all.min.css" />
<!-- Angular related script references -->
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- Essential Studio for JavaScript script references -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"> </script>
<script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
<script src="http://cdn.syncfusion.com/{{ site.releaseversion }}/js/web/ej.web.all.min.js"> </script>
<script src="http://cdn.syncfusion.com/{{ site.releaseversion }}/js/common/ej.angular2.min.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
{% endhighlight %}
N> Uncompressed version of library files are also available which is used for development or debugging purpose and can be generated from the custom script here.
Create a Div element within the body section of the HTML document, where the Kanban needs to be rendered.
{% highlight html %}
<ej-kanban [dataSource]="kanbanData">
{% endhighlight %}
The below code is to retrieve data from service and assigned to Kanban datasource.
{% highlight js %}
import {Component} from '@angular/core'; import {NorthwindService} from '../../services/northwind.service';
@Component({
selector: 'ej-app',
templateUrl: 'app/components/kanban/kanban.component.html'
})
export class KanbanComponent {
constructor(private northwindService:NorthwindService)
{
this.kanbanData = northwindService.getTasks();
}
}
{% endhighlight %}
In order to display cards in Kanban control, you need to map the database fields to Kanban cards and columns. The required mapping field are listed as follows
- 'keyField' - Map the column name to use as 'key' values to columns.
- 'columns' - Map the corresponding 'key' values of 'keyField' column to each columns.
- 'fields.content' - Map the column name to use as content to cards.
- 'fields.primaryKey' - Map the column name to use as primary Key.
{% highlight html %}
<ej-kanban [dataSource]="kanbanData" keyField="Status" fields.content="Summary" fields.primaryKey="Id">
{% endhighlight %}
The below code is to retrieve data from service and assigned to Kanban datasource.
{% highlight js %}
import {Component} from '@angular/core'; import {NorthwindService} from '../../services/northwind.service';
@Component({
selector: 'ej-app',
templateUrl: 'app/components/kanban/kanban.component.html'
})
export class KanbanComponent {
constructor(private northwindService:NorthwindService)
{
this.kanbanData = northwindService.getTasks();
}
}
{% endhighlight %}
'Swimlane' can be enabled by mapping the 'fields.swimlaneKey' to appropriate column name in 'dataSource'. This enables the grouping of the cards based on the mapped column values.
{% highlight html %}
<ej-kanban [dataSource]="kanbanData" keyField="Status" fields.content="Summary" fields.primaryKey="Id" fields.swimlaneKey="Assignee">
{% endhighlight %}
The below code is to retrieve data from service and assigned to Kanban datasource.
{% highlight js %}
import {Component} from '@angular/core'; import {NorthwindService} from '../../services/northwind.service';
@Component({
selector: 'ej-app',
templateUrl: 'app/components/kanban/kanban.component.html'
})
export class KanbanComponent {
constructor(private northwindService:NorthwindService)
{
this.kanbanData = northwindService.getTasks();
}
}
{% endhighlight %}
Filters allows to filter the collection of cards from 'dataSource' which meets the predefined 'query' in the filters collection. To enable filtering, define 'filterSettings' collection with display 'text' and 'ej.Query'.
{% highlight html %}
<ej-kanban [dataSource]="kanbanData" keyField="Status" fields.content="Summary" fields.primaryKey="Id" fields.swimlaneKey="Assignee">
{% endhighlight %}
The below code is to retrieve data from service and assigned to Kanban datasource.
{% highlight js %}
import {Component} from '@angular/core'; import {NorthwindService} from '../../services/northwind.service';
@Component({
selector: 'ej-app',
templateUrl: 'app/components/kanban/kanban.component.html'
})
export class KanbanComponent {
constructor(private northwindService:NorthwindService)
{
this.kanbanData = northwindService.getTasks();
query1 = new ej.Query().where('Assignee', 'equal', 'Janet Leverling');
query2 = new ej.Query().where('Status', 'equal', 'InProgress');
}
}
{% endhighlight %}
