The Kanban uses DataManager
, which supports both RESTful data service binding and JavaScript object array binding. The dataSource
property of Kanban can be assigned either with the instance of DataManager
or JavaScript object array collection, as it supports the following two data binding methods:
To bind local JSON data to the Kanban, you can simply assign a JavaScript object array to the dataSource
property. The JSON object dataSource can also be provided as an instance of DataManager
and assigned to the Kanban dataSource
property.
import { Component } from '@angular/core';
import { CardSettingsModel } from '@syncfusion/ej2-angular-kanban';
import { kanbanData } from './datasource';
@Component({
selector: 'app-root',
template: `<ejs-kanban keyField='Status' [dataSource]='data' [cardSettings]='cardSettings'>
<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'
};
}
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,
DataManager
usesJsonAdaptor
for binding local data.
To bind remote data to kanban component, assign service data as an instance of DataManager
to the dataSource
property. To interact with remote data source, provide the endpoint url.
import { Component } from '@angular/core';
import { CardSettingsModel, DialogEventArgs } from '@syncfusion/ej2-angular-kanban';
import { DataManager, ODataAdaptor } from '@syncfusion/ej2-data';
@Component({
selector: 'app-root',
template: `<ejs-kanban keyField='Status' [dataSource]='dataManager' [cardSettings]='cardSettings' [allowDragAndDrop]='false' (dialogOpen)="dialogOpen($event)">
<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 cardSettings: CardSettingsModel = {
contentField: 'Summary',
headerField: 'Id'
};
private dataManager: DataManager = new DataManager({
url: 'https://ej2services.syncfusion.com/production/web-services/api/Kanban',
adaptor: new ODataAdaptor,
crossDomain: true
});
public dialogOpen(args: DialogEventArgs): void {
args.cancel = 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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
By default,
DataManager
uses ODataAdaptor for remote data-binding.
OData
is a standardized protocol for creating and consuming data. You can retrieve data from OData service using the DataManager. Refer to the following code example for remote Data binding using OData service.
import { Component } from '@angular/core';
import { CardSettingsModel, DialogEventArgs } from '@syncfusion/ej2-angular-kanban';
import { DataManager, ODataAdaptor } from '@syncfusion/ej2-data';
@Component({
selector: 'app-root',
template: `<ejs-kanban keyField='Status' [dataSource]='dataManager' [cardSettings]='cardSettings' [allowDragAndDrop]='false' (dialogOpen)="dialogOpen($event)">
<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 cardSettings: CardSettingsModel = {
contentField: 'Summary',
headerField: 'Id'
};
private dataManager: DataManager = new DataManager({
url: 'https://ej2services.syncfusion.com/production/web-services/api/Kanban',
adaptor: new ODataAdaptor,
crossDomain: true
});
public dialogOpen(args: DialogEventArgs): void {
args.cancel = 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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
The ODataV4 is an improved version of OData protocols, and the DataManager
can also retrieve and consume OData v4 services. For more details on OData v4 services, refer to the odata documentation
. To bind OData v4 service, use the ODataV4Adaptor.
import { Component } from '@angular/core';
import { CardSettingsModel, DialogEventArgs } from '@syncfusion/ej2-angular-kanban';
import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
@Component({
selector: 'app-root',
template: `<ejs-kanban keyField='ContactTitle' [dataSource]='dataManager' [cardSettings]='cardSettings' [allowDragAndDrop]='false' (dialogOpen)="dialogOpen($event)">
<e-columns>
<e-column headerText='Order Administrator' keyField='Order Administrator'></e-column>
<e-column headerText='Sales Representative' keyField='Sales Representative'></e-column>
<e-column headerText='Export Administrator' keyField='Export Administrator'></e-column>
</e-columns>
</ejs-kanban>`
})
export class AppComponent {
public cardSettings: CardSettingsModel = {
contentField: 'ContactName',
headerField: 'SupplierID'
};
private dataManager: DataManager = new DataManager({
url: 'https://services.odata.org/v4/northwind/northwind.svc/Suppliers',
adaptor: new ODataV4Adaptor,
});
public dialogOpen(args: DialogEventArgs): void {
args.cancel = 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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
You can use WebApiAdaptor to bind kanban with Web API created using OData endpoint.
import { Component } from '@angular/core';
import { CardSettingsModel, DialogEventArgs } from '@syncfusion/ej2-angular-kanban';
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
@Component({
selector: 'app-root',
template: `<ejs-kanban keyField='Status' [dataSource]='dataManager' [cardSettings]='cardSettings' [allowDragAndDrop]='false' (dialogOpen)="dialogOpen($event)">
<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 cardSettings: CardSettingsModel = {
contentField: 'Summary',
headerField: 'Id'
};
private dataManager: DataManager = new DataManager({
url: '/api/Tasks',
adaptor: new WebApiAdaptor
});
public dialogOpen(args: DialogEventArgs): void {
args.cancel = true;
}
}
Below server-side controller code to get the Kanban data.
[HttpGet]
public object Get()
{
var data = OrdersDetails.GetAllRecords().ToList();
return data;
}
The CRUD (Create, Read, Update and Delete) actions can be performed easily on Kanban cards using the various adaptors available within the DataManager
. Most preferably, we will be using UrlAdaptor
for performing CRUD actions on Kanban.
The CRUD operation in Kanban can be mapped to server-side controller actions using the properties insertUrl
, removeUrl
, updateUrl
, and crudUrl
.
insertUrl
– You can perform a single insertion operation on the server-side.updateUrl
– You can update single data on the server-side.removeUrl
– You can remove single data on the server-side.crudUrl
– You can perform bulk data operation on the server-side.import { Component } from '@angular/core';
import { CardSettingsModel } from '@syncfusion/ej2-angular-kanban';
import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';
@Component({
selector: 'app-root',
template: `<ejs-kanban keyField='Status' [dataSource]='dataManager' [cardSettings]='cardSettings'>
<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 cardSettings: CardSettingsModel = {
contentField: 'Summary',
headerField: 'Id'
};
private dataManager: DataManager = new DataManager({
url: 'Home/DataSource',
updateUrl: 'Home/Update',
insertUrl: 'Home/Insert',
removeUrl: 'Home/Delete',
adaptor: new UrlAdaptor(),
crossDomain: true
});
}
The server-side controller code to handle the CRUD operations are as follows.
private NORTHWNDEntities db = new NORTHWNDEntities();
public ActionResult DataSource() {
var DataSource = db.Tasks.ToList();
return Json(DataSource, JsonRequestBehavior.AllowGet);
}
public ActionResult Insert(Params value) {
//Insert card data into the database
return Json(value, JsonRequestBehavior.AllowGet);
}
public ActionResult Update(Params value) {
//Update card data into the database
return Json(value, JsonRequestBehavior.AllowGet);
}
public void Delete(Params value) {
//Delete card data from the database
}
public class Params {
public int Id { get; set; }
public string Status { get; set; }
public string Summary { get; set; }
public string Assignee { get; set; }
}
It is possible to create your own custom adaptor by extending the built-in available adaptors. The following example demonstrates the custom adaptor usage and how to add a custom field TaskId
for the cards by overriding the built-in response processing using the processResponse
method of the ODataAdaptor
.
import { Component } from '@angular/core';
import { CardSettingsModel, DialogEventArgs } from '@syncfusion/ej2-angular-kanban';
import { DataManager, ODataAdaptor } from '@syncfusion/ej2-data';
class TaskIdAdaptor extends ODataAdaptor {
processResponse() {
let i = 0;
// calling base class processResponse function
let original = super.processResponse.apply(this, arguments);
// adding Task Id
original.forEach((item) => item['Id'] = 'Task - ' + ++i);
return original;
}
}
@Component({
selector: 'app-root',
template: `<ejs-kanban keyField='Status' [dataSource]='dataManager' [cardSettings]='cardSettings' [allowDragAndDrop]='false' (dialogOpen)="dialogOpen($event)">
<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 cardSettings: CardSettingsModel = {
contentField: 'Summary',
headerField: 'Id'
};
private dataManager: DataManager = new DataManager({
url: 'https://ej2services.syncfusion.com/production/web-services/api/Kanban',
adaptor: new TaskIdAdaptor
});
public dialogOpen(args: DialogEventArgs): void {
args.cancel = 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);
To add a custom parameter to the data request, use the addParams method of Query class. Assign the Query object with additional parameters to the kanban query
property.
import { Component } from '@angular/core';
import { CardSettingsModel, DialogEventArgs } from '@syncfusion/ej2-angular-kanban';
import { DataManager, ODataAdaptor, Query } from '@syncfusion/ej2-data';
@Component({
selector: 'app-root',
template: `<ejs-kanban keyField='Status' [dataSource]='dataManager' [cardSettings]='cardSettings' [allowDragAndDrop]='false' (dialogOpen)="dialogOpen($event)" [query]='query'>
<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 cardSettings: CardSettingsModel = {
contentField: 'Summary',
headerField: 'Id'
};
private dataManager: DataManager = new DataManager({
url: 'https://ej2services.syncfusion.com/production/web-services/api/Kanban',
adaptor: new ODataAdaptor
});
public query: Query = new Query().addParams('ej2kanban', 'true');
public dialogOpen(args: DialogEventArgs): void {
args.cancel = 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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
The parameters added using the
query
property will be sent along with the data request for every kanban action.
During server interaction from the kanban, some server-side exceptions may occur, and you can acquire those error messages or exception details
in client-side using the actionFailure
event.
The argument passed to the actionFailure
event contains the error details returned from the server.
import { Component, ViewChild } from '@angular/core';
import { CardSettingsModel } from '@syncfusion/ej2-angular-kanban';
import { DataManager } from '@syncfusion/ej2-data';
@Component({
selector: 'app-root',
template: `<ejs-kanban #Kanban keyField='Status' [dataSource]='dataManager' [cardSettings]='cardSettings' (actionFailure)="onActionFailure($event)">
<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 {
@ViewChild('Kanban') public kanban: KanbanComponent;
public cardSettings: CardSettingsModel = {
contentField: 'Summary',
headerField: 'Id'
};
private dataManager: DataManager = new DataManager({
url: 'http://some.com/invalidUrl'
});
onActionFailure(e: Error): void {
let span: HTMLElement = document.createElement('span');
this.kanban.element.parentNode.insertBefore(span, this.kanban.element);
span.style.color = '#FF0000'
span.innerHTML = 'Server exception: 404 Not found';
}
}
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);
The
actionFailure
event will be triggered not only for the server errors, but also when there is an exception while processing the kanban actions.
You can use Kanban dataSource
property to bind the datasource to Kanban from external ajax request. In the following code, we have fetched the datasource from the server using ajax request and provided that to the dataSource
property by using the onSuccess event of ajax.
import { Component, ViewChild } from '@angular/core';
import { KanbanComponent, CardSettingsModel, DialogEventArgs } from '@syncfusion/ej2-angular-kanban';
import { Ajax } from '@syncfusion/ej2-base';
@Component({
selector: 'app-root',
template: `<input type="button" id="btn" (click)="click()" value="Click"/>
<ejs-kanban #Kanban keyField='ShipCountry' [dataSource]='dataManager' [cardSettings]='cardSettings' (actionFailure)="onActionFailure($event)">
<e-columns>
<e-column headerText='Denmark' keyField='Denmark'></e-column>
<e-column headerText='Brazil' keyField='Brazil'></e-column>
<e-column headerText='Switzerland' keyField='Switzerland'></e-column>
<e-column headerText='Germany' keyField='Germany'></e-column>
</e-columns>
</ejs-kanban>`
})
export class AppComponent {
@ViewChild('Kanban') public kanban: KanbanComponent;
public cardSettings: CardSettingsModel = {
contentField: 'ShippedDate',
headerField: 'OrderID'
};
click() {
const kanban = this.kanban; // Grid instance
const ajax = new Ajax("https://ej2services.syncfusion.com/production/web-services/api/Orders", "GET");
ajax.send();
ajax.onSuccess = (data: string) => {
kanban.dataSource = JSON.parse(data);
};
}
}
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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
- If you bind the dataSource from this way, then it acts like a local dataSource. So you cannot perform any server-side crud actions.