Getting Started

18 Nov 201713 minutes to read

Before we start with the Kanban, please refer this page page for general information regarding integrating Syncfusion widget’s.

Adding JavaScript and CSS references

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.

NOTE

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.

Preparing HTML document

Create an HTML page and add the scripts references in the order mentioned in the following code example.

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/24.2.3/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/24.2.3/js/web/ej.web.all.min.js"> </script> 
    <script src="http://cdn.syncfusion.com/24.2.3/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>

NOTE

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.

Control Initialization

Create a Div element within the body section of the HTML document, where the Kanban needs to be rendered.

HTML

<ej-kanban [dataSource]="kanbanData">
   <e-kanban-columns>
        <e-kanban-column headerText="Backlog"></e-kanban-column>
        <e-kanban-column headerText="In Progress"></e-kanban-column>
        <e-kanban-column headerText="Done"></e-kanban-column>
   </e-kanban-columns>
</ej-kanban>

The below code is to retrieve data from service and assigned to Kanban datasource.

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();  
    }
}

Mapping Values

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.

HTML

<ej-kanban [dataSource]="kanbanData" keyField="Status" fields.content="Summary" fields.primaryKey="Id">
    <e-kanban-columns>
        <e-kanban-column key="Open" headerText="Backlog"></e-kanban-column>
        <e-kanban-column key="InProgress" headerText="In Progress"></e-kanban-column>
        <e-kanban-column key="Close" headerText="Done"></e-kanban-column>
    </e-kanban-columns>
</ej-kanban>

The below code is to retrieve data from service and assigned to Kanban datasource.

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();  
    }
}

Enable Swimlane

‘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.

HTML

<ej-kanban [dataSource]="kanbanData" keyField="Status" fields.content="Summary" fields.primaryKey="Id" fields.swimlaneKey="Assignee">
    <e-kanban-columns>
        <e-kanban-column key="Open" headerText="Backlog"></e-kanban-column>
        <e-kanban-column key="InProgress" headerText="In Progress"></e-kanban-column>
        <e-kanban-column key="Close" headerText="Done"></e-kanban-column>
    </e-kanban-columns>
</ej-kanban>

The below code is to retrieve data from service and assigned to Kanban datasource.

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();  
    }
}

Adding Filters

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’.

HTML

<ej-kanban [dataSource]="kanbanData" keyField="Status" fields.content="Summary" fields.primaryKey="Id" fields.swimlaneKey="Assignee">
    <e-kanban-columns>
        <e-kanban-column key="Open" headerText="Backlog"></e-kanban-column>
        <e-kanban-column key="InProgress" headerText="In Progress"></e-kanban-column>
        <e-kanban-column key="Close" headerText="Done"></e-kanban-column>
    </e-kanban-columns>
      <e-filterSettings>
        <e-filterSetting text="Janet Issues" query= "query1" description="Displays issues which matches the assignee as 'Janet Leverling'"></e-filterSetting>
        <e-filterSetting e-text="InProgress Issues" e-query="query2" e-description="Display the issues of 'In Progress'"></e-filterSetting>
        </e-filterSettings>
</ej-kanban>

The below code is to retrieve data from service and assigned to Kanban datasource.

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');
    }
}