Swimlanes are horizontal categorizations of cards on the Kanban board. It is used for grouping of cards, which brings transparency to the workflow process.
Cards can be grouped based on keyField and displayed in rows, which are separated by columns. It is mandatory to define the keyField that is mapped from the datasource for rendering swimlane rows in the Kanban board.
import { Component } from '@angular/core';
import { CardSettingsModel, SwimlaneSettingsModel } from '@syncfusion/ej2-angular-kanban';
import { kanbanData } from './datasource';
@Component({
selector: 'app-root',
template: `<ejs-kanban keyField='Status' [dataSource]='data' [cardSettings]='cardSettings' [swimlaneSettings]='swimlaneSettings'>
<e-columns>
<e-column headerText='To do' keyField='Open'></e-column>
<e-column headerText='In Progress' keyField='InProgress'></e-column>
<e-column headerText='Testing' keyField='Testing'></e-column>
<e-column headerText='Done' keyField='Close'></e-column>
</e-columns>
</ejs-kanban>`
})
export class AppComponent {
public data: Object[] = kanbanData;
public cardSettings: CardSettingsModel = {
contentField: 'Summary',
headerField: 'Id'
};
public swimlaneSettings: SwimlaneSettingsModel = { keyField: 'Assignee' };
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { KanbanModule } from '@syncfusion/ej2-angular-kanban';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
KanbanModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }export let kanbanData: Object[] = [
{
Id: 1,
Status: 'Open',
Summary: 'Analyze the new requirements gathered from the customer.',
Type: 'Story',
Priority: 'Low',
Tags: 'Analyze,Customer',
Estimate: 3.5,
Assignee: 'Nancy Davloio',
RankId: 1
},
{
Id: 2,
Status: 'InProgress',
Summary: 'Improve application performance',
Type: 'Improvement',
Priority: 'Normal',
Tags: 'Improvement',
Estimate: 6,
Assignee: 'Andrew Fuller',
RankId: 1
},
{
Id: 3,
Status: 'Open',
Summary: 'Arrange a web meeting with the customer to get new requirements.',
Type: 'Others',
Priority: 'Critical',
Tags: 'Meeting',
Estimate: 5.5,
Assignee: 'Janet Leverling',
RankId: 2
},
{
Id: 4,
Status: 'InProgress',
Summary: 'Fix the issues reported in the IE browser.',
Type: 'Bug',
Priority: 'Release Breaker',
Tags: 'IE',
Estimate: 2.5,
Assignee: 'Janet Leverling',
RankId: 2
},
{
Id: 5,
Status: 'Testing',
Summary: 'Fix the issues reported by the customer.',
Type: 'Bug',
Priority: 'Low',
Tags: 'Customer',
Estimate: '3.5',
Assignee: 'Steven walker',
RankId: 1
},
{
Id: 6,
Status: 'Close',
Summary: 'Arrange a web meeting with the customer to get the login page requirements.',
Type: 'Others',
Priority: 'Low',
Tags: 'Meeting',
Estimate: 2,
Assignee: 'Michael Suyama',
RankId: 1
},
{
Id: 7,
Status: 'Validate',
Summary: 'Validate new requirements',
Type: 'Improvement',
Priority: 'Low',
Tags: 'Validation',
Estimate: 1.5,
Assignee: 'Robert King',
RankId: 1
},
{
Id: 8,
Status: 'Close',
Summary: 'Login page validation',
Type: 'Story',
Priority: 'Release Breaker',
Tags: 'Validation,Fix',
Estimate: 2.5,
Assignee: 'Laura Callahan',
RankId: 2
},
{
Id: 9,
Status: 'Testing',
Summary: 'Fix the issues reported in Safari browser.',
Type: 'Bug',
Priority: 'Release Breaker',
Tags: 'Fix,Safari',
Estimate: 1.5,
Assignee: 'Nancy Davloio',
RankId: 2
},
{
Id: 10,
Status: 'Close',
Summary: 'Test the application in the IE browser.',
Type: 'Story',
Priority: 'Low',
Tags: 'Testing,IE',
Estimate: 5.5,
Assignee: 'Margaret hamilt',
RankId: 3
},
{
Id: 11,
Status: 'Validate',
Summary: 'Validate the issues reported by the customer.',
Type: 'Story',
Priority: 'High',
Tags: 'Validation,Fix',
Estimate: 1,
Assignee: 'Steven walker',
RankId: 1
},
{
Id: 12,
Status: 'Testing',
Summary: 'Check Login page validation.',
Type: 'Story',
Priority: 'Release Breaker',
Tags: 'Testing',
Estimate: 0.5,
Assignee: 'Michael Suyama',
RankId: 3
},
{
Id: 13,
Status: 'Open',
Summary: 'API improvements.',
Type: 'Improvement',
Priority: 'High',
Tags: 'Grid,API',
Estimate: 3.5,
Assignee: 'Robert King',
RankId: 3
},
{
Id: 14,
Status: 'InProgress',
Summary: 'Add responsive support to application',
Type: 'Epic',
Priority: 'Critical',
Tags: 'Responsive',
Estimate: 6,
Assignee: 'Laura Callahan',
RankId: 3
},
{
Id: 15,
Status: 'Open',
Summary: 'Show the retrieved data from the server in grid control.',
Type: 'Story',
Priority: 'High',
Tags: 'Database,SQL',
Estimate: 5.5,
Assignee: 'Margaret hamilt',
RankId: 4
},
{
Id: 16,
Status: 'InProgress',
Summary: 'Fix cannot open user’s default database SQL error.',
Priority: 'Critical',
Type: 'Bug',
Tags: 'Database,Sql2008',
Estimate: 2.5,
Assignee: 'Janet Leverling',
RankId: 4
},
{
Id: 17,
Status: 'Testing',
Summary: 'Fix the issues reported in data binding.',
Type: 'Story',
Priority: 'Normal',
Tags: 'Databinding',
Estimate: '3.5',
Assignee: 'Janet Leverling',
RankId: 4
},
{
Id: 18,
Status: 'Close',
Summary: 'Analyze SQL server 2008 connection.',
Type: 'Story',
Priority: 'Release Breaker',
Tags: 'Grid,Sql',
Estimate: 2,
Assignee: 'Andrew Fuller',
RankId: 4
},
{
Id: 19,
Status: 'Validate',
Summary: 'Validate databinding issues.',
Type: 'Story',
Priority: 'Low',
Tags: 'Validation',
Estimate: 1.5,
Assignee: 'Margaret hamilt',
RankId: 1
},
{
Id: 20,
Status: 'Close',
Summary: 'Analyze grid control.',
Type: 'Story',
Priority: 'High',
Tags: 'Analyze',
Estimate: 2.5,
Assignee: 'Margaret hamilt',
RankId: 5
},
{
Id: 21,
Status: 'Close',
Summary: 'Stored procedure for initial data binding of the grid.',
Type: 'Others',
Priority: 'Release Breaker',
Tags: 'Databinding',
Estimate: 1.5,
Assignee: 'Steven walker',
RankId: 6
},
{
Id: 22,
Status: 'Close',
Summary: 'Analyze stored procedures.',
Type: 'Story',
Priority: 'Release Breaker',
Tags: 'Procedures',
Estimate: 5.5,
Assignee: 'Janet Leverling',
RankId: 7
},
{
Id: 23,
Status: 'Validate',
Summary: 'Validate editing issues.',
Type: 'Story',
Priority: 'Critical',
Tags: 'Editing',
Estimate: 1,
Assignee: 'Nancy Davloio',
RankId: 1
},
{
Id: 24,
Status: 'Testing',
Summary: 'Test editing functionality.',
Type: 'Story',
Priority: 'Normal',
Tags: 'Editing,Test',
Estimate: 0.5,
Assignee: 'Nancy Davloio',
RankId: 5
},
{
Id: 25,
Status: 'Open',
Summary: 'Enhance editing functionality.',
Type: 'Improvement',
Priority: 'Low',
Tags: 'Editing',
Estimate: 3.5,
Assignee: 'Andrew Fuller',
RankId: 5
}
];import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);Customize the swimlane row header text by using the textField property mapped from datasource.
It is not mandatory to define the
textFieldtoswimlaneSettings. It will automatically consider thekeyFieldto swimlane row header text. If the mappingtextFieldkey is not present in the datasource, it will consider the swimlanekeyFieldas swimlane row header text.
import { Component } from '@angular/core';
import { CardSettingsModel, SwimlaneSettingsModel } from '@syncfusion/ej2-angular-kanban';
import { kanbanData } from './datasource';
@Component({
selector: 'app-root',
template: `<ejs-kanban keyField='Status' [dataSource]='data' [cardSettings]='cardSettings' [swimlaneSettings]='swimlaneSettings'>
<e-columns>
<e-column headerText='To do' keyField='Open'></e-column>
<e-column headerText='In Progress' keyField='InProgress'></e-column>
<e-column headerText='Testing' keyField='Testing'></e-column>
<e-column headerText='Done' keyField='Close'></e-column>
</e-columns>
</ejs-kanban>`
})
export class AppComponent {
public data: Object[] = kanbanData;
public cardSettings: CardSettingsModel = {
contentField: 'Summary',
headerField: 'Id'
};
public swimlaneSettings: SwimlaneSettingsModel = {
keyField: 'Assignee',
textField: 'AssigneeName'
};
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { KanbanModule } from '@syncfusion/ej2-angular-kanban';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
KanbanModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }export let kanbanData: Object[] = [
{
Id: 1,
Status: 'Open',
Summary: 'Analyze the new requirements gathered from the customer.',
Type: 'Story',
Priority: 'Low',
Tags: 'Analyze,Customer',
Estimate: 3.5,
Assignee: 'Nancy Davloio',
AssigneeName: 'Nancy',
RankId: 1
},
{
Id: 2,
Status: 'InProgress',
Summary: 'Improve application performance',
Type: 'Improvement',
Priority: 'Normal',
Tags: 'Improvement',
Estimate: 6,
Assignee: 'Andrew Fuller',
AssigneeName: 'Andrew',
RankId: 1
},
{
Id: 3,
Status: 'Open',
Summary: 'Arrange a web meeting with the customer to get new requirements.',
Type: 'Others',
Priority: 'Critical',
Tags: 'Meeting',
Estimate: 5.5,
Assignee: 'Janet Leverling',
AssigneeName: 'Janet',
RankId: 2
},
{
Id: 4,
Status: 'InProgress',
Summary: 'Fix the issues reported in the IE browser.',
Type: 'Bug',
Priority: 'Release Breaker',
Tags: 'IE',
Estimate: 2.5,
Assignee: 'Janet Leverling',
AssigneeName: 'Janet',
RankId: 2
},
{
Id: 5,
Status: 'Testing',
Summary: 'Fix the issues reported by the customer.',
Type: 'Bug',
Priority: 'Low',
Tags: 'Customer',
Estimate: '3.5',
Assignee: 'Steven walker',
AssigneeName: 'Steven',
RankId: 1
},
{
Id: 6,
Status: 'Close',
Summary: 'Arrange a web meeting with the customer to get the login page requirements.',
Type: 'Others',
Priority: 'Low',
Tags: 'Meeting',
Estimate: 2,
Assignee: 'Michael Suyama',
RankId: 1
},
{
Id: 7,
Status: 'Validate',
Summary: 'Validate new requirements',
Type: 'Improvement',
Priority: 'Low',
Tags: 'Validation',
Estimate: 1.5,
Assignee: 'Robert King',
RankId: 1
},
{
Id: 8,
Status: 'Close',
Summary: 'Login page validation',
Type: 'Story',
Priority: 'Release Breaker',
Tags: 'Validation,Fix',
Estimate: 2.5,
Assignee: 'Laura Callahan',
RankId: 2
},
{
Id: 9,
Status: 'Testing',
Summary: 'Fix the issues reported in Safari browser.',
Type: 'Bug',
Priority: 'Release Breaker',
Tags: 'Fix,Safari',
Estimate: 1.5,
Assignee: 'Nancy Davloio',
RankId: 2
},
{
Id: 10,
Status: 'Close',
Summary: 'Test the application in the IE browser.',
Type: 'Story',
Priority: 'Low',
Tags: 'Testing,IE',
Estimate: 5.5,
Assignee: 'Margaret hamilt',
RankId: 3
},
{
Id: 11,
Status: 'Validate',
Summary: 'Validate the issues reported by the customer.',
Type: 'Story',
Priority: 'High',
Tags: 'Validation,Fix',
Estimate: 1,
Assignee: 'Steven walker',
RankId: 1
},
{
Id: 12,
Status: 'Testing',
Summary: 'Check Login page validation.',
Type: 'Story',
Priority: 'Release Breaker',
Tags: 'Testing',
Estimate: 0.5,
Assignee: 'Michael Suyama',
RankId: 3
},
{
Id: 13,
Status: 'Open',
Summary: 'API improvements.',
Type: 'Improvement',
Priority: 'High',
Tags: 'Grid,API',
Estimate: 3.5,
Assignee: 'Robert King',
RankId: 3
},
{
Id: 14,
Status: 'InProgress',
Summary: 'Add responsive support to application',
Type: 'Epic',
Priority: 'Critical',
Tags: 'Responsive',
Estimate: 6,
Assignee: 'Laura Callahan',
RankId: 3
},
{
Id: 15,
Status: 'Open',
Summary: 'Show the retrieved data from the server in grid control.',
Type: 'Story',
Priority: 'High',
Tags: 'Database,SQL',
Estimate: 5.5,
Assignee: 'Margaret hamilt',
RankId: 4
},
{
Id: 16,
Status: 'InProgress',
Summary: 'Fix cannot open user’s default database SQL error.',
Priority: 'Critical',
Type: 'Bug',
Tags: 'Database,Sql2008',
Estimate: 2.5,
Assignee: 'Janet Leverling',
RankId: 4
},
{
Id: 17,
Status: 'Testing',
Summary: 'Fix the issues reported in data binding.',
Type: 'Story',
Priority: 'Normal',
Tags: 'Databinding',
Estimate: '3.5',
Assignee: 'Janet Leverling',
RankId: 4
},
{
Id: 18,
Status: 'Close',
Summary: 'Analyze SQL server 2008 connection.',
Type: 'Story',
Priority: 'Release Breaker',
Tags: 'Grid,Sql',
Estimate: 2,
Assignee: 'Andrew Fuller',
RankId: 4
},
{
Id: 19,
Status: 'Validate',
Summary: 'Validate databinding issues.',
Type: 'Story',
Priority: 'Low',
Tags: 'Validation',
Estimate: 1.5,
Assignee: 'Margaret hamilt',
RankId: 1
},
{
Id: 20,
Status: 'Close',
Summary: 'Analyze grid control.',
Type: 'Story',
Priority: 'High',
Tags: 'Analyze',
Estimate: 2.5,
Assignee: 'Margaret hamilt',
RankId: 5
},
{
Id: 21,
Status: 'Close',
Summary: 'Stored procedure for initial data binding of the grid.',
Type: 'Others',
Priority: 'Release Breaker',
Tags: 'Databinding',
Estimate: 1.5,
Assignee: 'Steven walker',
RankId: 6
},
{
Id: 22,
Status: 'Close',
Summary: 'Analyze stored procedures.',
Type: 'Story',
Priority: 'Release Breaker',
Tags: 'Procedures',
Estimate: 5.5,
Assignee: 'Janet Leverling',
RankId: 7
},
{
Id: 23,
Status: 'Validate',
Summary: 'Validate editing issues.',
Type: 'Story',
Priority: 'Critical',
Tags: 'Editing',
Estimate: 1,
Assignee: 'Nancy Davloio',
RankId: 1
},
{
Id: 24,
Status: 'Testing',
Summary: 'Test editing functionality.',
Type: 'Story',
Priority: 'Normal',
Tags: 'Editing,Test',
Estimate: 0.5,
Assignee: 'Nancy Davloio',
RankId: 5
},
{
Id: 25,
Status: 'Open',
Summary: 'Enhance editing functionality.',
Type: 'Improvement',
Priority: 'Low',
Tags: 'Editing',
Estimate: 3.5,
Assignee: 'Andrew Fuller',
RankId: 5
}
];import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);You can customize the Kanban swimlane row by using the template property, which is specified within the swimlaneSettings property. In this demo, the swimlane header is customized with HTML element.
import { Component } from '@angular/core';
import { CardSettingsModel, SwimlaneSettingsModel } from '@syncfusion/ej2-angular-kanban';
import { kanbanData } from './datasource';
@Component({
selector: 'app-root',
template: `<ejs-kanban keyField='Status' [dataSource]='data' [cardSettings]='cardSettings' [swimlaneSettings]='swimlaneSettings'>
<e-columns>
<e-column headerText='To do' keyField='Open'></e-column>
<e-column headerText='In Progress' keyField='InProgress'></e-column>
<e-column headerText='Testing' keyField='Testing'></e-column>
<e-column headerText='Done' keyField='Close'></e-column>
</e-columns>
<ng-template #swimlaneSettingsTemplate let-data>
<div id="swimlaneTemplate">
<div class="swimlane-template e-swimlane-template-table">
<div class="e-swimlane-row-text">
<img src="{{data.keyField}}.png"
alt="{{data.keyField}}" /><span>{{data.textField}}</span>
</div>
</div>
</div>
</ng-template>
</ejs-kanban>`
})
export class AppComponent {
public data: Object[] = kanbanData;
public cardSettings: CardSettingsModel = {
contentField: 'Summary',
headerField: 'Id'
};
public swimlaneSettings: SwimlaneSettingsModel = {
keyField: 'Assignee',
textField: 'AssigneeName'
};
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { KanbanModule } from '@syncfusion/ej2-angular-kanban';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
KanbanModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }export let kanbanData: Object[] = [
{
Id: 1,
Status: 'Open',
Summary: 'Analyze the new requirements gathered from the customer.',
Type: 'Story',
Priority: 'Low',
Tags: 'Analyze,Customer',
Estimate: 3.5,
Assignee: 'Nancy Davloio',
AssigneeName: 'Nancy',
RankId: 1
},
{
Id: 2,
Status: 'InProgress',
Summary: 'Improve application performance',
Type: 'Improvement',
Priority: 'Normal',
Tags: 'Improvement',
Estimate: 6,
Assignee: 'Andrew Fuller',
AssigneeName: 'Andrew',
RankId: 1
},
{
Id: 3,
Status: 'Open',
Summary: 'Arrange a web meeting with the customer to get new requirements.',
Type: 'Others',
Priority: 'Critical',
Tags: 'Meeting',
Estimate: 5.5,
Assignee: 'Janet Leverling',
AssigneeName: 'Janet',
RankId: 2
},
{
Id: 4,
Status: 'InProgress',
Summary: 'Fix the issues reported in the IE browser.',
Type: 'Bug',
Priority: 'Release Breaker',
Tags: 'IE',
Estimate: 2.5,
Assignee: 'Janet Leverling',
AssigneeName: 'Janet',
RankId: 2
},
{
Id: 5,
Status: 'Review',
Summary: 'Fix the issues reported by the customer.',
Type: 'Bug',
Priority: 'Low',
Tags: 'Customer',
Estimate: '3.5',
Assignee: 'Steven walker',
AssigneeName: 'Steven',
RankId: 1
},
{
Id: 6,
Status: 'Close',
Summary: 'Arrange a web meeting with the customer to get the login page requirements.',
Type: 'Others',
Priority: 'Low',
Tags: 'Meeting',
Estimate: 2,
Assignee: 'Michael Suyama',
RankId: 1
},
{
Id: 7,
Status: 'Validate',
Summary: 'Validate new requirements',
Type: 'Improvement',
Priority: 'Low',
Tags: 'Validation',
Estimate: 1.5,
Assignee: 'Robert King',
RankId: 1
},
{
Id: 8,
Status: 'Close',
Summary: 'Login page validation',
Type: 'Story',
Priority: 'Release Breaker',
Tags: 'Validation,Fix',
Estimate: 2.5,
Assignee: 'Laura Callahan',
RankId: 2
},
{
Id: 9,
Status: 'Review',
Summary: 'Fix the issues reported in Safari browser.',
Type: 'Bug',
Priority: 'Release Breaker',
Tags: 'Fix,Safari',
Estimate: 1.5,
Assignee: 'Nancy Davloio',
RankId: 2
},
{
Id: 10,
Status: 'Close',
Summary: 'Test the application in the IE browser.',
Type: 'Story',
Priority: 'Low',
Tags: 'Review,IE',
Estimate: 5.5,
Assignee: 'Margaret hamilt',
RankId: 3
},
{
Id: 11,
Status: 'Validate',
Summary: 'Validate the issues reported by the customer.',
Type: 'Story',
Priority: 'High',
Tags: 'Validation,Fix',
Estimate: 1,
Assignee: 'Steven walker',
RankId: 1
},
{
Id: 12,
Status: 'Review',
Summary: 'Check Login page validation.',
Type: 'Story',
Priority: 'Release Breaker',
Tags: 'Review',
Estimate: 0.5,
Assignee: 'Michael Suyama',
RankId: 3
},
{
Id: 13,
Status: 'Open',
Summary: 'API improvements.',
Type: 'Improvement',
Priority: 'High',
Tags: 'Grid,API',
Estimate: 3.5,
Assignee: 'Robert King',
RankId: 3
},
{
Id: 14,
Status: 'InProgress',
Summary: 'Add responsive support to application',
Type: 'Epic',
Priority: 'Critical',
Tags: 'Responsive',
Estimate: 6,
Assignee: 'Laura Callahan',
RankId: 3
},
{
Id: 15,
Status: 'Open',
Summary: 'Show the retrieved data from the server in grid control.',
Type: 'Story',
Priority: 'High',
Tags: 'Database,SQL',
Estimate: 5.5,
Assignee: 'Margaret hamilt',
RankId: 4
},
{
Id: 16,
Status: 'InProgress',
Summary: 'Fix cannot open user’s default database SQL error.',
Priority: 'Critical',
Type: 'Bug',
Tags: 'Database,Sql2008',
Estimate: 2.5,
Assignee: 'Janet Leverling',
RankId: 4
},
{
Id: 17,
Status: 'Review',
Summary: 'Fix the issues reported in data binding.',
Type: 'Story',
Priority: 'Normal',
Tags: 'Databinding',
Estimate: '3.5',
Assignee: 'Janet Leverling',
RankId: 4
},
{
Id: 18,
Status: 'Close',
Summary: 'Analyze SQL server 2008 connection.',
Type: 'Story',
Priority: 'Release Breaker',
Tags: 'Grid,Sql',
Estimate: 2,
Assignee: 'Andrew Fuller',
RankId: 4
},
{
Id: 19,
Status: 'Validate',
Summary: 'Validate databinding issues.',
Type: 'Story',
Priority: 'Low',
Tags: 'Validation',
Estimate: 1.5,
Assignee: 'Margaret hamilt',
RankId: 1
},
{
Id: 20,
Status: 'Close',
Summary: 'Analyze grid control.',
Type: 'Story',
Priority: 'High',
Tags: 'Analyze',
Estimate: 2.5,
Assignee: 'Margaret hamilt',
RankId: 5
},
{
Id: 21,
Status: 'Close',
Summary: 'Stored procedure for initial data binding of the grid.',
Type: 'Others',
Priority: 'Release Breaker',
Tags: 'Databinding',
Estimate: 1.5,
Assignee: 'Steven walker',
RankId: 6
},
{
Id: 22,
Status: 'Close',
Summary: 'Analyze stored procedures.',
Type: 'Story',
Priority: 'Release Breaker',
Tags: 'Procedures',
Estimate: 5.5,
Assignee: 'Janet Leverling',
RankId: 7
},
{
Id: 23,
Status: 'Validate',
Summary: 'Validate editing issues.',
Type: 'Story',
Priority: 'Critical',
Tags: 'Editing',
Estimate: 1,
Assignee: 'Nancy Davloio',
RankId: 1
},
{
Id: 24,
Status: 'Review',
Summary: 'Test editing functionality.',
Type: 'Story',
Priority: 'Normal',
Tags: 'Editing,Test',
Estimate: 0.5,
Assignee: 'Nancy Davloio',
RankId: 5
},
{
Id: 25,
Status: 'Open',
Summary: 'Enhance editing functionality.',
Type: 'Improvement',
Priority: 'Low',
Tags: 'Editing',
Estimate: 3.5,
Assignee: 'Andrew Fuller',
RankId: 5
}
];import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);Swimlane rows are rendered on descending order when using the sortBy property set to Descending order. By default, swimlane rows are rendered by Ascending order.
import { Component } from '@angular/core';
import { CardSettingsModel, SwimlaneSettingsModel } from '@syncfusion/ej2-angular-kanban';
import { kanbanData } from './datasource';
@Component({
selector: 'app-root',
template: `<ejs-kanban keyField='Status' [dataSource]='data' [cardSettings]='cardSettings' [swimlaneSettings]='swimlaneSettings'>
<e-columns>
<e-column headerText='To do' keyField='Open'></e-column>
<e-column headerText='In Progress' keyField='InProgress'></e-column>
<e-column headerText='Testing' keyField='Testing'></e-column>
<e-column headerText='Done' keyField='Close'></e-column>
</e-columns>
</ejs-kanban>`
})
export class AppComponent {
public data: Object[] = kanbanData;
public cardSettings: CardSettingsModel = {
contentField: 'Summary',
headerField: 'Id'
};
public swimlaneSettings: SwimlaneSettingsModel = {
keyField: 'Assignee',
sortBy: 'Descending'
};
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { KanbanModule } from '@syncfusion/ej2-angular-kanban';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
KanbanModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }export let kanbanData: Object[] = [
{
Id: 1,
Status: 'Open',
Summary: 'Analyze the new requirements gathered from the customer.',
Type: 'Story',
Priority: 'Low',
Tags: 'Analyze,Customer',
Estimate: 3.5,
Assignee: 'Nancy Davloio',
RankId: 1
},
{
Id: 2,
Status: 'InProgress',
Summary: 'Improve application performance',
Type: 'Improvement',
Priority: 'Normal',
Tags: 'Improvement',
Estimate: 6,
Assignee: 'Andrew Fuller',
RankId: 1
},
{
Id: 3,
Status: 'Open',
Summary: 'Arrange a web meeting with the customer to get new requirements.',
Type: 'Others',
Priority: 'Critical',
Tags: 'Meeting',
Estimate: 5.5,
Assignee: 'Janet Leverling',
RankId: 2
},
{
Id: 4,
Status: 'InProgress',
Summary: 'Fix the issues reported in the IE browser.',
Type: 'Bug',
Priority: 'Release Breaker',
Tags: 'IE',
Estimate: 2.5,
Assignee: 'Janet Leverling',
RankId: 2
},
{
Id: 5,
Status: 'Testing',
Summary: 'Fix the issues reported by the customer.',
Type: 'Bug',
Priority: 'Low',
Tags: 'Customer',
Estimate: '3.5',
Assignee: 'Steven walker',
RankId: 1
},
{
Id: 6,
Status: 'Close',
Summary: 'Arrange a web meeting with the customer to get the login page requirements.',
Type: 'Others',
Priority: 'Low',
Tags: 'Meeting',
Estimate: 2,
Assignee: 'Michael Suyama',
RankId: 1
},
{
Id: 7,
Status: 'Validate',
Summary: 'Validate new requirements',
Type: 'Improvement',
Priority: 'Low',
Tags: 'Validation',
Estimate: 1.5,
Assignee: 'Robert King',
RankId: 1
},
{
Id: 8,
Status: 'Close',
Summary: 'Login page validation',
Type: 'Story',
Priority: 'Release Breaker',
Tags: 'Validation,Fix',
Estimate: 2.5,
Assignee: 'Laura Callahan',
RankId: 2
},
{
Id: 9,
Status: 'Testing',
Summary: 'Fix the issues reported in Safari browser.',
Type: 'Bug',
Priority: 'Release Breaker',
Tags: 'Fix,Safari',
Estimate: 1.5,
Assignee: 'Nancy Davloio',
RankId: 2
},
{
Id: 10,
Status: 'Close',
Summary: 'Test the application in the IE browser.',
Type: 'Story',
Priority: 'Low',
Tags: 'Testing,IE',
Estimate: 5.5,
Assignee: 'Margaret hamilt',
RankId: 3
},
{
Id: 11,
Status: 'Validate',
Summary: 'Validate the issues reported by the customer.',
Type: 'Story',
Priority: 'High',
Tags: 'Validation,Fix',
Estimate: 1,
Assignee: 'Steven walker',
RankId: 1
},
{
Id: 12,
Status: 'Testing',
Summary: 'Check Login page validation.',
Type: 'Story',
Priority: 'Release Breaker',
Tags: 'Testing',
Estimate: 0.5,
Assignee: 'Michael Suyama',
RankId: 3
},
{
Id: 13,
Status: 'Open',
Summary: 'API improvements.',
Type: 'Improvement',
Priority: 'High',
Tags: 'Grid,API',
Estimate: 3.5,
Assignee: 'Robert King',
RankId: 3
},
{
Id: 14,
Status: 'InProgress',
Summary: 'Add responsive support to application',
Type: 'Epic',
Priority: 'Critical',
Tags: 'Responsive',
Estimate: 6,
Assignee: 'Laura Callahan',
RankId: 3
},
{
Id: 15,
Status: 'Open',
Summary: 'Show the retrieved data from the server in grid control.',
Type: 'Story',
Priority: 'High',
Tags: 'Database,SQL',
Estimate: 5.5,
Assignee: 'Margaret hamilt',
RankId: 4
},
{
Id: 16,
Status: 'InProgress',
Summary: 'Fix cannot open user’s default database SQL error.',
Priority: 'Critical',
Type: 'Bug',
Tags: 'Database,Sql2008',
Estimate: 2.5,
Assignee: 'Janet Leverling',
RankId: 4
},
{
Id: 17,
Status: 'Testing',
Summary: 'Fix the issues reported in data binding.',
Type: 'Story',
Priority: 'Normal',
Tags: 'Databinding',
Estimate: '3.5',
Assignee: 'Janet Leverling',
RankId: 4
},
{
Id: 18,
Status: 'Close',
Summary: 'Analyze SQL server 2008 connection.',
Type: 'Story',
Priority: 'Release Breaker',
Tags: 'Grid,Sql',
Estimate: 2,
Assignee: 'Andrew Fuller',
RankId: 4
},
{
Id: 19,
Status: 'Validate',
Summary: 'Validate databinding issues.',
Type: 'Story',
Priority: 'Low',
Tags: 'Validation',
Estimate: 1.5,
Assignee: 'Margaret hamilt',
RankId: 1
},
{
Id: 20,
Status: 'Close',
Summary: 'Analyze grid control.',
Type: 'Story',
Priority: 'High',
Tags: 'Analyze',
Estimate: 2.5,
Assignee: 'Margaret hamilt',
RankId: 5
},
{
Id: 21,
Status: 'Close',
Summary: 'Stored procedure for initial data binding of the grid.',
Type: 'Others',
Priority: 'Release Breaker',
Tags: 'Databinding',
Estimate: 1.5,
Assignee: 'Steven walker',
RankId: 6
},
{
Id: 22,
Status: 'Close',
Summary: 'Analyze stored procedures.',
Type: 'Story',
Priority: 'Release Breaker',
Tags: 'Procedures',
Estimate: 5.5,
Assignee: 'Janet Leverling',
RankId: 7
},
{
Id: 23,
Status: 'Validate',
Summary: 'Validate editing issues.',
Type: 'Story',
Priority: 'Critical',
Tags: 'Editing',
Estimate: 1,
Assignee: 'Nancy Davloio',
RankId: 1
},
{
Id: 24,
Status: 'Testing',
Summary: 'Test editing functionality.',
Type: 'Story',
Priority: 'Normal',
Tags: 'Editing,Test',
Estimate: 0.5,
Assignee: 'Nancy Davloio',
RankId: 5
},
{
Id: 25,
Status: 'Open',
Summary: 'Enhance editing functionality.',
Type: 'Improvement',
Priority: 'Low',
Tags: 'Editing',
Estimate: 3.5,
Assignee: 'Andrew Fuller',
RankId: 5
}
];import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);By default, The Kanban does not allow dragging the cards across the swimlane rows. Enabling the dragAndDrop property allows you to drag the cards across the swimlane rows, which is specified inside swimlaneSettings property.
import { Component } from '@angular/core';
import { CardSettingsModel, SwimlaneSettingsModel } from '@syncfusion/ej2-angular-kanban';
import { kanbanData } from './datasource';
@Component({
selector: 'app-root',
template: `<ejs-kanban keyField='Status' [dataSource]='data' [cardSettings]='cardSettings' [swimlaneSettings]='swimlaneSettings'>
<e-columns>
<e-column headerText='To do' keyField='Open'></e-column>
<e-column headerText='In Progress' keyField='InProgress'></e-column>
<e-column headerText='Testing' keyField='Testing'></e-column>
<e-column headerText='Done' keyField='Close'></e-column>
</e-columns>
</ejs-kanban>`
})
export class AppComponent {
public data: Object[] = kanbanData;
public cardSettings: CardSettingsModel = {
contentField: 'Summary',
headerField: 'Id'
};
public swimlaneSettings: SwimlaneSettingsModel = {
keyField: 'Assignee',
allowDragAndDrop: true
};
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { KanbanModule } from '@syncfusion/ej2-angular-kanban';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
KanbanModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }export let kanbanData: Object[] = [
{
Id: 1,
Status: 'Open',
Summary: 'Analyze the new requirements gathered from the customer.',
Type: 'Story',
Priority: 'Low',
Tags: 'Analyze,Customer',
Estimate: 3.5,
Assignee: 'Nancy Davloio',
RankId: 1
},
{
Id: 2,
Status: 'InProgress',
Summary: 'Improve application performance',
Type: 'Improvement',
Priority: 'Normal',
Tags: 'Improvement',
Estimate: 6,
Assignee: 'Andrew Fuller',
RankId: 1
},
{
Id: 3,
Status: 'Open',
Summary: 'Arrange a web meeting with the customer to get new requirements.',
Type: 'Others',
Priority: 'Critical',
Tags: 'Meeting',
Estimate: 5.5,
Assignee: 'Janet Leverling',
RankId: 2
},
{
Id: 4,
Status: 'InProgress',
Summary: 'Fix the issues reported in the IE browser.',
Type: 'Bug',
Priority: 'Release Breaker',
Tags: 'IE',
Estimate: 2.5,
Assignee: 'Janet Leverling',
RankId: 2
},
{
Id: 5,
Status: 'Testing',
Summary: 'Fix the issues reported by the customer.',
Type: 'Bug',
Priority: 'Low',
Tags: 'Customer',
Estimate: '3.5',
Assignee: 'Steven walker',
RankId: 1
},
{
Id: 6,
Status: 'Close',
Summary: 'Arrange a web meeting with the customer to get the login page requirements.',
Type: 'Others',
Priority: 'Low',
Tags: 'Meeting',
Estimate: 2,
Assignee: 'Michael Suyama',
RankId: 1
},
{
Id: 7,
Status: 'Validate',
Summary: 'Validate new requirements',
Type: 'Improvement',
Priority: 'Low',
Tags: 'Validation',
Estimate: 1.5,
Assignee: 'Robert King',
RankId: 1
},
{
Id: 8,
Status: 'Close',
Summary: 'Login page validation',
Type: 'Story',
Priority: 'Release Breaker',
Tags: 'Validation,Fix',
Estimate: 2.5,
Assignee: 'Laura Callahan',
RankId: 2
},
{
Id: 9,
Status: 'Testing',
Summary: 'Fix the issues reported in Safari browser.',
Type: 'Bug',
Priority: 'Release Breaker',
Tags: 'Fix,Safari',
Estimate: 1.5,
Assignee: 'Nancy Davloio',
RankId: 2
},
{
Id: 10,
Status: 'Close',
Summary: 'Test the application in the IE browser.',
Type: 'Story',
Priority: 'Low',
Tags: 'Testing,IE',
Estimate: 5.5,
Assignee: 'Margaret hamilt',
RankId: 3
},
{
Id: 11,
Status: 'Validate',
Summary: 'Validate the issues reported by the customer.',
Type: 'Story',
Priority: 'High',
Tags: 'Validation,Fix',
Estimate: 1,
Assignee: 'Steven walker',
RankId: 1
},
{
Id: 12,
Status: 'Testing',
Summary: 'Check Login page validation.',
Type: 'Story',
Priority: 'Release Breaker',
Tags: 'Testing',
Estimate: 0.5,
Assignee: 'Michael Suyama',
RankId: 3
},
{
Id: 13,
Status: 'Open',
Summary: 'API improvements.',
Type: 'Improvement',
Priority: 'High',
Tags: 'Grid,API',
Estimate: 3.5,
Assignee: 'Robert King',
RankId: 3
},
{
Id: 14,
Status: 'InProgress',
Summary: 'Add responsive support to application',
Type: 'Epic',
Priority: 'Critical',
Tags: 'Responsive',
Estimate: 6,
Assignee: 'Laura Callahan',
RankId: 3
},
{
Id: 15,
Status: 'Open',
Summary: 'Show the retrieved data from the server in grid control.',
Type: 'Story',
Priority: 'High',
Tags: 'Database,SQL',
Estimate: 5.5,
Assignee: 'Margaret hamilt',
RankId: 4
},
{
Id: 16,
Status: 'InProgress',
Summary: 'Fix cannot open user’s default database SQL error.',
Priority: 'Critical',
Type: 'Bug',
Tags: 'Database,Sql2008',
Estimate: 2.5,
Assignee: 'Janet Leverling',
RankId: 4
},
{
Id: 17,
Status: 'Testing',
Summary: 'Fix the issues reported in data binding.',
Type: 'Story',
Priority: 'Normal',
Tags: 'Databinding',
Estimate: '3.5',
Assignee: 'Janet Leverling',
RankId: 4
},
{
Id: 18,
Status: 'Close',
Summary: 'Analyze SQL server 2008 connection.',
Type: 'Story',
Priority: 'Release Breaker',
Tags: 'Grid,Sql',
Estimate: 2,
Assignee: 'Andrew Fuller',
RankId: 4
},
{
Id: 19,
Status: 'Validate',
Summary: 'Validate databinding issues.',
Type: 'Story',
Priority: 'Low',
Tags: 'Validation',
Estimate: 1.5,
Assignee: 'Margaret hamilt',
RankId: 1
},
{
Id: 20,
Status: 'Close',
Summary: 'Analyze grid control.',
Type: 'Story',
Priority: 'High',
Tags: 'Analyze',
Estimate: 2.5,
Assignee: 'Margaret hamilt',
RankId: 5
},
{
Id: 21,
Status: 'Close',
Summary: 'Stored procedure for initial data binding of the grid.',
Type: 'Others',
Priority: 'Release Breaker',
Tags: 'Databinding',
Estimate: 1.5,
Assignee: 'Steven walker',
RankId: 6
},
{
Id: 22,
Status: 'Close',
Summary: 'Analyze stored procedures.',
Type: 'Story',
Priority: 'Release Breaker',
Tags: 'Procedures',
Estimate: 5.5,
Assignee: 'Janet Leverling',
RankId: 7
},
{
Id: 23,
Status: 'Validate',
Summary: 'Validate editing issues.',
Type: 'Story',
Priority: 'Critical',
Tags: 'Editing',
Estimate: 1,
Assignee: 'Nancy Davloio',
RankId: 1
},
{
Id: 24,
Status: 'Testing',
Summary: 'Test editing functionality.',
Type: 'Story',
Priority: 'Normal',
Tags: 'Editing,Test',
Estimate: 0.5,
Assignee: 'Nancy Davloio',
RankId: 5
},
{
Id: 25,
Status: 'Open',
Summary: 'Enhance editing functionality.',
Type: 'Improvement',
Priority: 'Low',
Tags: 'Editing',
Estimate: 3.5,
Assignee: 'Andrew Fuller',
RankId: 5
}
];import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);You can render the empty swimlane row by enabling the showEmptyRow property. If mapping keyField does not have cards, empty swimlane row will be rendered.
import { Component } from '@angular/core';
import { CardSettingsModel, SwimlaneSettingsModel } from '@syncfusion/ej2-angular-kanban';
import { kanbanData } from './datasource';
@Component({
selector: 'app-root',
template: `<ejs-kanban keyField='Status' [dataSource]='data' [cardSettings]='cardSettings' [swimlaneSettings]='swimlaneSettings'>
<e-columns>
<e-column headerText='To do' keyField='Open'></e-column>
<e-column headerText='In Progress' keyField='InProgress'></e-column>
<e-column headerText='Done' keyField='Close'></e-column>
</e-columns>
</ejs-kanban>`
})
export class AppComponent {
public data: Object[] = kanbanData;
public cardSettings: CardSettingsModel = {
contentField: 'Summary',
headerField: 'Id'
};
public swimlaneSettings: SwimlaneSettingsModel = {
keyField: 'Assignee',
showEmptyRow: true
};
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { KanbanModule } from '@syncfusion/ej2-angular-kanban';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
KanbanModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }export let kanbanData: Object[] = [
{
'Id': 1,
'Status': 'Open',
'Summary': 'Analyze the new requirements gathered from the customer.',
'Type': 'Story',
'Priority': 'Low',
'Tags': 'Analyze,Customer',
'Estimate': 3.5,
'Assignee': 'Nancy Davloio',
'RankId': 1
},
{
'Id': 2,
'Status': 'InProgress',
'Summary': 'Improve application performance',
'Type': 'Improvement',
'Priority': 'Normal',
'Tags': 'Improvement',
'Estimate': 6,
'Assignee': 'Andrew Fuller',
'RankId': 1
},
{
'Id': 3,
'Status': 'Open',
'Summary': 'Arrange a web meeting with the customer to get new requirements.',
'Type': 'Others',
'Priority': 'Critical',
'Tags': 'Meeting',
'Estimate': 5.5,
'Assignee': 'Janet Leverling',
'RankId': 2
},
{
'Id': 4,
'Status': 'InProgress',
'Summary': 'Fix the issues reported in the IE browser.',
'Type': 'Bug',
'Priority': 'Release Breaker',
'Tags': 'IE',
'Estimate': 2.5,
'Assignee': 'Janet Leverling',
'RankId': 2
},
{
'Id': 5,
'Status': 'Testing',
'Summary': 'Fix the issues reported by the customer.',
'Type': 'Bug',
'Priority': 'Low',
'Tags': 'Customer',
'Estimate': '3.5',
'Assignee': 'Steven walker',
'RankId': 1
},
{
'Id': 6,
'Status': 'Close',
'Summary': 'Arrange a web meeting with the customer to get the login page requirements.',
'Type': 'Others',
'Priority': 'Low',
'Tags': 'Meeting',
'Estimate': 2,
'Assignee': 'Michael Suyama',
'RankId': 1
},
{
'Id': 7,
'Status': 'Validate',
'Summary': 'Validate new requirements',
'Type': 'Improvement',
'Priority': 'Low',
'Tags': 'Validation',
'Estimate': 1.5,
'Assignee': 'Robert King',
'RankId': 1
},
{
'Id': 8,
'Status': 'Testing',
'Summary': 'Login page validation',
'Type': 'Story',
'Priority': 'Release Breaker',
'Tags': 'Validation,Fix',
'Estimate': 2.5,
'Assignee': 'Laura Callahan',
'RankId': 2
},
{
'Id': 9,
'Status': 'Testing',
'Summary': 'Fix the issues reported in Safari browser.',
'Type': 'Bug',
'Priority': 'Release Breaker',
'Tags': 'Fix,Safari',
'Estimate': 1.5,
'Assignee': 'Nancy Davloio',
'RankId': 2
},
{
'Id': 10,
'Status': 'Close',
'Summary': 'Test the application in the IE browser.',
'Type': 'Story',
'Priority': 'Low',
'Tags': 'Testing,IE',
'Estimate': 5.5,
'Assignee': 'Margaret hamilt',
'RankId': 3
},
{
'Id': 11,
'Status': 'Validate',
'Summary': 'Validate the issues reported by the customer.',
'Type': 'Story',
'Priority': 'High',
'Tags': 'Validation,Fix',
'Estimate': 1,
'Assignee': 'Steven walker',
'RankId': 1
},
{
'Id': 12,
'Status': 'Testing',
'Summary': 'Check Login page validation.',
'Type': 'Story',
'Priority': 'Release Breaker',
'Tags': 'Testing',
'Estimate': 0.5,
'Assignee': 'Michael Suyama',
'RankId': 3
},
{
'Id': 13,
'Status': 'Open',
'Summary': 'API improvements.',
'Type': 'Improvement',
'Priority': 'High',
'Tags': 'Grid,API',
'Estimate': 3.5,
'Assignee': 'Robert King',
'RankId': 3
},
{
'Id': 14,
'Status': 'Testing',
'Summary': 'Add responsive support to application',
'Type': 'Epic',
'Priority': 'Critical',
'Tags': 'Responsive',
'Estimate': 6,
'Assignee': 'Laura Callahan',
'RankId': 3
},
{
'Id': 15,
'Status': 'Open',
'Summary': 'Show the retrieved data from the server in grid control.',
'Type': 'Story',
'Priority': 'High',
'Tags': 'Database,SQL',
'Estimate': 5.5,
'Assignee': 'Margaret hamilt',
'RankId': 4
},
{
'Id': 16,
'Status': 'InProgress',
'Summary': 'Fix cannot open user’s default database SQL error.',
'Priority': 'Critical',
'Type': 'Bug',
'Tags': 'Database,Sql2008',
'Estimate': 2.5,
'Assignee': 'Janet Leverling',
'RankId': 4
},
{
'Id': 17,
'Status': 'Testing',
'Summary': 'Fix the issues reported in data binding.',
'Type': 'Story',
'Priority': 'Normal',
'Tags': 'Databinding',
'Estimate': '3.5',
'Assignee': 'Janet Leverling',
'RankId': 4
},
{
'Id': 18,
'Status': 'Close',
'Summary': 'Analyze SQL server 2008 connection.',
'Type': 'Story',
'Priority': 'Release Breaker',
'Tags': 'Grid,Sql',
'Estimate': 2,
'Assignee': 'Andrew Fuller',
'RankId': 4
},
{
'Id': 19,
'Status': 'Validate',
'Summary': 'Validate databinding issues.',
'Type': 'Story',
'Priority': 'Low',
'Tags': 'Validation',
'Estimate': 1.5,
'Assignee': 'Margaret hamilt',
'RankId': 1
},
{
'Id': 20,
'Status': 'Close',
'Summary': 'Analyze grid control.',
'Type': 'Story',
'Priority': 'High',
'Tags': 'Analyze',
'Estimate': 2.5,
'Assignee': 'Margaret hamilt',
'RankId': 5
},
{
'Id': 21,
'Status': 'Close',
'Summary': 'Stored procedure for initial data binding of the grid.',
'Type': 'Others',
'Priority': 'Release Breaker',
'Tags': 'Databinding',
'Estimate': 1.5,
'Assignee': 'Steven walker',
'RankId': 6
},
{
'Id': 22,
'Status': 'Close',
'Summary': 'Analyze stored procedures.',
'Type': 'Story',
'Priority': 'Release Breaker',
'Tags': 'Procedures',
'Estimate': 5.5,
'Assignee': 'Janet Leverling',
'RankId': 7
},
{
'Id': 23,
'Status': 'Validate',
'Summary': 'Validate editing issues.',
'Type': 'Story',
'Priority': 'Critical',
'Tags': 'Editing',
'Estimate': 1,
'Assignee': 'Nancy Davloio',
'RankId': 1
},
{
'Id': 24,
'Status': 'Testing',
'Summary': 'Test editing functionality.',
'Type': 'Story',
'Priority': 'Normal',
'Tags': 'Editing,Test',
'Estimate': 0.5,
'Assignee': 'Nancy Davloio',
'RankId': 5
},
{
'Id': 25,
'Status': 'Open',
'Summary': 'Enhance editing functionality.',
'Type': 'Improvement',
'Priority': 'Low',
'Tags': 'Editing',
'Estimate': 3.5,
'Assignee': 'Andrew Fuller',
'RankId': 5
}
];import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);Users can show or hide the cards count by swimlane row in header when enabling the showItemCount property, which is enabled by default on the Kanban board.
Provided localization support for items text.
In below demo, disabled on showItemCount property on rendering swimlane row without total count.
import { Component } from '@angular/core';
import { CardSettingsModel, SwimlaneSettingsModel } from '@syncfusion/ej2-angular-kanban';
import { kanbanData } from './datasource';
@Component({
selector: 'app-root',
template: `<ejs-kanban keyField='Status' [dataSource]='data' [cardSettings]='cardSettings' [swimlaneSettings]='swimlaneSettings'>
<e-columns>
<e-column headerText='To do' keyField='Open'></e-column>
<e-column headerText='In Progress' keyField='InProgress'></e-column>
<e-column headerText='Testing' keyField='Testing'></e-column>
<e-column headerText='Done' keyField='Close'></e-column>
</e-columns>
</ejs-kanban>`
})
export class AppComponent {
public data: Object[] = kanbanData;
public cardSettings: CardSettingsModel = {
contentField: 'Summary',
headerField: 'Id'
};
public swimlaneSettings: SwimlaneSettingsModel = {
keyField: 'Assignee',
showItemCount: false
};
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { KanbanModule } from '@syncfusion/ej2-angular-kanban';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
KanbanModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }export let kanbanData: Object[] = [
{
Id: 1,
Status: 'Open',
Summary: 'Analyze the new requirements gathered from the customer.',
Type: 'Story',
Priority: 'Low',
Tags: 'Analyze,Customer',
Estimate: 3.5,
Assignee: 'Nancy Davloio',
RankId: 1
},
{
Id: 2,
Status: 'InProgress',
Summary: 'Improve application performance',
Type: 'Improvement',
Priority: 'Normal',
Tags: 'Improvement',
Estimate: 6,
Assignee: 'Andrew Fuller',
RankId: 1
},
{
Id: 3,
Status: 'Open',
Summary: 'Arrange a web meeting with the customer to get new requirements.',
Type: 'Others',
Priority: 'Critical',
Tags: 'Meeting',
Estimate: 5.5,
Assignee: 'Janet Leverling',
RankId: 2
},
{
Id: 4,
Status: 'InProgress',
Summary: 'Fix the issues reported in the IE browser.',
Type: 'Bug',
Priority: 'Release Breaker',
Tags: 'IE',
Estimate: 2.5,
Assignee: 'Janet Leverling',
RankId: 2
},
{
Id: 5,
Status: 'Testing',
Summary: 'Fix the issues reported by the customer.',
Type: 'Bug',
Priority: 'Low',
Tags: 'Customer',
Estimate: '3.5',
Assignee: 'Steven walker',
RankId: 1
},
{
Id: 6,
Status: 'Close',
Summary: 'Arrange a web meeting with the customer to get the login page requirements.',
Type: 'Others',
Priority: 'Low',
Tags: 'Meeting',
Estimate: 2,
Assignee: 'Michael Suyama',
RankId: 1
},
{
Id: 7,
Status: 'Validate',
Summary: 'Validate new requirements',
Type: 'Improvement',
Priority: 'Low',
Tags: 'Validation',
Estimate: 1.5,
Assignee: 'Robert King',
RankId: 1
},
{
Id: 8,
Status: 'Close',
Summary: 'Login page validation',
Type: 'Story',
Priority: 'Release Breaker',
Tags: 'Validation,Fix',
Estimate: 2.5,
Assignee: 'Laura Callahan',
RankId: 2
},
{
Id: 9,
Status: 'Testing',
Summary: 'Fix the issues reported in Safari browser.',
Type: 'Bug',
Priority: 'Release Breaker',
Tags: 'Fix,Safari',
Estimate: 1.5,
Assignee: 'Nancy Davloio',
RankId: 2
},
{
Id: 10,
Status: 'Close',
Summary: 'Test the application in the IE browser.',
Type: 'Story',
Priority: 'Low',
Tags: 'Testing,IE',
Estimate: 5.5,
Assignee: 'Margaret hamilt',
RankId: 3
},
{
Id: 11,
Status: 'Validate',
Summary: 'Validate the issues reported by the customer.',
Type: 'Story',
Priority: 'High',
Tags: 'Validation,Fix',
Estimate: 1,
Assignee: 'Steven walker',
RankId: 1
},
{
Id: 12,
Status: 'Testing',
Summary: 'Check Login page validation.',
Type: 'Story',
Priority: 'Release Breaker',
Tags: 'Testing',
Estimate: 0.5,
Assignee: 'Michael Suyama',
RankId: 3
},
{
Id: 13,
Status: 'Open',
Summary: 'API improvements.',
Type: 'Improvement',
Priority: 'High',
Tags: 'Grid,API',
Estimate: 3.5,
Assignee: 'Robert King',
RankId: 3
},
{
Id: 14,
Status: 'InProgress',
Summary: 'Add responsive support to application',
Type: 'Epic',
Priority: 'Critical',
Tags: 'Responsive',
Estimate: 6,
Assignee: 'Laura Callahan',
RankId: 3
},
{
Id: 15,
Status: 'Open',
Summary: 'Show the retrieved data from the server in grid control.',
Type: 'Story',
Priority: 'High',
Tags: 'Database,SQL',
Estimate: 5.5,
Assignee: 'Margaret hamilt',
RankId: 4
},
{
Id: 16,
Status: 'InProgress',
Summary: 'Fix cannot open user’s default database SQL error.',
Priority: 'Critical',
Type: 'Bug',
Tags: 'Database,Sql2008',
Estimate: 2.5,
Assignee: 'Janet Leverling',
RankId: 4
},
{
Id: 17,
Status: 'Testing',
Summary: 'Fix the issues reported in data binding.',
Type: 'Story',
Priority: 'Normal',
Tags: 'Databinding',
Estimate: '3.5',
Assignee: 'Janet Leverling',
RankId: 4
},
{
Id: 18,
Status: 'Close',
Summary: 'Analyze SQL server 2008 connection.',
Type: 'Story',
Priority: 'Release Breaker',
Tags: 'Grid,Sql',
Estimate: 2,
Assignee: 'Andrew Fuller',
RankId: 4
},
{
Id: 19,
Status: 'Validate',
Summary: 'Validate databinding issues.',
Type: 'Story',
Priority: 'Low',
Tags: 'Validation',
Estimate: 1.5,
Assignee: 'Margaret hamilt',
RankId: 1
},
{
Id: 20,
Status: 'Close',
Summary: 'Analyze grid control.',
Type: 'Story',
Priority: 'High',
Tags: 'Analyze',
Estimate: 2.5,
Assignee: 'Margaret hamilt',
RankId: 5
},
{
Id: 21,
Status: 'Close',
Summary: 'Stored procedure for initial data binding of the grid.',
Type: 'Others',
Priority: 'Release Breaker',
Tags: 'Databinding',
Estimate: 1.5,
Assignee: 'Steven walker',
RankId: 6
},
{
Id: 22,
Status: 'Close',
Summary: 'Analyze stored procedures.',
Type: 'Story',
Priority: 'Release Breaker',
Tags: 'Procedures',
Estimate: 5.5,
Assignee: 'Janet Leverling',
RankId: 7
},
{
Id: 23,
Status: 'Validate',
Summary: 'Validate editing issues.',
Type: 'Story',
Priority: 'Critical',
Tags: 'Editing',
Estimate: 1,
Assignee: 'Nancy Davloio',
RankId: 1
},
{
Id: 24,
Status: 'Testing',
Summary: 'Test editing functionality.',
Type: 'Story',
Priority: 'Normal',
Tags: 'Editing,Test',
Estimate: 0.5,
Assignee: 'Nancy Davloio',
RankId: 5
},
{
Id: 25,
Status: 'Open',
Summary: 'Enhance editing functionality.',
Type: 'Improvement',
Priority: 'Low',
Tags: 'Editing',
Estimate: 3.5,
Assignee: 'Andrew Fuller',
RankId: 5
}
];import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);Frozen rows provide an option to make the current swimlane row header text always visible on top of the content while scrolling the Kanban content. The swimlane header text will be changed dynamically, when you scroll to another swimlane row.
By default, the enableFrozenRows property is set as false. If you wish to show the swimlane frozen rows, you can enable the enableFrozenRows property.
This feature support only when using Kanban content scrolling.
import { Component } from '@angular/core';
import { CardSettingsModel, SwimlaneSettingsModel } from '@syncfusion/ej2-angular-kanban';
import { kanbanData } from './datasource';
@Component({
selector: 'app-root',
template: `<ejs-kanban keyField='Status' [dataSource]='data' [cardSettings]='cardSettings' [swimlaneSettings]='swimlaneSettings' height='500px'>
<e-columns>
<e-column headerText='To do' keyField='Open'></e-column>
<e-column headerText='In Progress' keyField='InProgress'></e-column>
<e-column headerText='Testing' keyField='Testing'></e-column>
<e-column headerText='Done' keyField='Close'></e-column>
</e-columns>
</ejs-kanban>`
})
export class AppComponent {
public data: Object[] = kanbanData;
public cardSettings: CardSettingsModel = {
contentField: 'Summary',
headerField: 'Id'
};
public swimlaneSettings: SwimlaneSettingsModel = {
keyField: 'Assignee',
enableFrozenRows: true
};
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { KanbanModule } from '@syncfusion/ej2-angular-kanban';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
KanbanModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }export let kanbanData: Object[] = [
{
Id: 1,
Status: 'Open',
Summary: 'Analyze the new requirements gathered from the customer.',
Type: 'Story',
Priority: 'Low',
Tags: 'Analyze,Customer',
Estimate: 3.5,
Assignee: 'Nancy Davloio',
RankId: 1
},
{
Id: 2,
Status: 'InProgress',
Summary: 'Improve application performance',
Type: 'Improvement',
Priority: 'Normal',
Tags: 'Improvement',
Estimate: 6,
Assignee: 'Andrew Fuller',
RankId: 1
},
{
Id: 3,
Status: 'Open',
Summary: 'Arrange a web meeting with the customer to get new requirements.',
Type: 'Others',
Priority: 'Critical',
Tags: 'Meeting',
Estimate: 5.5,
Assignee: 'Janet Leverling',
RankId: 2
},
{
Id: 4,
Status: 'InProgress',
Summary: 'Fix the issues reported in the IE browser.',
Type: 'Bug',
Priority: 'Release Breaker',
Tags: 'IE',
Estimate: 2.5,
Assignee: 'Janet Leverling',
RankId: 2
},
{
Id: 5,
Status: 'Testing',
Summary: 'Fix the issues reported by the customer.',
Type: 'Bug',
Priority: 'Low',
Tags: 'Customer',
Estimate: '3.5',
Assignee: 'Steven walker',
RankId: 1
},
{
Id: 6,
Status: 'Close',
Summary: 'Arrange a web meeting with the customer to get the login page requirements.',
Type: 'Others',
Priority: 'Low',
Tags: 'Meeting',
Estimate: 2,
Assignee: 'Michael Suyama',
RankId: 1
},
{
Id: 7,
Status: 'Validate',
Summary: 'Validate new requirements',
Type: 'Improvement',
Priority: 'Low',
Tags: 'Validation',
Estimate: 1.5,
Assignee: 'Robert King',
RankId: 1
},
{
Id: 8,
Status: 'Close',
Summary: 'Login page validation',
Type: 'Story',
Priority: 'Release Breaker',
Tags: 'Validation,Fix',
Estimate: 2.5,
Assignee: 'Laura Callahan',
RankId: 2
},
{
Id: 9,
Status: 'Testing',
Summary: 'Fix the issues reported in Safari browser.',
Type: 'Bug',
Priority: 'Release Breaker',
Tags: 'Fix,Safari',
Estimate: 1.5,
Assignee: 'Nancy Davloio',
RankId: 2
},
{
Id: 10,
Status: 'Close',
Summary: 'Test the application in the IE browser.',
Type: 'Story',
Priority: 'Low',
Tags: 'Testing,IE',
Estimate: 5.5,
Assignee: 'Margaret hamilt',
RankId: 3
},
{
Id: 11,
Status: 'Validate',
Summary: 'Validate the issues reported by the customer.',
Type: 'Story',
Priority: 'High',
Tags: 'Validation,Fix',
Estimate: 1,
Assignee: 'Steven walker',
RankId: 1
},
{
Id: 12,
Status: 'Testing',
Summary: 'Check Login page validation.',
Type: 'Story',
Priority: 'Release Breaker',
Tags: 'Testing',
Estimate: 0.5,
Assignee: 'Michael Suyama',
RankId: 3
},
{
Id: 13,
Status: 'Open',
Summary: 'API improvements.',
Type: 'Improvement',
Priority: 'High',
Tags: 'Grid,API',
Estimate: 3.5,
Assignee: 'Robert King',
RankId: 3
},
{
Id: 14,
Status: 'InProgress',
Summary: 'Add responsive support to application',
Type: 'Epic',
Priority: 'Critical',
Tags: 'Responsive',
Estimate: 6,
Assignee: 'Laura Callahan',
RankId: 3
},
{
Id: 15,
Status: 'Open',
Summary: 'Show the retrieved data from the server in grid control.',
Type: 'Story',
Priority: 'High',
Tags: 'Database,SQL',
Estimate: 5.5,
Assignee: 'Margaret hamilt',
RankId: 4
},
{
Id: 16,
Status: 'InProgress',
Summary: 'Fix cannot open user’s default database SQL error.',
Priority: 'Critical',
Type: 'Bug',
Tags: 'Database,Sql2008',
Estimate: 2.5,
Assignee: 'Janet Leverling',
RankId: 4
},
{
Id: 17,
Status: 'Testing',
Summary: 'Fix the issues reported in data binding.',
Type: 'Story',
Priority: 'Normal',
Tags: 'Databinding',
Estimate: '3.5',
Assignee: 'Janet Leverling',
RankId: 4
},
{
Id: 18,
Status: 'Close',
Summary: 'Analyze SQL server 2008 connection.',
Type: 'Story',
Priority: 'Release Breaker',
Tags: 'Grid,Sql',
Estimate: 2,
Assignee: 'Andrew Fuller',
RankId: 4
},
{
Id: 19,
Status: 'Validate',
Summary: 'Validate databinding issues.',
Type: 'Story',
Priority: 'Low',
Tags: 'Validation',
Estimate: 1.5,
Assignee: 'Margaret hamilt',
RankId: 1
},
{
Id: 20,
Status: 'Close',
Summary: 'Analyze grid control.',
Type: 'Story',
Priority: 'High',
Tags: 'Analyze',
Estimate: 2.5,
Assignee: 'Margaret hamilt',
RankId: 5
},
{
Id: 21,
Status: 'Close',
Summary: 'Stored procedure for initial data binding of the grid.',
Type: 'Others',
Priority: 'Release Breaker',
Tags: 'Databinding',
Estimate: 1.5,
Assignee: 'Steven walker',
RankId: 6
},
{
Id: 22,
Status: 'Close',
Summary: 'Analyze stored procedures.',
Type: 'Story',
Priority: 'Release Breaker',
Tags: 'Procedures',
Estimate: 5.5,
Assignee: 'Janet Leverling',
RankId: 7
},
{
Id: 23,
Status: 'Validate',
Summary: 'Validate editing issues.',
Type: 'Story',
Priority: 'Critical',
Tags: 'Editing',
Estimate: 1,
Assignee: 'Nancy Davloio',
RankId: 1
},
{
Id: 24,
Status: 'Testing',
Summary: 'Test editing functionality.',
Type: 'Story',
Priority: 'Normal',
Tags: 'Editing,Test',
Estimate: 0.5,
Assignee: 'Nancy Davloio',
RankId: 5
},
{
Id: 25,
Status: 'Open',
Summary: 'Enhance editing functionality.',
Type: 'Improvement',
Priority: 'Low',
Tags: 'Editing',
Estimate: 3.5,
Assignee: 'Andrew Fuller',
RankId: 5
}
];import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);