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

Migration from Essential JS 1 in JavaScript Kanban control

30 Mar 2023 / 20 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

var kanbanObj = new
ej.Kanban($(“#Kanban”),
{ columns : [] });		 Property : columns

let obj: Kanban = new
Kanban({ columns : [] })
obj.appendTo(“#Kanban”);
Header Text Property : headerText

var kanbanObj = new
ej.Kanban($(“#Kanban”),
{ columns: [{
headerText : “Backlog”}]
});		 Property : headerText

let obj: Kanban = new
Kanban({ columns: [{
headerText : “Backlog”}]
});
obj.appendTo(“#Kanban”);
Key Field Property : key

var kanbanObj = new
ej.Kanban($(“#Kanban”),
{ columns: [{
key : “Open”
}]});		 Property: keyField

let obj: Kanban = new
Kanban({ columns: [{
keyField : “Open”
}] });
obj.appendTo(“#Kanban”);
Initial Collapsed
Columns		 Property: isCollapsed

var kanbanObj = new
ej.Kanban($(“#Kanban”),
{ columns: [{
headerText: “Backlog”,
key: “Open”,
isCollapsed : true
}]});		 Property: isExpanded

let obj: Kanban = new
Kanban({ columns:[{
headerText: “Backlog”,
keyField: “Open”,
isExpanded : true
}] });
obj.appendTo(“#kanban”);
Cell Add card button Property: showAddButton

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
columns: [{
headerText: “Backlog”,
key: “Open”,
showAddButton : true
}] });		 Property: showAddButton

let obj: Kanban = new
Kanban({ columns: [{
headerText: “Backlog”,
keyField: “Open”,
showAddButton : true
}] });
obj.appendTo(“#kanban”);
Column card count Property: enableTotalCount

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
enableTotalCount : true
});		 Property: showItemCount

let obj: Kanban = new
Kanban({ columns: [{
headerText: “Backlog”,
keyField: “Open”,
showItemCount : true
}]});
obj.appendTo(“#kanban”);
Template Property: headerTemplate

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
columns: [{
headerText: “Backlog”,
key: “Open”,
headerTemplate : “#template”
}]});		 Property: template

let obj: Kanban = new
Kanban({ columns: [{
template : #headerTemplate
}]});
obj.appendTo(“#kanban”);
Allow Drop Property: allowDrop

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
columns: [{
headerText: “Backlog”,
key: “Open”,
allowDrop: false
}]});		 Not Available
Allow Drag Property: allowDrag

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
columns: [{
headerText: “Backlog”,
key: “Open”,
allowDrag : false
}]});		 Not Available
Total Count text Property: totalCount

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
enableTotalCount: true,
columns: [{
headerText: “Backlog”,
key: “Open”,
totalCount :
{text: “Backlog Count”}
}]});		 Not Available
Width Property: width

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
enableTotalCount: true,
columns: [{
headerText: “Backlog”,
key: “Open”,
width : 200
}]});		 Not Available
Visible Property: visible

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
enableTotalCount: true,
columns: [{
headerText: “Backlog”,
key: “Open”,
visible : false
}]});		 Not Available
Add/Delete Columns Method: columns(column, key,
[action])

Add :
var kanbanObj =
$(“#Kanban”).data(“ejKanban”);
kanbanObj.columns
(“Review”, “Review”, “add”);

Delete:
var kanbanObj =
$(“#Kanban”).data(“ejKanban”);
kanbanObj.columns
(“Review”, “Review”, “remove”);
 Method: addColumn(columnOptions,
index)

let obj: Kanban = new
Kanban({});
obj.appendTo(“#kanban”);
obj.addColumn({
headerText: “Review”,
keyField: “Review”
}, 2);

Method: deleteColumn(index)

let obj: Kanban = new
Kanban({});
obj.appendTo(“#kanban”);
obj.deleteColumn(2);
Show Columns Method: showColumns(headerText)

var kanbanObj = $(“#Kanban”)
.data(“ejKanban”);
kanbanObj.
showColumns(“Testing”);		 Method: showColumn(key)

let obj: Kanban =
new Kanban({});
obj.appendTo(“#kanban”);
obj.showColumn
(“Testing”);
Hide Column Method: hideColumns(headerText)

var kanbanObj = $(“#Kanban”)
.data(“ejKanban”);
kanbanObj.
hideColumns(“Testing”);		 Method: hideColumn(key)

let obj: Kanban =
new Kanban({});
obj.appendTo(“#kanban”);
obj.hideColumn(“Testing”);
Get Visible
Column Names		 Method: getVisibleColumnNames()

var kanbanObj = $(“#Kanban”)
.data(“ejKanban”);
kanbanObj.
getVisibleColumnNames();		 Not Applicable
Get Column
By Header Text		 Method: getColumnByHeaderText
(headerText)

var kanbanObj = $(“#Kanban”)
.data(“ejKanban”);
kanbanObj.
getColumnByHeaderText
(“Testing”);		 Not Applicable
Get Column Data Not Applicable Method: getColumnData()

let obj: Kanban =
new Kanban({});
obj.appendTo(“#kanban”);
obj.getColumnData();
Triggers after
cell is click		 Event: cellClick

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
cellClick : function (args) {}});		 Not Applicable

Cards

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

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
fields: { primaryKey: “Id”
} });		 Property :
cardSettings.headerField
let obj: Kanban =
new Kanban({
cardSettings: {
headerField: “Id”
} });
obj.appendTo(“#kanban”);
Content Property:
fields.content

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
fields: {
content: “Summary”
}});		 Property:
cardSettings.contentField

let obj: Kanban =
new Kanban({
cardSettings: {
contentField: “Id”
} });
obj.appendTo(“#kanban”)
Tag Property:
fields.tag

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
fields: {
tag: “Tags”
}});		 Property:
cardSettings.tagsField

let obj: Kanban = new Kanban({
cardSettings: {
tagsField: “Tags”
} });
obj.appendTo(“#kanban”);
Left border color Property:
fields.color

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
fields: {
color: “Type”
}, cardSettings: {
colorMapping: {
“#cb2027”: “Issue,Story”,
“#67ab47”: “Improvement”
} }});		 Property:
cardSettings.grabberField
let obj: Kanban = new
Kanban({ cardSettings: {
grabberField: “color”
} });
obj.appendTo(“#kanban”);
Header Property:
fields.title

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
fields: {
title: “Assignee”
}});
 Card Unique mapping
field is displayed
on card header.
Image Property:
fields.imageUrl

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
fields: {
imageUrl: “ImgUrl”
}});		 Not Applicable
CSS class Not Applicable Property :
cardSettings.
footerCssField

let obj: Kanban = new
Kanban({
cardSettings:{
footerCssField:
“classNames”} });
obj.appendTo(“#kanban”);
Template Property:
cardSettings.template
var kanbanObj = new
ej.Kanban($(“#Kanban”), {
cardSettings: {
template: “#cardTemplate”
}});		 Property:
cardSettings.template

let obj: Kanban = new
Kanban({
cardSettings:{
template: “#cardTemplate”
}});
obj.appendTo(“#kanban”);
Toggle Card Method: toggleCard
($div or id)

var kanbanObj = $(“#Kanban”)
.data(“ejKanban”);
kanbanObj.
toggleCard(“2”);		 Not Applicable
Get Card Details Not Applicable Method:
getCardDetails(target)

let obj: Kanban = new
Kanban({});
obj.appendTo(“#kanban”);
obj.getCardDetails(
obj.element
.querySelector(“.e-card”));
Get Selected Cards Not Applicable Method:
getSelectedCards()

let obj: Kanban = new
Kanban({});
obj.appendTo(“#kanban”);
obj.getSelectedCards();
Card Click Event: cardClick

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
cardClick:
function (args) {}});		 Event: cardClick

let obj: Kanban = new
Kanban({
cardClick:
function(args){} });
Card Double Click Event: cardDoubleClick

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
cardDoubleClick:
function (args) {}});		 Event: cardDoubleClick

let obj: Kanban = new
Kanban({
cardDoubleClick:
function(args){} });
Triggers when start
the drag		 Event: cardDragStart

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
cardDragStart:
function (args) {}});		 Event: dragStart

let obj: Kanban = new
Kanban({
dragStart:
function(args){}});
Triggers when card
is dragged		 Event: cardDrag

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
cardDrag:
function (args) {}});		 Event: drag

let obj: Kanban = new
Kanban({
drag:
function(args){} });
Triggers when card
dragging stops		 Event: cardDragStop

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
cardDragStop:
function (args) {}});		 Event: dragStop

let obj: Kanban = new
Kanban({
dragStop:
function(args){} });
Triggers after save
the data when dropped		 Event: cardDrop

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
cardDrop:
function (args) {}});		 Not Applicable
Triggers after
cell is click		 Event: cellClick

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
cellClick:
function (args) {}});		 Not Applicable
Triggers each
card rendered		 Event: queryCellInfo

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
queryCellInfo:
function (args) {}});		 Event: cardRendered

let obj: Kanban = new
Kanban({
cardRendered:
function(args){} });

DataSource

Behavior API in Essential JS 1 API in Essential JS 2
DataSource Property: dataSource

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
dataSource: data});

Method:
dataSource(datasource)
var kanbanObj = $(“#Kanban”)
.data(“ejKanban”);
kanbanObj.dataSource
(newDataSource);		 Property: dataSource
let obj: Kanban = new
Kanban({
datasource: data
});

Method:
dataSource(datasource)
let obj: Kanban = new Kanban({});
obj.appendTo(“#kanban”);
obj.dataSource(newDataSource);
Triggers before
data load		 Event: load

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
load: function (args) {}});		 Event: dataBinding

let obj: Kanban = new
Kanban({
dataBinding:
function(args){}});
Triggers after
data bounded		 Event: dataBound

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
dataBound: function (args) {}});		 Event: dataBound

let obj: Kanban = new Kanban({
dataBound: function(args){}
});

Common:

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

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
allowDragAndDrop: true
});		 Property: allowDragAndDrop

let obj: Kanban = new
Kanban({
allowDragAndDrop: true
});
obj.appendTo(“#kanban”);
Key Field Property: keyField

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
keyField: “Status”});		 Property : keyField

let obj: Kanban = new Kanban({
keyField: “Status”
});
obj.appendTo(“#kanban”);
Title Property: allowTitle

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
allowTitle: true});		 Not Applicable
CssClass Property: cssClass

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
cssClass: “gradient-green”});		 Property: cssClass

let obj: Kanban = new
Kanban({
cssClass : “custom-class” });
obj.appendTo(“#kanban”);
Print Property: allowPrinting

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
allowPrinting: true});

Method: print()

var kanbanObj = $(“#Kanban”)
.data(“ejKanban”);
kanbanObj.print();		 Not Applicable
Touch Property: enableTouch

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
enableTouch: true});		 Not Applicable
Locale Property: locale

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
locale: “de-DE”});		 Property: locale

let obj: Kanban = new
Kanban({
locale: “de-DE”});
obj.appendTo(“#kanban”);
Query Property: query

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
query: ej.Query().
select([“Status”, “Id”,
“Summary”])});		 Property : query

let obj: Kanban = new Kanban({
query: new Query().select("")});
obj.appendTo(“#kanban”);
Refresh Method:
refresh([templateRefresh])

var kanbanObj = $(“#Kanban”)
.data(“ejKanban”);
kanbanObj.refresh();		 Method: refresh()

let obj: Kanban = new Kanban({});
obj.appendTo(“#kanban”);
obj.refresh();
Refresh Template Method:
refreshTemplate()

var kanbanObj = $(“#Kanban”)
.data(“ejKanban”);
kanbanObj.
refreshTemplate();		 Not Applicable
Destroy Method: destroy()

var kanbanObj = $(“#Kanban”)
.data(“ejKanban”);
kanbanObj.destroy();		 Method: destroy()

let obj: Kanban = new Kanban({});
obj.appendTo(“#kanban”);
obj.destroy();
Get Header Table Method: getHeaderTable()

var kanbanObj = $(“#Kanban”)
.data(“ejKanban”);
kanbanObj.getHeaderTable();		 Not Applicable
Show Spinner Not Applicable Method: showSpinner()

let obj: Kanban = new Kanban({});
obj.appendTo(“#kanban”);
obj.showSpinner();
Hide Spinner Not Applicable Method: hideSpinner()

let obj: Kanban = new Kanban({});
obj.appendTo(“#kanban”);
obj.hideSpinner();
Triggers before
every action		 Event: actionBegin

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
actionBegin: function (args) {}});
 Event: actionBegin

let obj: Kanban = new Kanban({
actionBegin: function(args){} });
Triggers on successfully
completion of actions		 Event: actionComplete

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
actionComplete:
function (args) {}});		 Event: actionComplete

let obj: Kanban = new Kanban({
actionComplete: function(args){} });
Triggers on
action failure		 Event:
actionFailure

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
actionFailure:
function (args) {}});		 Event: actionFailure

let obj: Kanban = new Kanban({
actionFailure: function(args){} });
Triggers after
Kanban rendered		 Event: create

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
create: function (args) {}});		 Event: created

let obj: Kanban = new Kanban({
created: function(args){} });
Triggers when
header click		 Event: headerClick

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
headerClick: function (args) {}});		 Not Applicable
Triggers when destroy Event: destroy

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
destroy: function (args) {}});		 Event: destroy

let obj: Kanban = new Kanban({
destroy: function(args){} });

Swimlane:

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

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
fields: {
swimlaneKey: “Assignee”}});		 Property: keyField

let obj: Kanban = new Kanban({
swimlaneSettings: {
keyField: “Assignee”} });
obj.appendTo(“#kanban”);
Header Property: headers

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
headers: [{
text: “Andrew”,
key: “Andrew Fuller”}]});		 Property: textField

let obj: Kanban = new Kanban({
swimlaneSettings: {
textField: “AssigneeName”} });
obj.appendTo(“#kanban”);
Drag And Drop Property: allowDragAndDrop

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
swimlaneSettings: {
allowDragAndDrop: true }});		 Property: allowDragAndDrop

let obj: Kanban = new Kanban({
swimlaneSettings: {
allowDragAndDrop: true } });
obj.appendTo(“#kanban”);
Card Count Property: showCount

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
swimlaneSettings: {
showCount: true }});		 Property: showItemCount

let obj: Kanban = new Kanban({
swimlaneSettings: {
showItemCount: true } });
obj.appendTo(“#kanban”);
Empty Row Property:
showEmptySwimlane

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
swimlaneSettings: {
showEmptySwimlane: true}});		 Property: showEmptyRow

let obj: Kanban = new
Kanban({
swimlaneSettings: {
showEmptyRow: true} });
obj.appendTo(“#kanban”);
Sorting Not Available Property:
sortDirection

let obj: Kanban = new
Kanban({
swimlaneSettings: {
sortDirection:
“Descending”} });
obj.appendTo(“#kanban”);
Expand All Method: expandAll()

var kanbanObj = $(“#Kanban”)
.data(“ejKanban”);
kanbanObj.KanbanSwimlane
.expandAll();		 Not Applicable
Collapse All Method: collapseAll()

var kanbanObj = $(“#Kanban”)
.data(“ejKanban”);
kanbanObj.KanbanSwimlane
.collapseAll();		 Not Applicable
Toggle Method: toggle($div or key)

var kanbanObj = $(“#Kanban”)
.data(“ejKanban”);
kanbanObj.KanbanSwimlane
.toggle($(“.e-slexpandcollapse”)
.eq(1));		 Not Applicable
Get Swimlane Data Not Applicable Method:
getSwimlaneData(keyField)

let obj: Kanban = new
Kanban({});
obj.appendTo(“#kanban”);
obj.
getSwimlaneData(“Janet”);
Triggers before swimlane
icon click event		 Event: swimlaneClick

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
swimlaneClick:
function (args) {}});		 Not Applicable

Stacked Headers

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

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
stackedHeaderRows: [{
stackedHeaderColumns: [{
headerText: “Status”,
column: “Backlog,
In Progress, Testing,
Done”}] },
{ stackedHeaderColumns: [{
headerText: “Unresolved”,
column: “Backlog,
In Progress”}]}]});		 Not Applicable
Single Stacked Header Property: stackedHeaderColumns

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
stackedHeaderRows: [{
stackedHeaderColumns: [{
headerText: “Unresolved”,
column: “Backlog,
In Progress”}]}]});		 Property:
stackedHeaders
let obj: Kanban = new
Kanban({
stackedHeaders: [{
text: “To Do”,
keyField: “Open,
InProgress”}]});
obj.appendTo(“#kanban”);

WIP Validation

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

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
columns: [{
headerText: “Backlog”,
key: “Open”,
constraints: {
type: “swimlane”, max: 5}}]});		 Property:
constraintType

var kanban = new
ej.Kanban($(“#kanban”), {
constraintType:
“swimlane” });
Maximum card Count
at particular
column/swimlane		 Property:
constraints.max

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
columns: [{
headerText: “Backlog”,
key: “Open”,
constraints: {
type: “swimlane”,
max: 5}}]});		 Property:
maxCount

let obj: Kanban = new Kanban({
columns:[{
headerText: “Backlog”,
keyField: “Open”,
maxCount: 5}] });
obj.appendTo(“#kanban”);
Minimum card Count
at particular column		 Property:
constraints.min

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
columns: [{
headerText: “Backlog”,
key: “Open”,
constraints: {
type: “swimlane”,
min: 2} }]});		 Property: minCount
let obj: Kanban = new
Kanban({
columns:[{
headerText: “Backlog”,
keyField: “Open”,
minCount: 2}] });
obj.appendTo(“#kanban”);

Keyboard

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

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
allowKeyboardNavigation:
true});		 Property:
allowKeyboard

let obj: Kanban = new
Kanban({
allowKeyboard: true });
obj.appendTo(“#kanban”);
Settings Property:
keySettings

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
keySettings: {
focus: “e”,
insertCard: “45”
} });		 Not Applicable

Toggle Columns

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

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
allowToggleColumn
: true});		 Property:
allowToggle

let obj: Kanban = new
Kanban({
columns:[{
allowToggle: true
}]});
obj.appendTo(“#kanban”);
Toggle Method: toggleColumn
(headerText or $div)

var kanbanObj = $(“#Kanban”)
.data(“ejKanban”);
kanbanObj.toggleColumn
(“Backlog”);		 Not Applicable

Dialog Editing

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

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
editSettings: {
editItems: [] }});		 Property: fields

let obj: Kanban = new
Kanban({
dialogSettings: {
fields: []}});
obj.appendTo(“#kanban”);
Dialog Model Not Available Property: model

let obj: Kanban = new
Kanban({
dialogSettings: {
model: {
width: 250 }}});
obj.appendTo(“#kanban”);
Template Property: dialogTemplate

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
editSettings: {
dialogTemplate: “#template” }});		 Property: template

let obj: Kanban = new Kanban({
dialogSettings: {
template:
“#dialogTemplate”}});
obj.appendTo(“#kanban”);
Enable Editing Property: allowEditing

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
editSettings: {
allowEditing: true }});		 In default allowed for editing.
Enable Adding Property: allowAdding

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
editSettings: {
allowAdding: true }});		 Adding applicable using column
show add button or
public method.
Edit Mode Property: editMode

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
editSettings: {
editMode: ej.Kanban
.EditMode.Dialog }});		 Not Applicable
External Form template Property:
externalFormTemplate

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
editSettings: {
externalFormTemplate:
ej.Kanban.EditMode.Dialog
}});		 Not Applicable
External Form Position Property:
externalFormPosition

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
editSettings: {
externalFormPosition:
ej.Kanban.FormPosition.Bottom
}});		 Not Applicable
Add Card Method:
KanbanEdit.addCard
([primaryKey], [card])

var kanbanObj = $(“#Kanban”)
.data(“ejKanban”);
kanbanObj.KanbanEdit
.addCard(“2”,
{ Id: 2, Status: Open});		 Method:

addCard(cardData)

let obj: Kanban = new Kanban({});
obj.appendTo(“#kanban”);
obj.addCard({ Id: 2,
Status: Open});
Update Card Method: updateCard(key, data)

var kanbanObj = $(“#Kanban”).
data(“ejKanban”);
kanbanObj.KanbanEdit
.updateCard(2, { Id: 2,
Status: Open});		 Method: updateCard(cardData)

let obj: Kanban = new
Kanban({});
obj.appendTo(“#kanban”);
obj.updateCard({ Id: 2,
Status: Open});
Delete Card Method:
KanbanEdit.deleteCard(key)

var kanbanObj = $(“#Kanban”)
.data(“ejKanban”);
kanbanObj.KanbanEdit
.deleteCard(2);		 Method: deleteCard()

let obj: Kanban = new Kanban({});
obj.appendTo(“#kanban”);
obj.deleteCard(2);
Cancel Edit Method:
KanbanEdit.cancelEdit()

var kanbanObj = $(“#Kanban”)
.data(“ejKanban”);
kanbanObj.KanbanEdit
.cancelEdit();		 Not Available
End Edit Method:
KanbanEdit.endEdit()

var kanbanObj = $(“#Kanban”)
.data(“ejKanban”);
kanbanObj.KanbanEdit
.endEdit();		 Not Available
Start Edit Method:
KanbanEdit.startEdit
($div or key)

var kanbanObj = $(“#Kanban”)
.data(“ejKanban”);
kanbanObj.KanbanEdit
.startEdit(2);		 Method:
openDialog(action, data)

let obj: Kanban = new
Kanban({});
obj.appendTo(“#kanban”);
obj.openDialog(“Add”);
Set Validation Method: KanbanEdit
.setValidationToField(name, rules)

var kanbanObj = $(“#Kanban”)
.data(“ejKanban”);
kanbanObj.KanbanEdit
.setValidationToField
(“Summary”, { required: true });		 Not Available
Close Dialog Not Applicable Method: closeDialog()
let obj: Kanban = new Kanban({});
obj.appendTo(“#kanban”);
obj.closeDialog();
Triggers before
dialog Open		 Not Applicable Event: dialogOpen

let obj: Kanban = new
Kanban({
dialogOpen: function(args){} });
Triggers when
dialog close		 Not Applicable Event: dialogClose

let obj: Kanban = new
Kanban({
dialogClose:
function(args){} });
Triggers after
the card is edited		 Event: endEdit

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
endEdit:
function (args) {}});		 Not Applicable
Triggers after
the card is deleted		 Event: endDelete

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
endDelete:
function (args) {}});		 Not Applicable
Triggers before
task is edited		 Event: beginEdit

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
beginEdit:
function (args) {}});		 Not Applicable

Dialog Editing Fields

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

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
editSettings: {
editItems: [] }});		 Property: fields
let obj: Kanban = new
Kanban({
dialogSettings: {
fields: []}});
obj.appendTo(“#kanban”);
Mapping key Property: field

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
editSettings: {
editItems: [{
field: “Id”}] }});		 Property: key

let obj: Kanban = new
Kanban({
dialogSettings: {
fields: [{
key: “Id”}]}});
obj.appendTo(“#kanban”);
Label Not Applicable Property: text

let obj: Kanban = new Kanban({
dialogSettings: {
fields: [{
text: “ID”,
key: “Id”}]}});
obj.appendTo(“#kanban”);
Type Property: editType

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
editSettings: {
editItems: [{
editType: ej.Kanban
.EditingType.String}]
}});		 Property: type

let obj: Kanban = new
Kanban({
dialogSettings: {
fields: [{
type: “TextBox”,
key: “Id”}]}});
obj.appendTo(“#kanban”);
Validation Rules Property: validationRules

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
editSettings: {
editItems: [{
validationRules: {
required: true}}] }});		 Property: validationRules

let obj: Kanban = new Kanban({
dialogSettings: {
fields: [{
validationRules: {
required: true}}]}});
obj.appendTo(“#kanban”);
Params Property: editParams

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
editSettings: {
editItems: [{
editParams: {
decimalPlaces: 2}}]
}});		 Not Applicable
Default value Property: defaultValue

var kanbanObj = new ej.Kanban(
$(“#Kanban”), {
editSettings: {
editItems: [{
defaultValue: “Open”}] }});		 Not Applicable

Tooltip

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

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
tooltipSettings: {
enable: true
}});		 Property:
enableTooltip

let obj: Kanban = new
Kanban({
enableTooltip: true});
obj.appendTo(“#kanban”);
Template Property:
tooltipSettings.template

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
tooltipSettings: {
template:
“#tooltipTemplate”
}});		 Property: tooltipTemplate

let obj: Kanban = new Kanban({
tooltipTemplate:
“#tooltipTemplate”});
obj.appendTo(“#kanban”);

Context Menu

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

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
contextMenuSettings: {
enable: true }});		 Not Applicable
Menu Items Property: menuItems

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
contextMenuSettings: {
enable: true,
menuItems: [“Move Right”] }});		 Not Applicable
Disable default Items Property: disableDefaultItems

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
contextMenuSettings: {
enable: true,
disableDefaultItems:
[ej.Kanban.MenuItem.MoveLeft]
}});		 Not Applicable
Custom Menu Items Property: customMenuItems

Text: var kanbanObj = new
ej.Kanban($(“#Kanban”), {
contextMenuSettings: {
enable: true,
customMenuItems: [{
text: “Menu1” }] }});

Target:
var kanbanObj = new
ej.Kanban($(“#Kanban”), {
contextMenuSettings: {
enable: true,
customMenuItems: [{
target: ej.Kanban
.Target.Header }] }});

Template:
var kanbanObj = new
ej.Kanban($(“#Kanban”), {
contextMenuSettings: {
enable: true,
customMenuItems: [{
text: “Hide Column”,
template: “#template”
}] }});		 Not Applicable
Triggers when context
menu item click		 Event: contextClick
var kanbanObj = new
ej.Kanban($(“#Kanban”), {
contextClick:
function (args) {}});		 Not Applicable
Triggers when context
menu open		 Event: contextOpen
var kanbanObj = new
ej.Kanban($(“#Kanban”), {
contextOpen:
function (args) {}});		 Not Applicable

WorkFlows

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

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
workFlows: [{}]});		 Not Applicable
Key Property: key

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
workFlows: [{
key: “Order”}]});		 Not Applicable
Allowed Transition Property: allowedTransition

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
workFlows: [{
key: “Order”,
allowedTransitions: “Served”
}]});		 Not Applicable

Filtering

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

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
filterSettings: []});		 Not Applicable
Enable Property: allowFiltering

$(“#Kanban”).ejKanban({
allowFiltering: true});		 Not Applicable
Text Property: text

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
filterSettings: [{
text: “Janet Issues”
}]});		 Not Applicable
Query Property: query

$(“#Kanban”).ejKanban({
filterSettings: [{
query: new ej.Query()
.where(“Assignee”,
“equal”, “Janet”)}]});		 Not Applicable
Description Property: description

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
filterSettings: [{
description:“Display Issues”
}]});		 Not Applicable
Filter Cards Method: filterCards(query)

var kanbanObj = $(“#Kanban”)
.data(“ejKanban”);
kanbanObj.KanbanFilter
.filterCards(new ej.Query().
where(“Assignee”, “equal”,
“Janet”));		 Not Applicable
Clear Method: clearFilter()

var kanbanObj = $(“#Kanban”)
.data(“ejKanban”);
kanbanObj.KanbanFilter
.clearFilter();		 Not Applicable

Searching

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

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
searchSettings: []});		 Not Applicable
Enable Property:
allowSearching

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
allowSearching: true
});		 Not Applicable
Fields Property: fields

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
searchSettings: [{
fields: [“Summary”]}]});		 Not Applicable
Key Property: key

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
searchSettings: [{
key: “Task 1”}]});		 Not Applicable
Operator Property: operator

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
searchSettings: [{
operator: “contains”}]});		 Not Applicable
Ignore Case Property: ignoreCase

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
searchSettings: [{
ignoreCase: true}]});		 Not Applicable
Search Cards Method:
searchCards(searchString)

var kanbanObj = $(“#Kanban”)
.data(“ejKanban”);
kanbanObj.KanbanFilter
.searchCards(“Analyze”);		 Not Applicable
Clear Method: clearSearch()

var kanbanObj = $(“#Kanban”)
.data(“ejKanban”);
kanbanObj.KanbanFilter
.clearSearch();		 Not Applicable

External Drag And Drop

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

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
allowExternalDragAndDrop
: true});		 Not Applicable
Target Property:
externalDropTarget

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
cardSettings: {
externalDropTarget:
“#DroppedKanban” }});		 Not Applicable

Scrolling

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

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
allowScrolling: true});		 Not Applicable
height Property: height

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
allowScrolling: true,
scrollSettings: {
height: 400 }});		 Property: height

let obj: Kanban = new Kanban({
height: 400});
obj.appendTo(“#kanban”);
width Property: width

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
allowScrolling: true,
scrollSettings: {
width: 400 }});		 Property: width

let obj: Kanban = new Kanban({
width: 400});
obj.appendTo(“#kanban”);
Freeze Swimlane Property: allowFreezeSwimlane

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
allowScrolling: true,
scrollSettings: {
allowFreezeSwimlane: true
}});		 Not Applicable
Get Scroll Object Method:
getScrollObject()

var kanbanObj = $(“#Kanban”)
.data(“ejKanban”);
kanbanObj.getScrollObject();		 Not Applicable

Card Selection and Hover

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

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
allowSelection: true});		 Property: cardSettings.
selectionType

let obj: Kanban = new
Kanban({ cardSettings: {
selectionType: “Single”} });
obj.appendTo(“#kanban”);
Type Property: selectionType

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
selectionType: “single”});		 It is covered under
selectionType property.
Hover Property: allowHover

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
allowHover: true});		 Not Applicable
Clear Method: clear()

var kanbanObj = $(“#Kanban”)
.data(“ejKanban”);
kanbanObj.KanbanSelection
.clear();		 Not Applicable
Triggers before
card selected		 Event: beforeCardSelect

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
beforeCardSelect:
function (args) {}});

Event: cardSelecting
var kanbanObj = new
ej.Kanban($(“#Kanban”), {
cardSelecting:
function (args) {}});		 Not Applicable
Triggers after
card selected		 Event: cardSelect

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
cardSelect: function
(args) {}});		 Not Applicable

Toolbar

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

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
customToolbarItems: {
template: “#Delete”
}});		 Not Applicable
Triggers toolbar
item click		 Event: toolbarClick

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
toolbarClick: function
(args) {}});		 Not Applicable

Responsive

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

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
isResponsive: true});		 Not Applicable
Minimum width Property: minWidth

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
isResponsive: true,
minWidth: 400});		 Not Applicable

State Persistence

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

let obj: Kanban = new Kanban({
enablePersistence: true
});
obj.appendTo(“#kanban”);

Right to Left - RTL

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

var kanbanObj = new
ej.Kanban($(“#Kanban”), {
enableRTL: true})		 Property: enableRtl

let obj: Kanban = new Kanban({
enableRtl: true});
obj.appendTo(“#kanban”);
Previous
Next