React

Search results

Migration from Essential JS 1 in React Kanban component

22 Oct 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

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>`

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

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>`

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!