Search results

Migration from Essential JS 1

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”);