Search results

Migration from Essential JS 1 in React Kanban component

23 Feb 2021 / 14 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><columns>
</columns></EJ.Kanban>
Property : columns

<KanbanComponent><ColumnsDirective>
</ColumnsDirective></KanbanComponent>
Header Text Property : headerText

<EJ.Kanban><columns>
<column headerText="Backlog">
</column>
</columns></EJ.Kanban>
Property : headerText

<KanbanComponent>
<ColumnsDirective>
<ColumnDirective
headerText="Backlog"/>
</ColumnsDirective>
</KanbanComponent>
Key Field Property : key

<EJ.Kanban><columns>
<column key="Open">
</column>
</columns></EJ.Kanban>
Property: keyField

<KanbanComponent>
<ColumnsDirective>
<ColumnDirective
keyField='Open'/>
</ColumnsDirective>
</KanbanComponent>
Initial Collapsed
Columns
Property: isCollapsed

<EJ.Kanban><columns>
<column key="Open"
headerText="Backlog"
[isCollapsed]="true">
</column>
</columns></EJ.Kanban>
Property: isExpanded

<KanbanComponent>
<ColumnsDirective>
<ColumnDirective
keyField='Open'
allowToggle='true'
[isExpanded]='true'/>
</ColumnsDirective>
</KanbanComponent>
Cell Add card button Property: showAddButton

<EJ.Kanban><columns>
<column key="Open"
headerText="Backlog"
[showAddButton]="true">
</column>
</columns></EJ.Kanban>
Property: showAddButton

<KanbanComponent>
<ColumnsDirective>
<ColumnDirective
headerText='To do'
keyField='Open'
[showAddButton]='true'/>
</ColumnsDirective>
</KanbanComponent>
Column card count Property: enableTotalCount

<EJ.Kanban [enableTotalCount]="true">

</EJ.Kanban>
Property: showItemCount

<KanbanComponent>
<ColumnsDirective>
<ColumnDirective
headerText='To do'
keyField='Open'
[showItemCount]='true'/>
</ColumnsDirective>
</KanbanComponent>
Template Property: headerTemplate

<EJ.Kanban><columns>
<column key="Open"
headerText="Backlog"
headerTemplate="#template">
</column>
</columns></EJ.Kanban>
Property: template

<KanbanComponent>
<ColumnsDirective>
<ColumnDirective
headerText='To do'
keyField='Open'
template='#headerTemplate'/>
</ColumnsDirective>
</KanbanComponent>
Allow Drop Property: allowDrop

<EJ.Kanban><columns>
<column key="Open"
headerText="Backlog"
[allowDrop]="false">
</column>
</columns></EJ.Kanban>
Property: allowDrop

<KanbanComponent>
<ColumnsDirective>
<ColumnDirective
headerText='To do'
keyField='Open'
[allowDrop]="false"/>
</ColumnsDirective>
</KanbanComponent>
Allow Drag Property: allowDrag

<EJ.Kanban><columns>
<column key="Open"
headerText="Backlog"
[allowDrag]="false">
</column>
</columns></EJ.Kanban>
Property: allowDrag

<KanbanComponent>
<ColumnsDirective>
<ColumnDirective
headerText='To do'
keyField='Open'
[allowDrag]="false"/>
</ColumnsDirective>
</KanbanComponent>
Total Count text Property: totalCount

<EJ.Kanban><columns>
<column key="Open"
headerText="Backlog"
totalCount-text="Backlog Count">
</column>
</columns></EJ.Kanban>
Not Available
Width Property: width

<EJ.Kanban><columns>
<column key="Open"
headerText="Backlog"
width="200">
</column>
</columns></EJ.Kanban>
Not Available
Visible Property: visible

<EJ.Kanban><columns>
<column key="Open"
headerText="Backlog"
visible={false}>
</column>
</columns></EJ.Kanban>
Not Available
Add/Delete Columns Method: columns(column, key,
[action])


Add :
<EJ.Kanban>
</EJ.Kanban>
var kanbanObj =
$(“.e-kanban”).
ejKanban(“instance”);
kanbanObj.columns
(“Review”, “Review”, “add”);

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


<KanbanComponent
ref={ kanban => this.
kanbanInstance = kanban}>
</KanbanComponent>
this.kanbanInstance
.addColumn({
headerText: “Review”,
keyField: “Review”
}, 2);

Method: deleteColumn(index)

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

<EJ.Kanban>
</EJ.Kanban>
var kanbanObj =
$(“.e-kanban”).
ejKanban(“instance”);
kanbanObj.
showColumns(“Testing”);

Method: showColumn(key)

<KanbanComponent
ref={ kanban =>
this.kanbanInstance
= kanban}>
</KanbanComponent>
this.kanbanInstance
.showColumn
(“Testing”);
Hide Columns Method: hideColumns(headerText)

<EJ.Kanban>
</EJ.Kanban>
var kanbanObj =
$(“.e-kanban”).
ejKanban(“instance”);
kanbanObj.
hideColumns(“Testing”);

Method: hideColumns(key)

<KanbanComponent
ref={ kanban =>
this.kanbanInstance =
kanban}>
</KanbanComponent>
this.kanbanInstance
.hideColumn
(“Testing”);
Get Visible
Column Names
Method: getVisibleColumnNames()

<EJ.Kanban>
</EJ.Kanban>
var kanbanObj =
$(“.e-kanban”).
ejKanban(“instance”);
kanbanObj.
getVisibleColumnNames();

Not Applicable
Get Column
By Header Text
Method: getColumnByHeaderText
(headerText)


<EJ.Kanban>
</EJ.Kanban>
var kanbanObj =
$(“.e-kanban”).
ejKanban(“instance”);
kanbanObj.
getColumnByHeaderText
(“Testing”);
Not Applicable
Get Column Data Not Applicable Method: getColumnData()

<KanbanComponent
ref={ kanban =>
this.kanbanInstance
= kanban}>
</KanbanComponent>
this.kanbanInstance
.getColumnData();
Triggers after
cell is click
Event: cellClick

<EJ.Kanban
cellClick={cellClick}>
</EJ.Kanban>
function cellClick(args){}
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
<KanbanComponent
cardSettings={{
headerField: "Id"}}>
</KanbanComponent>
Content Property:
fields.content

<EJ.Kanban
fields-content
="Summary">
</EJ.Kanban>
Property :
cardSettings.contentField
<KanbanComponent
cardSettings={{
contentField: 'Summary'>
</KanbanComponent>
Tag Property:
fields.tag

<EJ.Kanban
fields-tag="Tags">
</EJ.Kanban>
Property :
cardSettings.tagsField
<KanbanComponent
cardSettings={{
tagsField: 'Tags'>
</KanbanComponent>
Left border color Property:
fields.color

<EJ.Kanban fields-color="Type" cardSettings-colorMapping={colormap}>
</EJ.Kanban>
var colormap = {
“#cb2027”: “Bug,Story”,
“#67ab47”: “Improvement”,
“#fbae19”: “Epic”,
“#6a5da8”: “Others”
};
Property:
cardSettings.grabberField
<KanbanComponent
cardSettings={{
grabberField: "color">
</KanbanComponent>
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


<KanbanComponent
cardSettings={{
footerCssField: "classNames">
</KanbanComponent>
Template Property:
cardSettings.template

<EJ.Kanban
cardSettings-template
="#template"
</EJ.Kanban>
Property:
cardSettings.template

<KanbanComponent
cardSettings={{
template:
this.cardTemplate.bind(this)>
</KanbanComponent>
Toggle Card Method: toggleCard
($div or id)


<EJ.Kanban>
</EJ.Kanban>
var kanbanObj =
$(“.e-kanban”).
ejKanban(“instance”);
kanbanObj.
toggleCard(“2”);

Not Applicable
Get Card Details Not Applicable Method:
getCardDetails(target)

<KanbanComponent
ref={ kanban =>
this.kanbanInstance =
kanban}>
</KanbanComponent>
this.kanbanInstance
.getCardDetails(
obj.element
.querySelector(“.e-card”));
Get Selected Cards Not Applicable Method:
getSelectedCards()

<KanbanComponent
ref={ kanban =>
this.kanbanInstance =
kanban}>
</KanbanComponent>
this.kanbanInstance
.getSelectedCards();
Card Click Event: cardClick

<EJ.Kanban
cardClick={cardClick}>
</EJ.Kanban>
function cardClick(args){}
Event: cardClick

<KanbanComponent
cardClick={this.cardClick.bind(this)}
</KanbanComponent>
private cardClick() {}
Card Double Click Event: cardDoubleClick

<EJ.Kanban
cardDoubleClick={cardDoubleClick}>
</EJ.Kanban>
function cardDoubleClick(args){}
Event: cardDoubleClick

<KanbanComponent
cardDoubleClick={this.cardDoubleClick.bind(this)}
</KanbanComponent>
private cardDoubleClick() {}
Triggers when start
the drag
Event: cardDragStart

<EJ.Kanban
cardDragStart={cardDragStart}>
</EJ.Kanban>
function cardDragStart(args){}
Event: dragStart

<KanbanComponent
dragStart={this.dragStart.bind(this)}
</KanbanComponent>
private dragStart() {}
Triggers when card
is dragged
Event: cardDrag

<EJ.Kanban
cardDrag={cardDrag}>
</EJ.Kanban>
function cardDrag(args){}
Event: drag

<KanbanComponent
drag={this.drag.bind(this)}
</KanbanComponent>
private drag() {}
Triggers when card
dragging stops
Event: cardDragStop

<EJ.Kanban
cardDragStop={cardDragStop}>
</EJ.Kanban>
function cardDragStop(args){}
Event: dragStop

<KanbanComponent
dragStop={this.dragStop.bind(this)}
</KanbanComponent>
private dragStop() {}
Triggers after save
the data when dropped
Event: cardDrop

<EJ.Kanban
cardDrop={cardDrop}>
</EJ.Kanban>
function cardDrop(args){}
Not Applicable
Triggers after
cell is click
Event: cellClick

<EJ.Kanban
cellClick={cellClick}>
</EJ.Kanban>
function cellClick(args){}
Not Applicable
Triggers each
card rendered
Event: queryCellInfo

<EJ.Kanban
queryCellInfo={queryCellInfo}>
</EJ.Kanban>
function queryCellInfo(args){}
Event: cardRendered

<KanbanComponent
cardRendered={this.cardRendered.bind(this)}
</KanbanComponent>
private cardRendered() {}

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
<KanbanComponent
cardSettings={{
headerField: "Id"}}>
</KanbanComponent>
DataSource Property: dataSource

<EJ.Kanban
dataSource={window.kanbanData}>
</EJ.Kanban>
Method:
dataSource(datasource)
<EJ.Kanban>
</EJ.Kanban>
var kanbanObj =
$(“.e-kanban”).
ejKanban(“instance”);
kanbanObj.
dataSource
(newDataSource);

Property: dataSource

<KanbanComponent
dataSource={this.data}>
</KanbanComponent>
Method:
dataSource(datasource)

<KanbanComponent
ref={ kanban =>
this.kanbanInstance
= kanban}>
</KanbanComponent>
this.kanbanInstance
.dataSource(newDataSource);
Triggers before
data load
Event: load

<EJ.Kanban
load={load}>
</EJ.Kanban>
function load(args){}
Event: dataBinding

<KanbanComponent
dataBinding={this.dataBinding.bind(this)}
</KanbanComponent>
private dataBinding() {}
Triggers after
data bounded
Event: dataBound

<EJ.Kanban
dataBound={dataBound}>
</EJ.Kanban>
function dataBound(args){}
Event: dataBound

<KanbanComponent
dataBound={this.dataBound.bind(this)}
</KanbanComponent>
private dataBound() {}

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

<KanbanComponent
allowDragAndDrop={true}>
</KanbanComponent>
Key Field Property: keyField

<EJ.Kanban
keyField="Status">
</EJ.Kanban>
Property : keyField

<KanbanComponent
keyField="Status">
</KanbanComponent>
Title Property: allowTitle

<EJ.Kanban
allowTitle={true}>
</EJ.Kanban>
Not Applicable
CssClass Property: cssClass

<EJ.Kanban
cssClass="gradient-green">
</EJ.Kanban>
Property: cssClass

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

<EJ.Kanban
allowPrinting={true}>
</EJ.Kanban>

Method: print()

<EJ.Kanban>
</EJ.Kanban>
var kanbanObj =
$(“.e-kanban”).
ejKanban(“instance”);
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

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

<EJ.Kanban
query={query}>
</EJ.Kanban>
var query =
ej.Query().select("")
Property : query

<KanbanComponent
query={query}>
</KanbanComponent>
var query=
new Query().select("")});
Refresh Method:
refresh([templateRefresh])

<EJ.Kanban>
</EJ.Kanban>
var kanbanObj =
$(“.e-kanban”).
ejKanban(“instance”);
kanbanObj.refresh();
Method: refresh()

<KanbanComponent
ref={ kanban =>
this.kanbanInstance
= kanban}>
</KanbanComponent>
this.kanbanInstance
.refresh();
Refresh Template Method:
refreshTemplate()

<EJ.Kanban>
</EJ.Kanban>
var kanbanObj =
$(“.e-kanban”).
ejKanban(“instance”);
kanbanObj.refreshTemplate();
Not Applicable
Destroy Method: destroy()

<EJ.Kanban>
</EJ.Kanban>
var kanbanObj =
$(“.e-kanban”).
ejKanban(“instance”);
kanbanObj.destroy();
Method: destroy()
<KanbanComponent
ref={ kanban =>
this.kanbanInstance
= kanban}>
</KanbanComponent>
this.kanbanInstance
.destroy();
Get Header Table Method: getHeaderTable()

<EJ.Kanban>
</EJ.Kanban>
var kanbanObj =
$(“.e-kanban”).
ejKanban(“instance”);
kanbanObj.getHeaderTable();
Not Applicable
Show Spinner Not Applicable Method: showSpinner()

<KanbanComponent
ref={ kanban =>
this.kanbanInstance
= kanban}>
</KanbanComponent>
this.kanbanInstance
.showSpinner();
Hide Spinner Not Applicable Method: hideSpinner()

<KanbanComponent
ref={ kanban =>
this.kanbanInstance
= kanban}>
</KanbanComponent>
this.kanbanInstance
.hideSpinner();
Triggers before
every action
Event: actionBegin

<EJ.Kanban
actionBegin={actionBegin}>
</EJ.Kanban>
function actionBegin(args){}
Event: actionBegin

<KanbanComponent
actionBegin={this.actionBegin.bind(this)}
</KanbanComponent>
private actionBegin(event) {}
Triggers on successfully
completion of actions
Event: actionComplete

<EJ.Kanban
actionComplete={actionComplete}>
</EJ.Kanban>
function actionComplete(args){}
Event: actionComplete

<KanbanComponent
actionComplete={this.actionComplete.bind(this)}
</KanbanComponent>
private actionComplete(event) {}
Triggers on
action failure
Event:
actionFailure

<EJ.Kanban
actionFailure={actionFailure}>
</EJ.Kanban>
function actionFailure(args){}
Event: actionFailure

<KanbanComponent
actionFailure={this.actionFailure.bind(this)}
</KanbanComponent>
private actionFailure(event) {}
Triggers after
Kanban rendered
Event: create

<EJ.Kanban
create={create}>
</EJ.Kanban>
function create(args){}
Event: created

<KanbanComponent
created={this.created.bind(this)}
</KanbanComponent>
private created(event) {}
Triggers when
header click
Event: headerClick

<EJ.Kanban
headerClick={headerClick}>
</EJ.Kanban>
function headerClick(args){}
Not Applicable
Triggers when destroy Event: destroy

<EJ.Kanban
destroy={destroy}>
</EJ.Kanban>
function destroy(args){}
Event: destroy

<KanbanComponent
destroy={this.destroy.bind(this)}
</KanbanComponent>
private 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

<KanbanComponent
swimlaneSettings={{
keyField: "Assignee" }} >
</KanbanComponent>
Header Property: headers

<EJ.Kanban
headers={headers}>
</EJ.Kanban>
var headers =
[{ </br>text: "Andrew",
key: "Andrew Fuller"}];
}
}
Property: textField

<KanbanComponent
swimlaneSettings={{
textField: "AssigneeName" }} >
</KanbanComponent>
Drag And Drop Property: allowDragAndDrop

<EJ.Kanban
swimlaneSettings={{allowDragAndDrop: true}}>
</EJ.Kanban>
Property: allowDragAndDrop

<KanbanComponent
swimlaneSettings={{
allowDragAndDrop: true}} >
</KanbanComponent>
Card Count Property: showCount

<EJ.Kanban
swimlaneSettings={{showCount: true}}>
</EJ.Kanban>
Property: showItemCount

<KanbanComponent
swimlaneSettings={{
showItemCount: true}} >
</KanbanComponent>
Empty Row Property:
showEmptySwimlane

<EJ.Kanban
swimlaneSettings={{showEmptySwimlane: true}}>
</EJ.Kanban>
Property: showEmptyRow

<KanbanComponent
swimlaneSettings={{
showEmptyRow: true}} >
</KanbanComponent>
Sorting Not Available Property:
sortDirection

<KanbanComponent
swimlaneSettings={{
sortDirection:
"Descending"}} >
</KanbanComponent>
Expand All Method: expandAll()

<EJ.Kanban>
</EJ.Kanban>
var kanbanObj =
$(“.e-kanban”).
ejKanban(“instance”);
kanbanObj.KanbanSwimlane
.expandAll();
Not Applicable
Collapse All Method: collapseAll()

<EJ.Kanban>
</EJ.Kanban>
var kanbanObj =
$(“.e-kanban”).
ejKanban(“instance”);
kanbanObj.KanbanSwimlane
.collapseAll();
Not Applicable
Toggle Method: toggle($div or key)

<EJ.Kanban>
</EJ.Kanban>
var kanbanObj =
$(“.e-kanban”).
ejKanban(“instance”);
kanbanObj.
KanbanSwimlane
.toggle($(“.e-slexpandcollapse”)
.eq(1));
Not Applicable
Get Swimlane Data Not Applicable Method:
getSwimlaneData(keyField)

<KanbanComponent
ref={ kanban =>
this.kanbanInstance
= kanban}>
</KanbanComponent>
this.kanbanInstance
.getSwimlaneData(“Janet”);
Triggers before swimlane
icon click event
Event: swimlaneClick

<EJ.Kanban
swimlaneClick={swimlaneClick}>
</EJ.Kanban>
function swimlaneClick(args){}
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>
var 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>
var stackedHeaderRow =
[{ stackedHeaderColumns: [{
headerText: “Status”,
column: “Backlog,
In Progress, Testing,
Done”}] },
{ stackedHeaderColumns: [{
headerText: “Unresolved”,
column: “Backlog,
In Progress”}]}]}};
Property:
stackedHeaders
<KanbanComponent>
<StackedHeadersDirective>
<StackedHeaderDirective
text='To Do'
keyFields='Open,
InProgress'>
</StackedHeaderDirective>
</KanbanComponent>

WIP Validation

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

<EJ.Kanban>
<columns>
<column
headerText="Backlog"
key="Open"
constraints-type
="swimlane" />
</EJ.Kanban>
Property:
constraintType

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

<EJ.Kanban>
<columns>
<column
headerText="Backlog"
key="Open"
constraints-type
="swimlane"
constraints-max
="5" />
</columns></EJ.Kanban>
Property:
maxCount

<KanbanComponent>
<ColumnsDirective>
<ColumnDirective
headerText='Backlog
keyField='Open'
maxCount='5'/>
</ColumnsDirective>
</KanbanComponent>
Minimum card Count
at particular column
Property:
constraints.min

<EJ.Kanban>
<columns>
<column
headerText="Backlog"
key="Open"
constraints-type
="swimlane"
constraints-min
="5" />
</columns></EJ.Kanban>
Property: minCount
<KanbanComponent>
<ColumnsDirective>
<ColumnDirective
headerText='Backlog
keyField='Open'
minCount='5'/>
</ColumnsDirective>
</KanbanComponent>

Keyboard

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

<EJ.Kanban
allowKeyboardNavigation={true}>
</EJ.Kanban>
Property: allowDragAndDrop

<KanbanComponent
allowKeyboard={true}>
</KanbanComponent>
Settings Property:
keySettings

<EJ.Kanban
keySettings={keySettings}>
</EJ.Kanban>
var 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

<KanbanComponent>
<ColumnsDirective>
<ColumnDirective
allowToggle={true}
/>
</ColumnsDirective>
</KanbanComponent>
Toggle Method: toggleColumn
(headerText or $div)


<EJ.Kanban>
</EJ.Kanban>
var kanbanObj =
$(“.e-kanban”).
ejKanban(“instance”);
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
={editItems}>
</EJ.Kanban>
var editItems = []
Property: fields

<KanbanComponent
dialogSettings={{
fields: this.fields
}}>
</KanbanComponent>
private fields:
DialogFieldsModel[] = []
Dialog Model Not Available Property: model

<KanbanComponent
dialogSettings={{
model: {model}
}}>
</KanbanComponent>
private model:
DialogModel[] = { width: 250 }
Template Property: dialogTemplate

<EJ.Kanban
editSettings-dialogTemplate="#template"
</EJ.Kanban>
Property: template

<KanbanComponent
dialogSettings={{
template:
this.dialogTemplate }}>
</KanbanComponent>
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>
</EJ.Kanban>
var kanbanObj =
$(“.e-kanban”).
ejKanban(“instance”);
kanbanObj.KanbanEdit
.addCard(“2”,
{ Id: 2, Status: Open});
Method:

addCard(cardData)
<KanbanComponent
ref={ kanban =>
this.kanbanInstance
= kanban}>
</KanbanComponent>
this.kanbanInstance
.addCard({ Id: 2,
Status: Open});
Update Card Method: updateCard(key, data)

<EJ.Kanban>
</EJ.Kanban>
var kanbanObj =
$(“.e-kanban”).
ejKanban(“instance”);
kanbanObj.KanbanEdit
.updateCard(2, { Id: 2,
Status: Open});
Method: updateCard(cardData)

<KanbanComponent
ref={ kanban =>
this.kanbanInstance
= kanban}>
</KanbanComponent>
this.kanbanInstance
.updateCard({ Id: 2,
Status: Open});
Delete Card Method:
KanbanEdit.deleteCard(key)

<EJ.Kanban>
</EJ.Kanban>
var kanbanObj =
$(“.e-kanban”).
ejKanban(“instance”);
kanbanObj.KanbanEdit
.deleteCard(2);
Method: deleteCard()

<KanbanComponent
ref={ kanban =>
this.kanbanInstance
= kanban}>
</KanbanComponent>
this.kanbanInstance
.deleteCard(2);
Cancel Edit Method:
KanbanEdit.cancelEdit()

<EJ.Kanban>
</EJ.Kanban>
var kanbanObj =
$(“.e-kanban”).
ejKanban(“instance”);
kanbanObj.KanbanEdit
.cancelEdit();
Not Available
End Edit Method:
KanbanEdit.endEdit()

<EJ.Kanban>
</EJ.Kanban>
var kanbanObj =
$(“.e-kanban”).
ejKanban(“instance”);
kanbanObj.KanbanEdit
.endEdit();
Not Available
Start Edit Method:
KanbanEdit.startEdit
($div or key)


<EJ.Kanban>
</EJ.Kanban>
var kanbanObj =
$(“.e-kanban”).
ejKanban(“instance”);
kanbanObj.KanbanEdit
.startEdit(2);
Method:
openDialog(action, data)

<KanbanComponent
ref={ kanban =>
this.kanbanInstance
= kanban}>
</KanbanComponent>
this.kanbanInstance
.openDialog(“Add”)
Set Validation Method: KanbanEdit
.setValidationToField(name, rules)

<EJ.Kanban>
</EJ.Kanban>
var kanbanObj =
$(“.e-kanban”).
ejKanban(“instance”);
kanbanObj.KanbanEdit
.setValidationToField
(“Summary”, { required: true });
Not Available
Close Dialog Not Applicable Method: closeDialog()
<KanbanComponent
ref={ kanban =>
this.kanbanInstance
= kanban}>
</KanbanComponent>
this.kanbanInstance
.closeDialog();
Triggers before
dialog Open
Not Applicable Event: dialogOpen

<KanbanComponent
dialogOpen={this.dialogOpen.bind(this)}
</KanbanComponent>
private dialogOpen(event) {}
Triggers when
dialog close
Not Applicable Event: dialogClose

<KanbanComponent
dialogClose={this.dialogClose.bind(this)}
</KanbanComponent>
private dialogClose(event) {}
Triggers after
the card is edited
Event: endEdit

<EJ.Kanban
endEdit={endEdit}>
</EJ.Kanban>
function endEdit(args){}
Not Applicable
Triggers after
the card is deleted
Event: endDelete

<EJ.Kanban
endDelete={endDelete}>
</EJ.Kanban>
function endDelete(args){}
Not Applicable
Triggers before
task is edited
Event: beginEdit

<EJ.Kanban
beginEdit={beginEdit}>
</EJ.Kanban>
function beginEdit(args){}
Not Applicable

Dialog Editing Fields

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

<EJ.Kanban
editSettings-editItems
={editItems}>
</EJ.Kanban>
var editItems = []
Property: fields

<KanbanComponent
dialogSettings={{
fields: this.fields
}}>
</KanbanComponent>
private fields:
DialogFieldsModel[] = []
Mapping key Property: field

<EJ.Kanban
editSettings-editItems
={editItems}>
</EJ.Kanban>
var editItems = [{
field: “Id”}]
Property: key

<KanbanComponent
dialogSettings={{
fields: this.fields
}}>
</KanbanComponent>
private fields:
DialogFieldsModel[] = [{
key: “Id”}]
Label Not Applicable Property: text

<KanbanComponent
dialogSettings={{
fields: this.fields
}}>
</KanbanComponent>
private fields:
DialogFieldsModel[] = [{
text: “ID”,
key: “Id”}]
Type Property: editType

<EJ.Kanban
editSettings-editItems
={editItems}>
</EJ.Kanban>
var editItems = [{
editType: ej.Kanban
.EditingType.String}]
Property: type

<KanbanComponent
dialogSettings={{
fields: this.fields
}}>
</KanbanComponent>
private fields:
DialogFieldsModel[] = [{
type: “TextBox”,
key: “Id”}]
Validation Rules Property: validationRules

<EJ.Kanban
editSettings-editItems
={editItems}>
</EJ.Kanban>
var editItems = [{
validationRules: {
required: true}
}]
Property: validationRules

<KanbanComponent
dialogSettings={{
fields: this.fields
}}>
</KanbanComponent>
private fields:
DialogFieldsModel[] = [{
validationRules: {
required: true}]
Params Property: editParams

<EJ.Kanban
editSettings-editItems
={editItems}>
</EJ.Kanban>
var editItems = [{
editParams: {
decimalPlaces: 2}
}]
Not Applicable
Default value Property: defaultValue

<EJ.Kanban
editSettings-editItems
={editItems}>
</EJ.Kanban>
var editItems = [{
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

<KanbanComponent
enableTooltip=
{true}>
</KanbanComponent>
Template Property:
tooltipSettings.template

<EJ.Kanban
tooltipSettings-template=#tooltipTemplate
>
</EJ.Kanban>
Property: tooltipTemplate

<KanbanComponent
tooltipTemplate=
{this.template.bind(this)}>
</KanbanComponent>

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>
var menuItem = [“Move Right”];
Not Applicable
Disable default Items Property: disableDefaultItems

<EJ.Kanban
contextMenuSettings-enable={true}
contextMenuSettings-disableDefaultItems
={disableDefaultItems}>
</EJ.Kanban>
var disableDefaultItems =
[ej.Kanban.MenuItem.MoveLeft];
Not Applicable
Custom Menu Items Property: customMenuItems

Text:<EJ.Kanban
contextMenuSettings-enable={true}
contextMenuSettings-custommenuitems
={customMenuItems}>
</EJ.Kanban>
var customMenuItems =
[{ text: “Menu1”
}];

Target:
<EJ.Kanban
contextMenuSettings-enable={true}
contextMenuSettings-custommenuitems
={customMenuItems}>
</EJ.Kanban>
var customMenuItems =
[{ target: ej.Kanban
.Target.Header
}];

Template:
<EJ.Kanban
contextMenuSettings-enable={true}
contextMenuSettings-custommenuitems
={customMenuItems}>
</EJ.Kanban>
var customMenuItems =
[{ text: “Hide Column”,
template: “#template”
}];
Not Applicable
Triggers when context
menu item click
Event: contextClick
<EJ.Kanban
contextClick={contextClick}>
</EJ.Kanban>
function contextClick(args){}
Not Applicable
Triggers when context
menu open
Event: contextOpen
<EJ.Kanban
contextOpen={contextOpen}>
</EJ.Kanban>
function contextOpen(args){}
Not Applicable

WorkFlows

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

<EJ.Kanban
workflows={workflow}/>
</EJ.Kanban>
var workflow =[]
Not Applicable
Key Property: key

<EJ.Kanban
workflows={workflow}/>
</EJ.Kanban>
var workflow =[{
key: “Order”}]
Not Applicable
Allowed Transition Property: allowedTransition

<EJ.Kanban
workflows={workflow}/>
</EJ.Kanban>
var 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={filter}/>
</EJ.Kanban>
var filter = []
Not Applicable
Enable Property: allowFiltering

<EJ.Kanban
allowFiltering={true}/>
</EJ.Kanban>
Not Applicable
Text Property: text

<EJ.Kanban
filterSettings={filter}/>
</EJ.Kanban>
var filter = [{
text: “Janet Issues”
}]
Not Applicable
Query Property: query

<EJ.Kanban
filterSettings={filter}/>
</EJ.Kanban>
var filter = [{
query: new ej.Query()
.where(“Assignee”,
“equal”, “Janet”)}]
}]
Not Applicable
Description Property: description

<EJ.Kanban
filterSettings={filter}/>
</EJ.Kanban>
var filter = [{
description:“Display Issues”
}]
}]
Not Applicable
Filter Cards Method: filterCards(query)

<EJ.Kanban>
</EJ.Kanban>
var kanbanObj =
$(“.e-kanban”).
ejKanban(“instance”);
kanbanObj.KanbanFilter
.filterCards(new ej.Query().
where(“Assignee”, “equal”,
“Janet”));
Not Applicable
Clear Method: clearFilter()

<EJ.Kanban>
</EJ.Kanban>
var kanbanObj =
$(“.e-kanban”).
ejKanban(“instance”);
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>
var searchSettings = []
Not Applicable
Enable Property:
allowSearching

<EJ.Kanban
allowSearching={true}/>
</EJ.Kanban>
Not Applicable
Fields Property: fields

<EJ.Kanban
searchSettings={searchSettings}/>
</EJ.Kanban>
var searchSettings = [{
fields: [“Summary”]}]
Not Applicable
Key Property: key

<EJ.Kanban
searchSettings={searchSettings}/>
</EJ.Kanban>
var searchSettings = [{
key: “Task 1”}]
Not Applicable
Operator Property: operator

<EJ.Kanban
searchSettings={searchSettings}/>
</EJ.Kanban>
var searchSettings = [{
operator: “contains”}]
Not Applicable
Ignore Case Property: ignoreCase

<EJ.Kanban
searchSettings={searchSettings}/>
</EJ.Kanban>
var searchSettings = [{
ignoreCase: true}]
Not Applicable
Search Cards Method:
searchCards(searchString)

<EJ.Kanban>
</EJ.Kanban>
var kanbanObj =
$(“.e-kanban”).
ejKanban(“instance”);
kanbanObj.KanbanFilter
.searchCards(“Analyze”);
Not Applicable
Clear Method: clearSearch()

<EJ.Kanban>
</EJ.Kanban>
var kanbanObj =
$(“.e-kanban”).
ejKanban(“instance”);
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-externalDropTarget
="#DroppedKanban">
</EJ.Kanban>
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={scrollSetting}/>
</EJ.Kanban>
var scrollSetting={
height: 400 }
Property: height

<KanbanComponent
height="400">
</KanbanComponent>
width Property: width

<EJ.Kanban
allowScrolling={true}
scrollSettings={scrollSetting}/>
</EJ.Kanban>
var scrollSetting={
width: 400 }
Property: width

<KanbanComponent
width="400">
</KanbanComponent>
Freeze Swimlane Property: allowFreezeSwimlane

<EJ.Kanban
allowScrolling={true}
scrollSettings={scrollSetting}/>
</EJ.Kanban>
var scrollSetting={
allowFreezeSwimlane: true }
Not Applicable
Get Scroll Object Method:
getScrollObject()

<EJ.Kanban>
</EJ.Kanban>
var kanbanObj =
$(“.e-kanban”).
ejKanban(“instance”);
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


<KanbanComponent
cardSettings={{
selectionType: "Single"
</KanbanComponent>
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>
</EJ.Kanban>
var kanbanObj =
$(“.e-kanban”).
ejKanban(“instance”);
kanbanObj.KanbanSelection
.clear();
Not Applicable
Triggers before
card selected
Event: beforeCardSelect

<EJ.Kanban
beforeCardSelect={beforeCardSelect}>
</EJ.Kanban>
function beforeCardSelect(args){}
Event: cardSelecting
<EJ.Kanban
cardSelecting={cardSelecting}>
</EJ.Kanban>
function cardSelecting(args){}
Not Applicable
Triggers after
card selected
Event: cardSelect

<EJ.Kanban
cardSelect={cardSelect}>
</EJ.Kanban>
function cardSelect(args){}
Not Applicable

Toolbar

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

<EJ.Kanban
customToolbarItems-template="#Delete"/>
</EJ.Kanban>
Not Applicable
Triggers toolbar
item click
Event: toolbarClick

<EJ.Kanban
toolbarClick={toolbarClick}>
</EJ.Kanban>
function toolbarClick(args){}
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

<KanbanComponent
enablePersistence={true}
</KanbanComponent>

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

<KanbanComponent
enableRtl={true}
</KanbanComponent>