Angular
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Migration from Essential JS 1 in Angular Kanban component

22 Oct 2021 / 17 minutes to read

This article describes the API migration process of Kanban component from Essential JS 1 to Essential JS 2.

Columns

Behavior API in Essential JS 1 API in Essential JS 2
Default Property : columns

<ej-kanban><e-kanban-columns>
</e-kanban-columns></ej-kanban>		 Property : columns

<ejs-kanban><e-columns>
</e-columns></ejs-kanban>
Header Text Property : headerText

<ej-kanban><e-kanban-columns>
<e-kanban-column headerText="Backlog">
</e-kanban-column>		 Property : headerText

<ejs-kanban><e-columns>
<e-column headerText='To do'>
</e-column>
</e-columns></ejs-kanban>
Key Field Property : key

<ej-kanban><e-kanban-columns>
<e-kanban-column key="Open">
</e-kanban-column>
</e-kanban-columns>
</ej-kanban>		 Property: keyField

<ejs-kanban><e-columns>
<e-column keyField='Open'>
</e-column>
</e-columns></ejs-kanban>
Initial Collapsed
Columns		 Property: isCollapsed

<ej-kanban>
<e-kanban-columns>
<e-kanban-column key="Open"
headerText="Backlog"
[isCollapsed]="true">
</e-kanban-column>
</e-kanban-columns>
</ej-kanban>
 Property: isExpanded

<ejs-kanban>
<e-columns>
<e-column headerText='To do'
keyField='Open'
allowToggle='true'
[isExpanded]='true'>
</e-column>
</e-columns>
</ejs-kanban>
Cell Add card button Property: showAddButton

<ej-kanban>
<e-kanban-columns>
<e-kanban-column key="Open"
headerText="Backlog"
[showAddButton]="true">
</e-kanban-column>
</e-kanban-columns>
</ej-kanban>
 Property: showAddButton

<ejs-kanban>
<e-columns>
<e-column headerText='To do'
keyField='Open'
[showAddButton]='true'>
</e-column>
</e-columns>
</ejs-kanban>
Column card count Property: enableTotalCount

<ej-kanban [enableTotalCount]="true">
</ej-kanban>
 Property: showItemCount

<ejs-kanban>
<e-columns>
<e-column headerText='To do'
keyField='Open'
[showItemCount]='true'>
</e-column>
</e-columns>
</ejs-kanban>
Template Property: headerTemplate

<ej-kanban>
<e-kanban-columns>
<e-kanban-column key="Open"
headerText="Backlog"
headerTemplate="#template">
</e-kanban-column>
</e-kanban-columns>
</ej-kanban>
 Property: template

<ejs-kanban>
<e-columns>
<e-column headerText='To do'
keyField='Open'
template='#headerTemplate'>
</e-column>
</e-columns>
</ejs-kanban>
Allow Drop Property: allowDrop

<ej-kanban>
<e-kanban-columns>
<e-kanban-column key="Open"
headerText="Backlog"
[allowDrop]="false">
</e-kanban-column>
</e-kanban-columns>
</ej-kanban>		 Property: allowDrop

<ejs-kanban>
<e-columns>
<e-column headerText='To do'
keyField='Open'
[allowDrop]="false">
</e-column>
</e-columns>
</ejs-kanban>
Allow Drag Property: allowDrag

<ej-kanban>
<e-kanban-columns>
<e-kanban-column key="Open"
headerText="Backlog"
[allowDrag]="false">
</e-kanban-column>
</e-kanban-columns>
</ej-kanban>		 Property: allowDrag

<ejs-kanban>
<e-columns>
<e-column headerText='To do'
keyField='Open'
[allowDrag]="false">
</e-column>
</e-columns>
</ejs-kanban>
Total Count text Property: totalCount


<ej-kanban>
<e-kanban-columns>
<e-kanban-column key="Open"
headerText="Backlog"
[totalCount]="totalcount">
</e-kanban-column>
</e-kanban-columns>
</ej-kanban>
TS
export class AppComponent {
constructor() {
this.totalcount =
{ text: “Backlog Count” };
}
}		 Not Available
Width Property: width

<ej-kanban>
<e-kanban-columns>
<e-kanban-column key="Open"
headerText="Backlog"
width="200">
</e-kanban-column>
</e-kanban-columns>
</ej-kanban>
 Not Available
Visible Property: visible

<ej-kanban>
<e-kanban-columns>
<e-kanban-column
headerText="Backlog"
key="Open"
[visible]="false">
</e-kanban-column>
</e-kanban-columns>
</ej-kanban>
 Not Available
Add/Delete Columns Method: columns(column, key,
[action])

Add :
<ej-kanban #kanbanObj>
</ej-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.columns
(“Review”, “Review”, “add”);

Delete:
kanbanObj.columns
(“Review”, “Review”, “remove”);
 Method: addColumn(columnOptions,
index)

<ejs-kanban #kanbanObj>
</ejs-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.addColumn({
headerText: “Review”,
keyField: “Review”
}, 2);

Method: deleteColumn(index)

kanbanObj.deleteColumn(2);
Show Columns Method: showColumns(headerText)

<ej-kanban #kanbanObj>
</ej-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.
showColumns(“Testing”);		 Method: showColumn(key)

<ejs-kanban #kanbanObj>
</ejs-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.showColumn
(“Testing”);
Hide Columns Method: hideColumns(headerText)

<ej-kanban #kanbanObj>
</ej-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.
hideColumns(“Testing”);		 Method: hideColumns(key)

<ejs-kanban #kanbanObj>
</ejs-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.hideColumn
(“Testing”);
Get Visible
Column Names		 Method: getVisibleColumnNames()

<ej-kanban #kanbanObj>
</ej-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.
getVisibleColumnNames();		 Not Applicable
Get Column
By Header Text		 Method: getColumnByHeaderText
(headerText)

<ej-kanban #kanbanObj>
</ej-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.
getColumnByHeaderText
(“Testing”);		 Not Applicable
Get Column Data Not Applicable Method: getColumnData()

<ejs-kanban #kanbanObj>
</ejs-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.getColumnData();
Triggers after
cell is click		 Event: cellClick

<ej-kanban #kanbanObj (cellClick)="cellClick($event)">
</ej-kanban>
TS
cellClick(event) {}		 Not Applicable

Cards

Behavior API in Essential JS 1 API in Essential JS 2
Card unique field Property :
fields.primaryKey

<ej-kanban fields.primaryKey="Id">
</ej-kanban>
 Property :
cardSettings.headerField
<ejs-kanban
[cardSettings]='cardSettings'>
<ejs-kanban>
TS
public cardSettings:
CardSettingsModel = {
headerField: ‘Id’
};
Content Property:
fields.content

<ej-kanban fields.content="Summary">
</ej-kanban>
 Property :
cardSettings.contentField
<ejs-kanban
[cardSettings]='cardSettings'>
<ejs-kanban>
TS
public cardSettings:
CardSettingsModel = {
contentField: ‘Summary’
};
Tag Property:
fields.tag

<ej-kanban fields.tag="Tags">
</ej-kanban>
 Property :
cardSettings.tagsField
<ejs-kanban
[cardSettings]='cardSettings'>
<ejs-kanban>
TS
public cardSettings:
CardSettingsModel = {
tagsField: ‘Tags’};
Left border color Property:
fields.color

<ej-kanban fields.color="Type"
[cardSettings.colorMapping]
="color">
</ej-kanban>
TS
export class AppComponent {
color = {
“#cb2027”: “Bug,Story”,
“#67ab47”: “Improvement”,
“#fbae19”: “Epic”,
“#6a5da8”: “Others”
};
}
 Property:
cardSettings.grabberField
<ejs-kanban
[cardSettings]='cardSettings'>
<ejs-kanban>
TS
public cardSettings:
CardSettingsModel = {
grabberField: “color”
};
Header Property:
fields.title

<ej-kanban fields.title="Assignee">
</ej-kanban>
 Card Unique mapping
field is displayed
on card header.
Image Property:
fields.imageUrl

<ej-kanban fields.imageUrl="ImgUrl">
</ej-kanban>
 Not Applicable
CSS class Not Applicable Property :
cardSettings.
footerCssField

<ejs-kanban
[cardSettings]='cardSettings'>
<ejs-kanban>
TS
public cardSettings:
CardSettingsModel = {
footerCssField: “classNames”
};
Template Property:
cardSettings.template

<ej-kanban cardSettings.template="#template">
</ej-kanban>
 Property:
cardSettings.template

<ejs-kanban
[cardSettings]='cardSettings'>
<ejs-kanban>
TS
public cardSettings:
CardSettingsModel = {
template: “#cardTemplate”
};
Toggle Card Method: toggleCard
($div or id)

<ej-kanban #kanbanObj>
</ej-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.
toggleCard(“2”);
 Not Applicable
Get Card Details Not Applicable Method:
getCardDetails(target)

<ejs-kanban #kanbanObj>
</ejs-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.getCardDetails(
obj.element
.querySelector(“.e-card”));
Get Selected Cards Not Applicable Method:
getSelectedCards()

<ejs-kanban #kanbanObj>
</ejs-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.getSelectedCards();
Card Click Event: cardClick

<ej-kanban #kanbanObj
(cardClick)="cardClick($event)">
</ej-kanban>
TS
cardClick(event) {}		 Event: cardClick

<ejs-kanban #kanbanObj
(cardClick)="cardClick($event)">
</ejs-kanban>
TS
cardClick(event) {}
Card Double Click Event: cardDoubleClick

<ej-kanban #kanbanObj
(cardDoubleClick)
="cardDoubleClick($event)">
</ej-kanban>
TS
cardDoubleClick(event) {}		 Event: cardDoubleClick

<ejs-kanban #kanbanObj
(cardDoubleClick)=
"cardDoubleClick($event)">
</ejs-kanban>
TS
cardDoubleClick(event) {}
Triggers when start
the drag		 Event: cardDragStart

<ej-kanban #kanbanObj
(cardDragStart)="cardDragStart($event)">
</ej-kanban>
TS
cardDragStart(event) {}		 Event: dragStart

<ejs-kanban #kanbanObj
(dragStart)="dragStart($event)">
</ejs-kanban>
TS
dragStart(event) {}
Triggers when card
is dragged		 Event: cardDrag

<ej-kanban #kanbanObj
(cardDrag)="cardDrag($event)">
</ej-kanban>
TS
cardDrag(event) {}		 Event: drag

<ejs-kanban #kanbanObj
(drag)="drag($event)">
</ejs-kanban>
TS
drag(event) {}
Triggers when card
dragging stops		 Event: cardDragStop

<ej-kanban #kanbanObj
(cardDragStop)=
"cardDragStop($event)">
</ej-kanban>
TS
cardDragStop(event) {}		 Event: dragStop

<ejs-kanban #kanbanObj
(dragStop)="dragStop($event)">
</ejs-kanban>
TS
dragStop(event) {}
Triggers after save
the data when dropped		 Event: cardDrop

<ej-kanban #kanbanObj
(cardDrop)="cardDrop($event)">
</ej-kanban>
TS
cardDrop(event) {}		 Not Applicable
Triggers after
cell is click		 Event: cellClick

<ej-kanban #kanbanObj
(cellClick)="cellClick($event)">
</ej-kanban>
TS
cellClick(event) {}		 Not Applicable
Triggers each
card rendered		 Event: queryCellInfo

<ej-kanban #kanbanObj
(queryCellInfo)=
"queryCellInfo($event)">
</ej-kanban>
TS
queryCellInfo(event) {}		 Event: cardRendered

<ejs-kanban #kanbanObj
(cardRendered)=
"cardRendered($event)">
</ejs-kanban>
TS
cardRendered(event) {}

DataSource

Behavior API in Essential JS 1 API in Essential JS 2
Card unique field Property :
fields.primaryKey

<ej-kanban fields.primaryKey="Id">
</ej-kanban>
 Property :
cardSettings.headerField
<ejs-kanban
[cardSettings]='cardSettings'>
<ejs-kanban>
TS
public cardSettings:
CardSettingsModel = {
headerField: ‘Id’
};
DataSource Property: dataSource

<ej-kanban
[dataSource]="kanbanData">
</ej-kanban>
TS
export class AppComponent {
public kanbanData: any;
constructor() {
this.kanbanData = [];
}
Method:
dataSource(datasource)
<ej-kanban #kanbanObj>
</ej-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.
dataSource
(newDataSource);		 Property: dataSource

<ejs-kanban
[dataSource]="kanbanData">
</ejs-kanban>
TS
public kanbanData:
Object[] = extend([],
kanbanData, null, true)
as Object[];

Method:
dataSource(datasource)

<ejs-kanban #kanbanObj>
</ejs-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.dataSource(newDataSource);
Triggers before
data load		 Event: load

<ej-kanban #kanbanObj
(load)="load($event)">
</ej-kanban>
TS
load(event) {}		 Event: dataBinding

<ejs-kanban #kanbanObj
(dataBinding)="dataBinding($event)">
</ejs-kanban>
TS
dataBinding(event) {}
Triggers after
data bounded		 Event: dataBound

<ej-kanban #kanbanObj
(dataBound)="dataBound($event)">
</ej-kanban>
TS
dataBound(event) {}
Event: dataBound

<ejs-kanban #kanbanObj
(dataBound)="dataBound($event)">
</ejs-kanban>
TS
dataBound(event) {}

Common

Behavior API in Essential JS 1 API in Essential JS 2
Drag And Drop Property: allowDragAndDrop

<ej-kanban
[allowDragAndDrop]="true">
</ej-kanban>		 Property: allowDragAndDrop

<ejs-kanban
[allowDragAndDrop]= true>
</ejs-kanban>
Key Field Property: keyField

<ej-kanban
keyField="Status">
</ej-kanban>		 Property : keyField

<ejs-kanban
keyField="Status">
</ejs-kanban>
Title Property: allowTitle

<ej-kanban
[allowTitle]="true">
</ej-kanban>		 Not Applicable
CssClass Property: cssClass

<ej-kanban
cssClass="gradient-green">
</ej-kanban>		 Property: cssClass

<ejs-kanban
cssClass= "custom-class">
</ejs-kanban>
Print Property: allowPrinting

<ej-kanban
[allowPrinting]="true">
</ej-kanban>

Method: print()

<ej-kanban #kanbanObj>
</ej-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.
print();		 Not Applicable
Touch Property: enableTouch

<ej-kanban
[enableTouch]="true">
</ej-kanban>		 Not Applicable
Locale Property: locale

<ej-kanban
locale="de-DE">
</ej-kanban>		 Property: locale

<ejs-kanban locale="de-DE">
</ejs-kanban>
Query Property: query

<ej-kanban
[query]="query">
</ej-kanban>
TS
export class AppComponent {
constructor() {
this.query =
ej.Query().select("")});
}
 Property : query

<ejs-kanban [query]="query">
</ejs-kanban>
TS
public query=
new Query().select("")});
Refresh Method:
refresh([templateRefresh])

<ej-kanban #kanbanObj>
</ej-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.
refresh();		 Method: refresh()

<ejs-kanban #kanbanObj>
</ejs-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.refresh();
Refresh Template Method:
refreshTemplate()

<ej-kanban #kanbanObj>
</ej-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.
refreshTemplate();		 Not Applicable
Destroy Method: destroy()

<ej-kanban #kanbanObj>
</ej-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.
destroy();		 Method: destroy()
<ejs-kanban #kanbanObj>
</ejs-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.destroy();
Get Header Table Method: getHeaderTable()

<ej-kanban #kanbanObj>
</ej-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.
getHeaderTable();		 Not Applicable
Show Spinner Not Applicable Method: showSpinner()

<ejs-kanban #kanbanObj>
</ejs-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.showSpinner();
Hide Spinner Not Applicable Method: hideSpinner()

<ejs-kanban #kanbanObj>
</ejs-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.hideSpinner();
Triggers before
every action		 Event: actionBegin

<ej-kanban #kanbanObj
(actionBegin)=
"actionBegin($event)">
</ej-kanban>
TS
actionBegin(event) {}		 Event: actionBegin

<ejs-kanban #kanbanObj
(actionBegin)=
"actionBegin($event)">
</ejs-kanban>
TS
actionBegin(event) {}
Triggers on successfully
completion of actions		 Event: actionComplete

<ej-kanban #kanbanObj
(actionComplete)=
"actionComplete($event)">
</ej-kanban>
TS
actionComplete(event) {}		 Event: actionComplete

<ejs-kanban #kanbanObj
(actionComplete)=
"actionComplete($event)">
</ejs-kanban>
TS
actionComplete(event) {}
Triggers on
action failure		 Event:
actionFailure

<ej-kanban #kanbanObj
(actionFailure)=
"actionFailure($event)">
</ej-kanban>
TS
actionFailure(event) {}		 Event: actionFailure

<ejs-kanban #kanbanObj
(actionFailure)=
"actionFailure($event)">
</ejs-kanban>
TS
actionFailure(event) {}
Triggers after
Kanban rendered		 Event: create

<ej-kanban #kanbanObj
(create)="create($event)">
</ej-kanban>
TS
create(event) {}		 Event: created

<ejs-kanban #kanbanObj
(created)="created($event)">
</ejs-kanban>
TS
created(event) {}
Triggers when
header click		 Event: headerClick

<ej-kanban #kanbanObj
(headerClick)="headerClick($event)">
</ej-kanban>
TS
headerClick(event) {}		 Not Applicable
Triggers when destroy Event: destroy

<ej-kanban #kanbanObj
(destroy)="destroy($event)">
</ej-kanban>
TS
destroy(event) {}		 Event: destroy

<ejs-kanban #kanbanObj
(destroy)="destroy($event)">
</ejs-kanban>
TS
destroy(event) {}

Swimlane

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: swimlaneKey

<ej-kanban
fields.swimlaneKey="Assignee">
</ej-kanban>		 Property: keyField

<ejs-kanban
[swimlaneSettings]='swimlaneSettings'>
</ejs-kanban>
TS
public swimlaneSettings:
SwimlaneSettingsModel =
{ keyField: ‘Assignee’ };
Header Property: headers

<ej-kanban
[headers]="headers">
</ej-kanban>TS
export class AppComponent {
constructor() {
this.headers =
[{
text: “Andrew”,
key: “Andrew Fuller”}];
}
}		 Property: textField

<ejs-kanban
[swimlaneSettings]='swimlaneSettings'>
</ejs-kanban>
TS
public swimlaneSettings:
SwimlaneSettingsModel =
{
textField: “AssigneeName” };
Drag And Drop Property: allowDragAndDrop

<ej-kanban
[swimlaneSettings]="swimlaneSettings">
</ej-kanban>
TS
export class AppComponent {
constructor() {
this.swimlaneSettings =
{ allowDragAndDrop: true }
}
}		 Property: allowDragAndDrop

<ejs-kanban
[swimlaneSettings]='swimlaneSettings'>
</ejs-kanban>
TS
public swimlaneSettings:
SwimlaneSettingsModel =
{
allowDragAndDrop: true };
Card Count Property: showCount

<ej-kanban
[swimlaneSettings]="swimlaneSettings">
</ej-kanban>
TS
export class AppComponent {
constructor() {
this.swimlaneSettings =
{ showCount: true }
}
}		 Property: showItemCount

<ejs-kanban
[swimlaneSettings]='swimlaneSettings'>
</ejs-kanban>
TS
public swimlaneSettings:
SwimlaneSettingsModel =
{
showItemCount: true };
Empty Row Property:
showEmptySwimlane

<ej-kanban
[swimlaneSettings]="swimlaneSettings">
</ej-kanban>
TS
export class AppComponent {
constructor() {
this.swimlaneSettings =
{ showEmptySwimlane: true }
}
}		 Property: showEmptyRow

<ejs-kanban
[swimlaneSettings]='swimlaneSettings'>
</ejs-kanban>
TS
public swimlaneSettings:
SwimlaneSettingsModel =
{
showEmptyRow: true };
Sorting Not Available Property:
sortDirection

<ejs-kanban
[swimlaneSettings]='swimlaneSettings'>
</ejs-kanban>
TS
public swimlaneSettings:
SwimlaneSettingsModel =
{
sortDirection:
“Descending” };
Expand All Method: expandAll()

<ej-kanban #kanbanObj>
</ej-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.
KanbanSwimlane
.expandAll();		 Not Applicable
Collapse All Method: collapseAll()

<ej-kanban #kanbanObj>
</ej-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.
KanbanSwimlane
.collapseAll();		 Not Applicable
Toggle Method: toggle($div or key)

<ej-kanban #kanbanObj>
</ej-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.
KanbanSwimlane
.toggle($(“.e-slexpandcollapse”)
.eq(1));		 Not Applicable
Get Swimlane Data Not Applicable Method:
getSwimlaneData(keyField)

<ejs-kanban #kanbanObj>
</ejs-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.getSwimlaneData(“Janet”);
Triggers before swimlane
icon click event		 Event: swimlaneClick

<ej-kanban #kanbanObj
(swimlaneClick)="swimlaneClick($event)">
</ej-kanban>
TS
swimlaneClick(event) {}		 Not Applicable

Stacked Headers

Behavior API in Essential JS 1 API in Essential JS 2
Multiple stacked headers Property: stackedHeaderColumns

<ej-kanban
[stackedHeaderRows]=
"stackedHeaderRow">
</ej-kanban>
TS
export class AppComponent {
constructor() {
this.stackedHeaderRow =
[{ stackedHeaderColumns: [{
headerText: “Status”,
column: “Backlog,
In Progress, Testing,
Done”}] },
{ stackedHeaderColumns: [{
headerText: “Unresolved”,
column: “Backlog,
In Progress”}]}]}};		 Not Applicable
Single Stacked Header Property: stackedHeaderColumns

<ej-kanban
[stackedHeaderRows]=
"stackedHeaderRow">
</ej-kanban>
TS
export class AppComponent {
constructor() {
this.stackedHeaderRow =
[{ stackedHeaderColumns: [{
headerText: “Status”,
column: “Backlog,
In Progress, Testing,
Done”}] },
{ stackedHeaderColumns: [{
headerText: “Unresolved”,
column: “Backlog,
In Progress”}]}]}};		 Property:
stackedHeaders
<ejs-kanban>
<e-stackedHeaders>
<e-stackedHeader text='To Do'
keyFields='Open, InProgress'>
</e-stackedHeader>
</e-stackedHeaders>
</ejs-kanban>

WIP Validation

Behavior API in Essential JS 1 API in Essential JS 2
Constraints Type Property:
constraints.type

<ej-kanban>
<e-kanban-columns>
<e-kanban-column
headerText="Backlog",
key: "Open",
[constraints]="constraint">
</e-kanban-column>
</ej-kanban>
TS
export class AppComponent {
constraint = { max: ‘2’ };
};		 Property:
constraintType

<ejs-kanban
constraintType="swimlane">
</ejs-kanban>
Maximum card Count
at particular
column/swimlane		 Property:
constraints.max

<ej-kanban>
<e-kanban-columns>
<e-kanban-column
headerText="Backlog",
key: "Open",
[constraints]="constraint">
</e-kanban-column>
</ej-kanban>
TS
export class AppComponent {
constraint = {
type: “swimlane”,
max: 5};
};		 Property:
maxCount

<ejs-kanban>
<e-columns>
<e-column headerText='Backlog'
keyField='Open' maxCount='5'>
</e-column></e-columns>
</ejs-kanban>
Minimum card Count
at particular column		 Property:
constraints.min

<ej-kanban>
<e-kanban-columns>
<e-kanban-column
headerText="Backlog",
key: "Open",
[constraints]="constraint">
</e-kanban-column>
</e-kanban-columns>
</ej-kanban>
TS
export class AppComponent {
constraint = {
type: “swimlane”,
min: 2};
};		 Property: minCount
<ejs-kanban>
<e-columns>
<e-column headerText='Backlog'
keyField='Open' minCount='2'>
</e-column></e-columns>
</ejs-kanban>

Keyboard

Behavior API in Essential JS 1 API in Essential JS 2
KeyBoard Property:
allowKeyboardNavigation

<ej-kanban
[allowKeyboardNavigation]="true">
</ej-kanban>
 Property:
allowKeyboard

<ejs-kanban
[allowKeyboard]="true">
</ejs-kanban>
Settings Property:
keySettings

<ej-kanban [keySettings]='keySettings'>
</ej-kanban>
TS
export class AppComponent {
keySettings = {
focus: “e”,
insertCard: “45”
}
};		 Not Applicable

Toggle Columns

Behavior API in Essential JS 1 API in Essential JS 2
Default Property:
allowToggleColumn

<ej-kanban
[allowToggleColumn]="true">
</ej-kanban>
 Property:
allowToggle

<ejs-kanban>
<e-columns>
<e-column [allowToggle]="true">
</e-column></e-columns>
</ejs-kanban>
Toggle Method: toggleColumn
(headerText or $div)

<ej-kanban #kanbanObj>
</ej-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.
toggleColumn
(“Backlog”);		 Not Applicable

Dialog Editing

Behavior API in Essential JS 1 API in Essential JS 2
Fields Property: editItems

<ej-kanban
[editSettings.editItems]="editItem">
</ej-kanban>
TS
export class AppComponent {
editItem = []
};		 Property: fields

<ejs-kanban
[dialogSettings]='dialogSettings'>

</ejs-kanban>
TS
public dialogSettings:
DialogSettingsModel = {
fields: [] }
Dialog Model Not Available Property: model

<ejs-kanban
[dialogSettings]='dialogSettings'>

</ejs-kanban>
TS
public dialogSettings:
DialogSettingsModel = {
model: {
width: 250 } }
Template Property: dialogTemplate

<ej-kanban
editSettings.dialogTemplate="#template">
</ej-kanban>
 Property: template

<ejs-kanban>
<ng-template
#dialogSettingsTemplate
let-data>
</ng-template>
</ejs-kanban>
Enable Editing Property: allowEditing

<ej-kanban
editSettings.allowEditing="true">
</ej-kanban>
 In default allowed for editing.
Enable Adding Property: allowAdding

<ej-kanban
editSettings.allowAdding="true">
</ej-kanban>
 Adding applicable using column
show add button or
public method.
Edit Mode Property: editMode

<ej-kanban
editSettings.editMode="dialogtemplate">
</ej-kanban>
 Not Applicable
External Form template Property:
externalFormTemplate

<ej-kanban
editSettings.
externalFormTemplate=
"#template">
</ej-kanban>
 Not Applicable
External Form Position Property:
externalFormPosition

<ej-kanban
editSettings.
externalFormPosition
="bottom">
</ej-kanban>
 Not Applicable
Add Card Method:
KanbanEdit.addCard
([primaryKey], [card])

<ej-kanban #kanbanObj>
</ej-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.
KanbanEdit
.addCard(“2”,
{ Id: 2, Status: Open});		 Method:

addCard(cardData)
<ejs-kanban #kanbanObj>
</ejs-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.addCard({ Id: 2,
Status: Open});
Update Card Method: updateCard(key, data)

<ej-kanban #kanbanObj>
</ej-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.
KanbanEdit
.updateCard(2, { Id: 2,
Status: Open});		 Method: updateCard(cardData)

<ejs-kanban #kanbanObj>
</ejs-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.updateCard({ Id: 2,
Status: Open});
Delete Card Method:
KanbanEdit.deleteCard(key)

<ej-kanban #kanbanObj>
</ej-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.
KanbanEdit
.deleteCard(2);		 Method: deleteCard()

<ejs-kanban #kanbanObj>
</ejs-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.deleteCard(2);
Cancel Edit Method:
KanbanEdit.cancelEdit()

<ej-kanban #kanbanObj>
</ej-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.
KanbanEdit
.cancelEdit();		 Not Available
End Edit Method:
KanbanEdit.endEdit()

<ej-kanban #kanbanObj>
</ej-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.
KanbanEdit
.endEdit();		 Not Available
Start Edit Method:
KanbanEdit.startEdit
($div or key)

<ej-kanban #kanbanObj>
</ej-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.
KanbanEdit
.startEdit(2);		 Method:
openDialog(action, data)

<ejs-kanban #kanbanObj>
</ejs-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.openDialog(“Add”);
Set Validation Method: KanbanEdit
.setValidationToField(name, rules)

<ej-kanban #kanbanObj>
</ej-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.
KanbanEdit
.setValidationToField
(“Summary”, { required: true });		 Not Available
Close Dialog Not Applicable Method: closeDialog()
<ejs-kanban #kanbanObj>
</ejs-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.closeDialog();
Triggers before
dialog Open		 Not Applicable Event: dialogOpen

<ejs-kanban #kanbanObj
(dialogOpen)="dialogOpen($event)">
</ejs-kanban>
TS
dialogOpen(event) {}
Triggers when
dialog close		 Not Applicable Event: dialogClose

<ejs-kanban #kanbanObj
(dialogClose)="dialogClose($event)">
</ejs-kanban>
TS
dialogClose(event) {}
Triggers after
the card is edited		 Event: endEdit

<ej-kanban #kanbanObj
(endEdit)="endEdit($event)">
</ej-kanban>
TS
endEdit(event) {}		 Not Applicable
Triggers after
the card is deleted		 Event: endDelete

<ej-kanban #kanbanObj
(endDelete)="endDelete($event)">
</ej-kanban>
TS
endDelete(event) {}		 Not Applicable
Triggers before
task is edited		 Event: beginEdit

<ej-kanban #kanbanObj
(beginEdit)="beginEdit($event)">
</ej-kanban>
TS
beginEdit(event) {}		 Not Applicable

Dialog Editing Fields

Behavior API in Essential JS 1 API in Essential JS 2
Fields Property:
editItems

<ej-kanban
[editSettings.editItems]="editItem">
</ej-kanban>
TS
export class AppComponent {
editItem = []
};		 Property: fields
<ejs-kanban
[dialogSettings]='dialogSettings'>

</ejs-kanban>
TS
public dialogSettings:
DialogSettingsModel = {
fields: [] }
Mapping key Property: field

<ej-kanban
[editSettings.editItems]="editItem">
</ej-kanban>
TS
export class AppComponent {
editItem = [{
field: “Id”}]
};		 Property: key

<ejs-kanban
[dialogSettings]='dialogSettings'>

</ejs-kanban>
TS
public dialogSettings:
DialogSettingsModel = {
fields: [{
key: “Id”}] }
Label Not Applicable Property: text

<ejs-kanban
[dialogSettings]='dialogSettings'>

</ejs-kanban>
TS
public dialogSettings:
DialogSettingsModel = {
fields: [{
text: “ID”,
key: “Id”}] }
Type Property: editType

<ej-kanban
[editSettings.editItems]="editItem">
</ej-kanban>
TS
export class AppComponent {
editItem = [{
editType: ej.Kanban
.EditingType.String}]}]
};		 Property: type

<ejs-kanban
[dialogSettings]='dialogSettings'>

</ejs-kanban>
TS
public dialogSettings:
DialogSettingsModel = {
fields: [{
type: “TextBox”,
key: “Id”}] }
Validation Rules Property: validationRules

<ej-kanban
[editSettings.editItems]="editItem">
</ej-kanban>
TS
export class AppComponent {
editItem = [{
validationRules: {
required: true}
}]};		 Property: validationRules

<ejs-kanban
[dialogSettings]='dialogSettings'>

</ejs-kanban>
TS
public dialogSettings:
DialogSettingsModel = {
fields: [{
validationRules: {
required: true}}] }
Params Property: editParams

<ej-kanban
[editSettings.editItems]="editItem">
</ej-kanban>
TS
export class AppComponent {
editItem = [{
editParams: {
decimalPlaces: 2}
}]};		 Not Applicable
Default value Property: defaultValue

<ej-kanban
[editSettings.editItems]="editItem">
</ej-kanban>
TS
export class AppComponent {
editItem = [{
defaultValue: “Open”
}]};		 Not Applicable

Tooltip

Behavior API in Essential JS 1 API in Essential JS 2
Default Property:
tooltipSettings.enable

<ej-kanban
tooltipSettings.enable="true">
</ej-kanban>
 Property:
enableTooltip

<ejs-kanban [enableTooltip]="true">
</ejs-kanban>
Template Property:
tooltipSettings.template

<ej-kanban
tooltipSettings.template="#tooltipTemplate">
</ej-kanban>
 Property: tooltipTemplate

<ejs-kanban
tooltipTemplate="#tooltipTemplate">
</ejs-kanban>

Context Menu

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: enable

<ej-kanban
contextMenuSettings.enable="true">
</ej-kanban>
 Not Applicable
Menu Items Property: menuItems

<ej-kanban
contextMenuSettings.enable
="true"
[contextmenusettings.
menuitems]="menuItem">
</ej-kanban>
TS
this.menuItem = [“Move Right”];
 Not Applicable
Disable default Items Property: disableDefaultItems

<ej-kanban
contextMenuSettings.enable
="true"
contextmenusettings.
disableDefaultItems=
[ej.Kanban.MenuItem.MoveLeft]>
</ej-kanban>
 Not Applicable
Custom Menu Items Property: customMenuItems

Text:<ej-kanban
contextMenuSettings.enable
="true"
contextmenusettings.
custommenuitems=
"customMenuItems"
</ej-kanban>
TS
export class AppComponent {
this.customMenuItems =
[{ text: “Menu1”
}];

Target:
<ej-kanban
contextMenuSettings.enable
="true"
contextmenusettings.
custommenuitems=
"customMenuItems"
</ej-kanban>
TS
export class AppComponent {
this.customMenuItems =
[{ target: ej.Kanban
.Target.Header
}];

Template:
<ej-kanban
contextMenuSettings.enable
="true"
contextmenusettings.
custommenuitems=
"customMenuItems"
</ej-kanban>
TS
export class AppComponent {
this.customMenuItems =
[{ text: “Hide Column”,
template: “#template”
}];		 Not Applicable
Triggers when context
menu item click		 Event: contextClick
<ej-kanban #kanbanObj
(contextClick)="contextClick($event)">
</ej-kanban>
TS
contextClick(event) {}>		 Not Applicable
Triggers when context
menu open		 Event: contextOpen
<ej-kanban #kanbanObj
(contextOpen)="contextOpen($event)">
</ej-kanban>
TS
contextOpen(event) {}>		 Not Applicable

WorkFlows

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: workFlows

<ej-kanban
[workflows]="workflow">
</ej-kanban>
TS
export class AppComponent {
workflow= [{}]
};		 Not Applicable
Key Property: key

<ej-kanban
[workflows]="workflow">
</ej-kanban>
TS
export class AppComponent {
workFlow= [{
key: “Order”}]
};		 Not Applicable
Allowed Transition Property: allowedTransition

<ej-kanban
[workflows]="workflow">
</ej-kanban>
TS
export class AppComponent {
workFlow= [{
key: “Order”,
allowedTransitions: “Served”
}] };		 Not Applicable

Filtering

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: filterSettings

<ej-kanban
[filterSettings]="filterSetting">
</ej-kanban>
TS
export class AppComponent {
filterSetting= []
};		 Not Applicable
Enable Property: allowFiltering

<ej-kanban
[allowFiltering]="true">
</ej-kanban>		 Not Applicable
Text Property: text

<ej-kanban
[filterSettings]="filterSetting">
</ej-kanban>
TS
export class AppComponent {
filterSetting= [{
text: “Janet Issues”
}]
};		 Not Applicable
Query Property: query

<ej-kanban
[filterSettings]="filterSetting">
</ej-kanban>
TS
export class AppComponent {
filterSetting= [{
query: new ej.Query()
.where(“Assignee”,
“equal”, “Janet”)}]
}]
};		 Not Applicable
Description Property: description

<ej-kanban
[filterSettings]="filterSetting">
</ej-kanban>
TS
export class AppComponent {
filterSetting= [{
description:“Display Issues”
}]
};		 Not Applicable
Filter Cards Method: filterCards(query)

<ej-kanban #kanbanObj>
</ej-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.KanbanFilter
.filterCards(new ej.Query().
where(“Assignee”, “equal”,
“Janet”));		 Not Applicable
Clear Method: clearFilter()

<ej-kanban #kanbanObj>
</ej-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.KanbanFilter
.clearFilter();		 Not Applicable

Searching

Behavior API in Essential JS 1 API in Essential JS 2
Default Property:
searchSettings

<ej-kanban
[searchSettings]="searchSettings">
</ej-kanban>
TS
export class AppComponent {
searchSettings= []
};		 Not Applicable
Enable Property:
allowSearching

<ej-kanban
[allowSearching]="true">
</ej-kanban>
 Not Applicable
Fields Property: fields

<ej-kanban
[searchSettings]="searchSettings">
</ej-kanban>
TS
export class AppComponent {
searchSettings= [{
fields: [“Summary”]}]
};		 Not Applicable
Key Property: key

<ej-kanban
[searchSettings]="searchSettings">
</ej-kanban>
TS
export class AppComponent {
searchSettings= [{
key: “Task 1”}]
};		 Not Applicable
Operator Property: operator

<ej-kanban
[searchSettings]="searchSettings">
</ej-kanban>
TS
export class AppComponent {
searchSettings= [{
operator: “contains”}]
};		 Not Applicable
Ignore Case Property: ignoreCase

<ej-kanban
[searchSettings]="searchSettings">
</ej-kanban>
TS
export class AppComponent {
searchSettings= [{
ignoreCase: true}]
};		 Not Applicable
Search Cards Method:
searchCards(searchString)

<ej-kanban #kanbanObj>
</ej-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.KanbanFilter
.searchCards(“Analyze”);		 Not Applicable
Clear Method: clearSearch()

<ej-kanban #kanbanObj>
</ej-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.KanbanFilter
clearSearch();		 Not Applicable

External Drag And Drop

Behavior API in Essential JS 1 API in Essential JS 2
Default Property:
allowExternalDragAndDrop

<ej-kanban
[allowExternalDragAndDrop]="true">
</ej-kanban>
 Not Applicable
Target Property:
externalDropTarget

<ej-kanban
[cardSettings]="cardSettings">
</ej-kanban>
TS
export class AppComponent {
cardSettings= {
externalDropTarget:
“#DroppedKanban” }
};		 Not Applicable

Scrolling

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: allowScrolling

<ej-kanban
[allowScrolling]="true">
</ej-kanban>
 Not Applicable
height Property: height

<ej-kanban
[allowScrolling]="true" [scrollSettings]="scrollSettings">
</ej-kanban>
TS
export class AppComponent {
scrollSettings= {
height: 400 }
};		 Property: height

<ejs-kanban
height=400>

</ejs-kanban>
width Property: width

<ej-kanban
[allowScrolling]="true" [scrollSettings]="scrollSettings">
</ej-kanban>
TS
export class AppComponent {
scrollSettings= {
width: 400 }
};		 Property: width

<ejs-kanban
width=400>

</ejs-kanban>
Freeze Swimlane Property: allowFreezeSwimlane

<ej-kanban
[allowScrolling]="true" [scrollSettings]="scrollSettings">
</ej-kanban>
TS
export class AppComponent {
scrollSettings= {
allowFreezeSwimlane: true }
};		 Not Applicable
Get Scroll Object Method:
getScrollObject()

<ej-kanban #kanbanObj>
</ej-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.
getScrollObject();		 Not Applicable

Card Selection and Hover

Behavior API in Essential JS 1 API in Essential JS 2
Enable Property: allowSelection

<ej-kanban
[allowSelection]="true">
</ej-kanban>
 Property: cardSettings.
selectionType

<ejs-kanban
[cardSettings]='cardSettings'>
<ejs-kanban>
TS
public cardSettings:
CardSettingsModel = {
selectionType: “Single”
};
Type Property: selectionType

<ej-kanban
selectionType="single">
</ej-kanban>
 It is covered under
selectionType property.
Hover Property: allowHover

<ej-kanban
[allowHover]="true">
</ej-kanban>
 Not Applicable
Clear Method: clear()

<ej-kanban #kanbanObj>
</ej-kanban>
TS
@ViewChild(‘kanbanObj’)
kanbanObj: KanbanComponent;
kanbanObj.KanbanSelection
.clear();		 Not Applicable
Triggers before
card selected		 Event: beforeCardSelect

<ej-kanban #kanbanObj
(beforeCardSelect)=
"beforeCardSelect($event)">
</ej-kanban>
TS
beforeCardSelect(event) {}>

Event: cardSelecting
<ej-kanban #kanbanObj
(cardSelecting)=
"cardSelecting($event)">
</ej-kanban>
TS
cardSelecting(event) {}>		 Not Applicable
Triggers after
card selected		 Event: cardSelect

<ej-kanban #kanbanObj
(cardSelect)=
"cardSelect($event)">
</ej-kanban>
TS
cardSelect(event) {}>		 Not Applicable

Toolbar

Behavior API in Essential JS 1 API in Essential JS 2
Custom Toolbar Property:
customToolbarItems.template

<ej-kanban
[customToolbarItems]="customToolbarItems">
</ej-kanban>
TS
export class AppComponent {
customToolbarItems= {
template: “#Delete”
}
};		 Not Applicable
Triggers toolbar
item click		 Event: toolbarClick

<ej-kanban #kanbanObj
(toolbarClick)="toolbarClick($event)">
</ej-kanban>
TS
toolbarClick(event) {}>		 Not Applicable

Responsive

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: isResponsive

<ej-kanban
[isResponsive]="true">
</ej-kanban>		 Not Applicable
Minimum width Property: minWidth

<ej-kanban
[isResponsive]="true"
minWidth='400'>
</ej-kanban>		 Not Applicable

State Persistence

Behavior API in Essential JS 1 API in Essential JS 2
Persistence Not Applicable Property:
enablePersistence

<ejs-kanban [enablePersistence]="true">
</ejs-kanban>

Right to Left - RTL

Behavior API in Essential JS 1 API in Essential JS 2
default Property: enableRTL

<ej-kanban
[enableRTL]="true">
</ej-kanban>		 Property: enableRtl

<ejs-kanban [enableRtl]="true">
</ejs-kanban>
Previous
Next