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

Migration from Essential JS 1 in JavaScript (ES5) Kanban control

08 May 2023 / 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

$(“#Kanban”).ejKanban({
columns : [] });		 Property : columns

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

$(“#Kanban”).ejKanban({
columns: [{
headerText : “Backlog”}]
});		 Property : headerText

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

$(“#Kanban”).ejKanban({ columns: [{
key : “Open”
}]});		 Property: keyField

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

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

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

$(“#Kanban”).ejKanban({
columns: [{
headerText: “Backlog”,
key: “Open”,
showAddButton : true
}] });		 Property: showAddButton

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

$(“#Kanban”).ejKanban({
enableTotalCount : true
});		 Property: showItemCount

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

$(“#Kanban”).ejKanban({
columns: [{
headerText: “Backlog”,
key: “Open”,
headerTemplate : “#template”
}]});		 Property: template

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

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

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

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

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

$(“#Kanban”).ejKanban({
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)

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

Method: deleteColumn(index)

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

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

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

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

var obj =
new ej.kanban.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()

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

$(“#Kanban”).ejKanban({
cellClick : function (args) {}});		 Not Applicable

Cards

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

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

$(“#Kanban”).ejKanban({
fields: {
content: “Summary”
}});		 Property:
cardSettings.contentField

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

$(“#Kanban”).ejKanban({
fields: {
tag: “Tags”
}});		 Property:
cardSettings.tagsField

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

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

$(“#Kanban”).ejKanban({
fields: {
title: “Assignee”
}});
 Card Unique mapping
field is displayed
on card header.
Image Property:
fields.imageUrl

$(“#Kanban”).ejKanban({
fields: {
imageUrl: “ImgUrl”
}});		 Not Applicable
CSS class Not Applicable Property :
cardSettings.
footerCssField

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

var obj = new
ej.kanban.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)

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

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

$(“#Kanban”).ejKanban({
cardClick:
function (args) {}});		 Event: cardClick

var obj = new
ej.kanban.Kanban
cardClick:
function(args){} });
Card Double Click Event: cardDoubleClick

$(“#Kanban”).ejKanban({
cardDoubleClick:
function (args) {}});		 Event: cardDoubleClick

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

$(“#Kanban”).ejKanban({
cardDragStart:
function (args) {}});		 Event: dragStart

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

$(“#Kanban”).ejKanban({
cardDrag:
function (args) {}});		 Event: drag

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

$(“#Kanban”).ejKanban({
cardDragStop:
function (args) {}});		 Event: dragStop

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

$(“#Kanban”).ejKanban({
cardDrop:
function (args) {}});		 Not Applicable
Triggers after
cell is click		 Event: cellClick

$(“#Kanban”).ejKanban({
cellClick:
function (args) {}});		 Not Applicable
Triggers each
card rendered		 Event: queryCellInfo

$(“#Kanban”).ejKanban({
queryCellInfo:
function (args) {}});		 Event: cardRendered

var obj = new
ej.kanban.Kanban({
cardRendered:
function(args){} });

DataSource

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

$(“#Kanban”).ejKanban({
dataSource: data});

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

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

$(“#Kanban”).ejKanban({
load: function (args) {}});		 Event: dataBinding

var obj = new
ej.kanban.Kanban({
dataBinding:
function(args){}});
Triggers after
data bounded		 Event: dataBound

$(“#Kanban”).ejKanban({
dataBound: function (args) {}});		 Event: dataBound

var obj = new ej.kanban.Kanban({
dataBound: function(args){}
});

Common:

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

$(“#Kanban”).ejKanban({
allowDragAndDrop: true
});		 Property: allowDragAndDrop

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

$(“#Kanban”).ejKanban({
keyField: “Status”});		 Property : keyField

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

$(“#Kanban”).ejKanban({
allowTitle: true});		 Not Applicable
CssClass Property: cssClass

$(“#Kanban”).ejKanban({
cssClass: “gradient-green”});		 Property: cssClass

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

$(“#Kanban”).ejKanban({
allowPrinting: true});

Method: print()

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

$(“#Kanban”).ejKanban({
enableTouch: true});		 Not Applicable
Locale Property: locale

$(“#Kanban”).ejKanban({
locale: “de-DE”});		 Property: locale

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

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

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

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

var obj = new ej.kanban.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()

var obj = new ej.kanban.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()

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

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

$(“#Kanban”).ejKanban({
actionBegin: function (args) {}});
 Event: actionBegin

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

$(“#Kanban”).ejKanban({
actionComplete:
function (args) {}});		 Event: actionComplete

var obj = new ej.kanban.Kanban({
actionComplete: function(args){} });
Triggers on
action failure		 Event:
actionFailure

$(“#Kanban”).ejKanban({
actionFailure:
function (args) {}});		 Event: actionFailure

var obj = new ej.kanban.Kanban({
actionFailure: function(args){} });
Triggers after
Kanban rendered		 Event: create

$(“#Kanban”).ejKanban({
create: function (args) {}});		 Event: created

var obj = new ej.kanban.Kanban({
created: function(args){} });
Triggers when
header click		 Event: headerClick

$(“#Kanban”).ejKanban({
headerClick: function (args) {}});		 Not Applicable
Triggers when
destroy		 Event: destroy

$(“#Kanban”).ejKanban({
destroy: function (args) {}});		 Event: destroy

var obj = new ej.kanban.Kanban({
destroy: function(args){} });

Swimlane:

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

$(“#Kanban”).ejKanban({
fields: {
swimlaneKey: “Assignee”}});		 Property: keyField

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

$(“#Kanban”).ejKanban({
headers: [{
text: “Andrew”,
key: “Andrew Fuller”}]});		 Property: textField

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

$(“#Kanban”).ejKanban({
swimlaneSettings: {
allowDragAndDrop: true }});		 Property: allowDragAndDrop

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

$(“#Kanban”).ejKanban({
swimlaneSettings: {
showCount: true }});		 Property: showItemCount

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

$(“#Kanban”).ejKanban({
swimlaneSettings: {
showEmptySwimlane: true}});		 Property: showEmptyRow

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

var obj = new
ej.kanban.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)

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

$(“#Kanban”).ejKanban({
swimlaneClick:
function (args) {}});		 Not Applicable

Stacked Headers

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

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

$(“#Kanban”).ejKanban({
stackedHeaderRows: [{
stackedHeaderColumns: [{
headerText: “Unresolved”,
column: “Backlog,
In Progress”}]}]});		 Property:
stackedHeaders
var obj = new
ej.kanban.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

$(“#Kanban”).ejKanban({
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

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

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

$(“#Kanban”).ejKanban({
columns: [{
headerText: “Backlog”,
key: “Open”,
constraints: {
type: “swimlane”,
min: 2} }]});		 Property: minCount
var obj = new
ej.kanban.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

$(“#Kanban”).ejKanban({
allowKeyboardNavigation:
true});		 Property:
allowKeyboard

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

$(“#Kanban”).ejKanban({
keySettings: {
focus: “e”,
insertCard: “45”
} });		 Not Applicable

Toggle Columns

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

$(“#Kanban”).ejKanban({
allowToggleColumn
: true});		 Property:
allowToggle

var obj = new ej.kanban.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

$(“#Kanban”).ejKanban({
editSettings: {
editItems: [{}] }});		 Property: fields

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

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

$(“#Kanban”).ejKanban({
editSettings: {
dialogTemplate: “#template” }});		 Property: template

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

$(“#Kanban”).ejKanban({
editSettings: {
allowEditing: true }});		 In default allowed for editing.
Enable Adding Property: allowAdding

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

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

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

$(“#Kanban”).ejKanban({
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)

var obj = new ej.kanban.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)

var obj = new
ej.kanban.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()

var obj = new ej.kanban.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)

var obj = new ej.kanban.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()
var obj = new ej.kanban.Kanban({});
obj.appendTo(“#kanban”);
obj.closeDialog();
Triggers before
dialog Open		 Not Applicable Event: dialogOpen

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

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

$(“#Kanban”).ejKanban({
endEdit:
function (args) {}});		 Not Applicable
Triggers after
the card is deleted		 Event: endDelete

$(“#Kanban”).ejKanban({
endDelete:
function (args) {}});		 Not Applicable
Triggers before
task is edited		 Event: beginEdit

$(“#Kanban”).ejKanban({
beginEdit:
function (args) {}});		 Not Applicable

Dialog Editing Fields

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

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

$(“#Kanban”).ejKanban({
editSettings: {
editItems: [{
field: “Id”}] }});		 Property: key

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

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

$(“#Kanban”).ejKanban({
editSettings: {
editItems: [{
editType: ej.Kanban
.EditingType.String}]
}});		 Property: type

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

$(“#Kanban”).ejKanban({
editSettings: {
editItems: [{
validationRules: {
required: true}}] }});		 Property: validationRules

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

$(“#Kanban”).ejKanban({
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

$(“#Kanban”).ejKanban({
tooltipSettings: {
enable: true
}});		 Property:
enableTooltip

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

$(“#Kanban”).ejKanban({
tooltipSettings: {
template:
“#tooltipTemplate”
}});		 Property: tooltipTemplate

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

Context Menu

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

$(“#Kanban”).ejKanban({
contextMenuSettings: {
enable: true }});		 Not Applicable
Menu Items Property: menuItems

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

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

Text: $(“#Kanban”).ejKanban({
contextMenuSettings: {
enable: true,
customMenuItems: [{
text: “Menu1” }] }});

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

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

WorkFlows

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

$(“#Kanban”).ejKanban({
workFlows: [{}]});		 Not Applicable
Key Property: key

$(“#Kanban”).ejKanban({
workFlows: [{
key: “Order”}]});		 Not Applicable
Allowed Transition Property: allowedTransition

$(“#Kanban”).ejKanban({
workFlows: [{
key: “Order”,
allowedTransitions: “Served”
}]});		 Not Applicable

Filtering

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

$(“#Kanban”).ejKanban({
filterSettings: []});		 Not Applicable
Enable Property: allowFiltering

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

$(“#Kanban”).ejKanban({
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

$(“#Kanban”).ejKanban({
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

$(“#Kanban”).ejKanban({
searchSettings: []});		 Not Applicable
Enable Property:
allowSearching

$(“#Kanban”).ejKanban({
allowSearching: true
});		 Not Applicable
Fields Property: fields

$(“#Kanban”).ejKanban({
searchSettings: [{
fields: [“Summary”]}]});		 Not Applicable
Key Property: key

$(“#Kanban”).ejKanban({
searchSettings: [{
key: “Task 1”}]});		 Not Applicable
Operator Property: operator

$(“#Kanban”).ejKanban({
searchSettings: [{
operator: “contains”}]});		 Not Applicable
Ignore Case Property: ignoreCase

$(“#Kanban”).ejKanban({
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

$(“#Kanban”).ejKanban({
allowExternalDragAndDrop
: true});		 Not Applicable
Target Property:
externalDropTarget

$(“#Kanban”).ejKanban({
cardSettings: {
externalDropTarget:
“#DroppedKanban” }});		 Not Applicable

Scrolling

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

$(“#Kanban”).ejKanban({
allowScrolling: true});		 Not Applicable
height Property: height

$(“#Kanban”).ejKanban({
allowScrolling: true,
scrollSettings: {
height: 400 }});		 Property: height

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

$(“#Kanban”).ejKanban({
allowScrolling: true,
scrollSettings: {
width: 400 }});		 Property: width

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

$(“#Kanban”).ejKanban({
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

$(“#Kanban”).ejKanban({
allowSelection: true});		 Property: cardSettings.
selectionType

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

$(“#Kanban”).ejKanban({
selectionType: “single”});		 It is covered under
selectionType property.
Hover Property: allowHover

$(“#Kanban”).ejKanban({
allowHover: true});		 Not Applicable
Clear Method: clear()

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

$(“#Kanban”).ejKanban({
beforeCardSelect:
function (args) {}});

Event: cardSelecting
$(“#Kanban”).ejKanban({
cardSelecting:
function (args) {}});		 Not Applicable
Triggers after
card selected		 Event: cardSelect

$(“#Kanban”).ejKanban({
cardSelect: function
(args) {}});		 Not Applicable

Toolbar

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

$(“#Kanban”).ejKanban({
customToolbarItems: {
template: “#Delete”
}});		 Not Applicable
Triggers toolbar
item click		 Event: toolbarClick

$(“#Kanban”).ejKanban({
toolbarClick: function
(args) {}});		 Not Applicable

Responsive

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

$(“#Kanban”).ejKanban({
isResponsive: true});		 Not Applicable
Minimum width Property: minWidth

$(“#Kanban”).ejKanban({
isResponsive: true,
minWidth: 400});		 Not Applicable

State Persistence

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

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

Right to Left - RTL

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

$(“#Kanban”).ejKanban({
enableRTL: true})		 Property: enableRtl

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