Ej1 api migration in React Kanban component

25 Mar 202524 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</br></br> `<EJ.Kanban><columns>`</br>`</columns></EJ.Kanban>`	Property : columns</br></br>`<KanbanComponent><ColumnsDirective>`</br>`</ColumnsDirective></KanbanComponent>`</br>
Header Text	Property : headerText </br> </br> `<EJ.Kanban><columns>` </br>`<column headerText="Backlog">`</br>`</column>`</br>`</columns></EJ.Kanban>`	Property : headerText </br></br>`<KanbanComponent>`</br>`<ColumnsDirective>`</br>`<ColumnDirective`</br>`headerText="Backlog"/>`</br>`</ColumnsDirective>`</br>`</KanbanComponent>`</br>
Key Field	Property : key </br></br> `<EJ.Kanban><columns>`</br>`<column key="Open">`</br>`</column>`</br>`</columns></EJ.Kanban>`	Property: keyField </br></br>`<KanbanComponent>`</br>`<ColumnsDirective>`</br>`<ColumnDirective`</br>`keyField='Open'/>`</br>`</ColumnsDirective>`</br>`</KanbanComponent>`</br>
Initial Collapsed</br>Columns	Property: isCollapsed</br></br>`<EJ.Kanban><columns>`</br>`<column key="Open"`</br>`headerText="Backlog"`</br>`[isCollapsed]="true">`</br>`</column>`</br>`</columns></EJ.Kanban>`	Property: isExpanded </br></br>`<KanbanComponent>`</br>`<ColumnsDirective>`</br>`<ColumnDirective`</br>`keyField='Open'`</br>`allowToggle='true'`</br> `[isExpanded]='true'/>`</br>`</ColumnsDirective>`</br>`</KanbanComponent>`</br>
Cell Add card button	Property: showAddButton </br></br>`<EJ.Kanban><columns>`</br>`<column key="Open"`</br>`headerText="Backlog"`</br>`[showAddButton]="true">`</br>`</column>`</br>`</columns></EJ.Kanban>`	Property: showAddButton </br></br>`<KanbanComponent>`</br>`<ColumnsDirective>`</br>`<ColumnDirective`</br>`headerText='To do'`</br>`keyField='Open'`</br>`[showAddButton]='true'/>`</br>`</ColumnsDirective>`</br>`</KanbanComponent>`</br>
Column card count	Property: enableTotalCount </br></br>`<EJ.Kanban [enableTotalCount]="true">`</br></br>`</EJ.Kanban>`	Property: showItemCount </br> </br>`<KanbanComponent>`</br>`<ColumnsDirective>`</br>`<ColumnDirective`</br>`headerText='To do'`</br>`keyField='Open'`</br>`[showItemCount]='true'/>`</br>`</ColumnsDirective>`</br>`</KanbanComponent>`</br>
Template	Property: headerTemplate </br></br>`<EJ.Kanban><columns>`</br>`<column key="Open"`</br>`headerText="Backlog"`</br>`headerTemplate="#template">`</br>`</column>`</br>`</columns></EJ.Kanban>`	Property: template</br></br>`<KanbanComponent>`</br>`<ColumnsDirective>`</br>`<ColumnDirective`</br>`headerText='To do'`</br>`keyField='Open'`</br>`template='#headerTemplate'/>`</br>`</ColumnsDirective>`</br>`</KanbanComponent>`</br>
Allow Drop	Property: allowDrop </br> </br>`<EJ.Kanban><columns>`</br>`<column key="Open"`</br>`headerText="Backlog"`</br>`[allowDrop]="false">`</br>`</column>`</br>`</columns></EJ.Kanban>`	Property: allowDrop </br></br>`<KanbanComponent>`</br>`<ColumnsDirective>`</br>`<ColumnDirective`</br>`headerText='To do'`</br>`keyField='Open'`</br>`[allowDrop]="false"/>`</br>`</ColumnsDirective>`</br>`</KanbanComponent>`</br>
Allow Drag	Property: allowDrag </br> </br>`<EJ.Kanban><columns>`</br>`<column key="Open"`</br>`headerText="Backlog"`</br>`[allowDrag]="false">`</br>`</column>`</br>`</columns></EJ.Kanban>`	Property: allowDrag </br></br>`<KanbanComponent>`</br>`<ColumnsDirective>`</br>`<ColumnDirective`</br>`headerText='To do'`</br>`keyField='Open'`</br>`[allowDrag]="false"/>`</br>`</ColumnsDirective>`</br>`</KanbanComponent>`</br>
Total Count text	Property: totalCount </br> </br>`<EJ.Kanban><columns>`</br>`<column key="Open"`</br>`headerText="Backlog"`</br>`totalCount-text="Backlog Count">`</br>`</column>`</br>`</columns></EJ.Kanban>`	Not Available
Width	Property: width</br></br>`<EJ.Kanban><columns>`</br>`<column key="Open"`</br>`headerText="Backlog"`</br>`width="200">`</br>`</column>`</br>`</columns></EJ.Kanban>`	Not Available
Visible	Property: visible</br></br>`<EJ.Kanban><columns>`</br>`<column key="Open"`</br>`headerText="Backlog"`</br>`visible={false}>`</br>`</column>`</br>`</columns></EJ.Kanban>`	Not Available
Add/Delete Columns	Method: columns(column, key,</br> [action])</br></br>Add :</br>`<EJ.Kanban>`</br>`</EJ.Kanban>`</br>var kanbanObj =</br> $(“.e-kanban”).</br>ejKanban(“instance”);</br>kanbanObj.columns</br>(“Review”, “Review”, “add”);</br></br>Delete: </br>kanbanObj.columns</br>(“Review”, “Review”, “remove”);</br>	Method: addColumn(columnOptions,</br> index)</br></br>`<KanbanComponent`</br>`ref={ kanban => this.`</br>`kanbanInstance = kanban}>`</br>`</KanbanComponent>`</br>this.kanbanInstance</br>.addColumn({ </br>headerText: “Review”,</br> keyField: “Review”</br>}, 2);</br></br>Method: deleteColumn(index) </br></br>this.kanbanInstance.deleteColumn(2);
Show Columns	Method: showColumns(headerText) </br></br>`<EJ.Kanban>`</br>`</EJ.Kanban>`</br>var kanbanObj =</br> $(“.e-kanban”).</br>ejKanban(“instance”);</br>kanbanObj.</br>showColumns(“Testing”);</br></br>	Method: showColumn(key) </br></br>`<KanbanComponent`</br>`ref={ kanban =>`</br>`this.kanbanInstance`</br>`= kanban}>`</br>`</KanbanComponent>`</br>this.kanbanInstance</br>.showColumn</br>(“Testing”);</br>
Hide Columns	Method: hideColumns(headerText) </br></br>`<EJ.Kanban>`</br>`</EJ.Kanban>`</br>var kanbanObj =</br> $(“.e-kanban”).</br>ejKanban(“instance”);</br>kanbanObj.</br>hideColumns(“Testing”);</br></br>	Method: hideColumns(key) </br></br>`<KanbanComponent`</br>`ref={ kanban =>`</br>`this.kanbanInstance =`</br> `kanban}>`</br>`</KanbanComponent>`</br>this.kanbanInstance</br>.hideColumn</br>(“Testing”);</br>
Get Visible</br>Column Names	Method: getVisibleColumnNames()</br></br>`<EJ.Kanban>`</br>`</EJ.Kanban>`</br>var kanbanObj =</br> $(“.e-kanban”).</br>ejKanban(“instance”);</br>kanbanObj.</br>getVisibleColumnNames();</br></br>	Not Applicable
Get Column</br>By Header Text	Method: getColumnByHeaderText</br>(headerText)</br></br>`<EJ.Kanban>`</br>`</EJ.Kanban>`</br>var kanbanObj =</br> $(“.e-kanban”).</br>ejKanban(“instance”);</br>kanbanObj.</br>getColumnByHeaderText</br>(“Testing”);</br>	Not Applicable
Get Column Data	Not Applicable	Method: getColumnData()</br></br>`<KanbanComponent`</br>`ref={ kanban =>`</br>`this.kanbanInstance`</br>`= kanban}>`</br>`</KanbanComponent>`</br>this.kanbanInstance</br>.getColumnData();</br>
Triggers after</br>cell is click	Event: cellClick</br></br>`<EJ.Kanban`</br>`cellClick={cellClick}>`</br>`</EJ.Kanban>`</br>function cellClick(args){}</br>	Not Applicable

Cards

Behavior	API in Essential^® JS 1	API in Essential^® JS 2
Card unique field	Property : </br>fields.primaryKey</br></br>`<EJ.Kanban`</br>`fields-primaryKey="Id">`</br>`</EJ.Kanban>`	Property : </br>cardSettings.headerField</br>`<KanbanComponent`</br>`cardSettings={{`</br>`headerField: "Id"}}>`</br>`</KanbanComponent>`</br>
Content	Property: </br>fields.content </br></br>`<EJ.Kanban`</br>`fields-content`</br>`="Summary">`</br>`</EJ.Kanban>`	Property : </br>cardSettings.contentField</br>`<KanbanComponent`</br>`cardSettings={{`</br>`contentField: 'Summary'>`</br>`</KanbanComponent>`</br>
Tag	Property: </br>fields.tag </br></br>`<EJ.Kanban`</br>`fields-tag="Tags">`</br>`</EJ.Kanban>`	Property : </br>cardSettings.tagsField</br>`<KanbanComponent`</br>`cardSettings={{`</br>`tagsField: 'Tags'>`</br>`</KanbanComponent>`</br>
Left border color	Property: </br>fields.color</br></br>`<EJ.Kanban fields-color="Type" cardSettings-colorMapping={colormap}>`</br>`</EJ.Kanban>`</br>var colormap = {</br>“#cb2027”: “Bug,Story”,</br>“#67ab47”: “Improvement”,</br>“#fbae19”: “Epic”,</br>“#6a5da8”: “Others”</br> };</br>	Property: </br>cardSettings.grabberField</br>`<KanbanComponent`</br>`cardSettings={{`</br>`grabberField: "color">`</br>`</KanbanComponent>`</br>
Header	Property: </br>fields.title</br></br>`<EJ.Kanban`</br> `fields-title="Assignee"`</br>`</EJ.Kanban>`	Card Unique mapping</br> field is displayed </br>on card header.
Image	Property: </br>fields.imageUrl</br></br>`<EJ.Kanban`</br> `fields-imageUrl="ImgUrl"`</br>`</EJ.Kanban>`</br>	Not Applicable
CSS class	Not Applicable	Property : </br>cardSettings.</br>footerCssField</br></br>`<KanbanComponent`</br>`cardSettings={{`</br>`footerCssField: "classNames">`</br>`</KanbanComponent>`</br>
Template	Property: </br>cardSettings.template</br></br>`<EJ.Kanban`</br>`cardSettings-template`</br>`="#template"`</br>`</EJ.Kanban>`	Property: </br>cardSettings.template</br></br>`<KanbanComponent`</br>`cardSettings={{`</br>`template:`</br>`this.cardTemplate.bind(this)>`</br>`</KanbanComponent>`</br>
Toggle Card	Method: toggleCard</br>($div or id)</br></br>`<EJ.Kanban>`</br>`</EJ.Kanban>`</br>var kanbanObj =</br> $(“.e-kanban”).</br>ejKanban(“instance”);</br>kanbanObj.</br>toggleCard(“2”);</br></br>	Not Applicable
Get Card Details	Not Applicable	Method: </br>getCardDetails(target)</br></br>`<KanbanComponent`</br>`ref={ kanban =>`</br>`this.kanbanInstance =`</br> `kanban}>`</br>`</KanbanComponent>`</br>this.kanbanInstance</br>.getCardDetails(</br>obj.element</br>.querySelector(“.e-card”));
Get Selected Cards	Not Applicable	Method: </br>getSelectedCards()</br></br>`<KanbanComponent`</br>`ref={ kanban =>`</br>`this.kanbanInstance =`</br> `kanban}>`</br>`</KanbanComponent>`</br>this.kanbanInstance</br>.getSelectedCards();
Card Click	Event: cardClick</br></br>`<EJ.Kanban`</br>`cardClick={cardClick}>`</br>`</EJ.Kanban>`</br>function cardClick(args){}</br>	Event: cardClick </br></br>`<KanbanComponent`</br>`cardClick={this.cardClick.bind(this)}`</br>`</KanbanComponent>`</br>private cardClick() {}</br>
Card Double Click	Event: cardDoubleClick</br></br>`<EJ.Kanban`</br>`cardDoubleClick={cardDoubleClick}>`</br>`</EJ.Kanban>`</br>function cardDoubleClick(args){}</br>	Event: cardDoubleClick </br></br> `<KanbanComponent`</br>`cardDoubleClick={this.cardDoubleClick.bind(this)}`</br>`</KanbanComponent>`</br>private cardDoubleClick() {}</br>
Triggers when start</br>the drag	Event: cardDragStart</br></br>`<EJ.Kanban`</br>`cardDragStart={cardDragStart}>`</br>`</EJ.Kanban>`</br>function cardDragStart(args){}</br>	Event: dragStart</br></br>`<KanbanComponent`</br>`dragStart={this.dragStart.bind(this)}`</br>`</KanbanComponent>`</br>private dragStart() {}</br>
Triggers when card</br>is dragged	Event: cardDrag</br></br>`<EJ.Kanban`</br>`cardDrag={cardDrag}>`</br>`</EJ.Kanban>`</br>function cardDrag(args){}</br>	Event: drag </br></br>`<KanbanComponent`</br>`drag={this.drag.bind(this)}`</br>`</KanbanComponent>`</br>private drag() {}</br>
Triggers when card</br>dragging stops	Event: cardDragStop</br></br>`<EJ.Kanban`</br>`cardDragStop={cardDragStop}>`</br>`</EJ.Kanban>`</br>function cardDragStop(args){}</br>	Event: dragStop</br></br>`<KanbanComponent`</br>`dragStop={this.dragStop.bind(this)}`</br>`</KanbanComponent>`</br>private dragStop() {}</br>
Triggers after save</br>the data when dropped	Event: cardDrop</br></br>`<EJ.Kanban`</br>`cardDrop={cardDrop}>`</br>`</EJ.Kanban>`</br>function cardDrop(args){}</br>	Not Applicable
Triggers after</br>cell is click	Event: cellClick</br></br>`<EJ.Kanban`</br>`cellClick={cellClick}>`</br>`</EJ.Kanban>`</br>function cellClick(args){}</br>	Not Applicable
Triggers each</br>card rendered	Event: queryCellInfo</br></br>`<EJ.Kanban`</br>`queryCellInfo={queryCellInfo}>`</br>`</EJ.Kanban>`</br>function queryCellInfo(args){}</br>	Event: cardRendered</br></br>`<KanbanComponent`</br>`cardRendered={this.cardRendered.bind(this)}`</br>`</KanbanComponent>`</br>private cardRendered() {}</br>

DataSource

Behavior	API in Essential^® JS 1	API in Essential^® JS 2
Card unique field	Property : </br>fields.primaryKey</br></br>`<EJ.Kanban`</br>`fields-primaryKey="Id">`</br>`</EJ.Kanban>`	Property : </br>cardSettings.headerField</br>`<KanbanComponent`</br>`cardSettings={{`</br>`headerField: "Id"}}>`</br>`</KanbanComponent>`</br>
DataSource	Property: dataSource </br></br>`<EJ.Kanban`</br>`dataSource={window.kanbanData}>`</br>`</EJ.Kanban>`</br> Method: </br>dataSource(datasource)</br>`<EJ.Kanban>`</br>`</EJ.Kanban>`</br>var kanbanObj =</br> $(“.e-kanban”).</br>ejKanban(“instance”);</br>kanbanObj.</br>dataSource</br>(newDataSource);</br></br>	Property: dataSource </br></br>`<KanbanComponent`</br>`dataSource={this.data}>`</br>`</KanbanComponent>`</br>Method: </br>dataSource(datasource)</br></br>`<KanbanComponent`</br>`ref={ kanban =>`</br>`this.kanbanInstance`</br>`= kanban}>`</br>`</KanbanComponent>`</br>this.kanbanInstance</br>.dataSource(newDataSource);</br>
Triggers before</br>data load	Event: load</br></br>`<EJ.Kanban`</br>`load={load}>`</br>`</EJ.Kanban>`</br>function load(args){}</br>	Event: dataBinding</br></br>`<KanbanComponent`</br>`dataBinding={this.dataBinding.bind(this)}`</br>`</KanbanComponent>`</br>private dataBinding() {}</br>
Triggers after</br>data bounded	Event: dataBound</br></br>`<EJ.Kanban`</br>`dataBound={dataBound}>`</br>`</EJ.Kanban>`</br>function dataBound(args){}</br>	Event: dataBound</br></br>`<KanbanComponent`</br>`dataBound={this.dataBound.bind(this)}`</br>`</KanbanComponent>`</br>private dataBound() {}</br>

Common

Behavior	API in Essential^® JS 1	API in Essential^® JS 2
Drag And Drop	Property: allowDragAndDrop</br></br>`<EJ.Kanban`</br>`allowDragAndDrop={true}>`</br>`</EJ.Kanban>`	Property: allowDragAndDrop</br></br>`<KanbanComponent`</br>`allowDragAndDrop={true}>`</br>`</KanbanComponent>`</br>
Key Field	Property: keyField</br></br>`<EJ.Kanban`</br>`keyField="Status">`</br>`</EJ.Kanban>`	Property : keyField</br></br>`<KanbanComponent`</br>`keyField="Status">`</br>`</KanbanComponent>`</br>
Title	Property: allowTitle</br></br>`<EJ.Kanban`</br>`allowTitle={true}>`</br>`</EJ.Kanban>`	Not Applicable
CssClass	Property: cssClass</br></br>`<EJ.Kanban`</br>`cssClass="gradient-green">`</br>`</EJ.Kanban>`	Property: cssClass</br></br>`<KanbanComponent`</br>`cssClass= "custom-class">`</br>`</KanbanComponent>`</br>
Print	Property: allowPrinting</br></br>`<EJ.Kanban`</br>`allowPrinting={true}>`</br>`</EJ.Kanban>`</br></br>Method: print()</br></br>`<EJ.Kanban>`</br>`</EJ.Kanban>`</br>var kanbanObj =</br> $(“.e-kanban”).</br>ejKanban(“instance”);</br>kanbanObj.</br>print();	Not Applicable
Touch	Property: enableTouch</br></br>`<EJ.Kanban`</br>`enableTouch={true}>`</br>`</EJ.Kanban>`</br></br>	Not Applicable
Locale	Property: locale</br></br>`<EJ.Kanban`</br>`locale="de-DE">`</br>`</EJ.Kanban>`	Property: locale</br></br>`<KanbanComponent`</br>`locale="de-DE">`</br>`</KanbanComponent>`</br>
Query	Property: query</br></br>`<EJ.Kanban`</br>`query={query}>`</br>`</EJ.Kanban>`</br>var query =</br>ej.Query().select(“”)	Property : query</br></br>`<KanbanComponent`</br>`query={query}>`</br>`</KanbanComponent>`</br>var query=</br> new Query().select(“”)});</br>
Refresh	Method: </br>refresh([templateRefresh])</br></br>`<EJ.Kanban>`</br>`</EJ.Kanban>`</br>var kanbanObj =</br> $(“.e-kanban”).</br>ejKanban(“instance”);</br>kanbanObj.refresh();</br>	Method: refresh()</br></br>`<KanbanComponent`</br>`ref={ kanban =>`</br>`this.kanbanInstance`</br>`= kanban}>`</br>`</KanbanComponent>`</br>this.kanbanInstance</br>.refresh();</br>
Refresh Template	Method: </br>refreshTemplate()</br></br>`<EJ.Kanban>`</br>`</EJ.Kanban>`</br>var kanbanObj =</br> $(“.e-kanban”).</br>ejKanban(“instance”);</br>kanbanObj.refreshTemplate();	Not Applicable
Destroy	Method: destroy()</br></br>`<EJ.Kanban>`</br>`</EJ.Kanban>`</br>var kanbanObj =</br> $(“.e-kanban”).</br>ejKanban(“instance”);</br>kanbanObj.destroy();	Method: destroy()</br>`<KanbanComponent`</br>`ref={ kanban =>`</br>`this.kanbanInstance`</br>`= kanban}>`</br>`</KanbanComponent>`</br>this.kanbanInstance</br>.destroy();</br>
Get Header Table	Method: getHeaderTable()</br></br>`<EJ.Kanban>`</br>`</EJ.Kanban>`</br>var kanbanObj =</br> $(“.e-kanban”).</br>ejKanban(“instance”);</br>kanbanObj.getHeaderTable();	Not Applicable
Show Spinner	Not Applicable	Method: showSpinner()</br></br>`<KanbanComponent`</br>`ref={ kanban =>`</br>`this.kanbanInstance`</br>`= kanban}>`</br>`</KanbanComponent>`</br>this.kanbanInstance</br>.showSpinner();</br>
Hide Spinner	Not Applicable	Method: hideSpinner()</br></br>`<KanbanComponent`</br>`ref={ kanban =>`</br>`this.kanbanInstance`</br>`= kanban}>`</br>`</KanbanComponent>`</br>this.kanbanInstance</br>.hideSpinner();</br>
Triggers before</br>every action	Event: actionBegin</br></br>`<EJ.Kanban`</br>`actionBegin={actionBegin}>`</br>`</EJ.Kanban>`</br>function actionBegin(args){}</br>	Event: actionBegin</br></br>`<KanbanComponent`</br>`actionBegin={this.actionBegin.bind(this)}`</br>`</KanbanComponent>`</br>private actionBegin(event) {}</br>
Triggers on successfully</br>completion of actions	Event: actionComplete</br></br>`<EJ.Kanban`</br>`actionComplete={actionComplete}>`</br>`</EJ.Kanban>`</br>function actionComplete(args){}</br>	Event: actionComplete</br></br>`<KanbanComponent`</br>`actionComplete={this.actionComplete.bind(this)}`</br>`</KanbanComponent>`</br>private actionComplete(event) {}</br>
Triggers on</br>action failure	Event: </br>actionFailure</br></br>`<EJ.Kanban`</br>`actionFailure={actionFailure}>`</br>`</EJ.Kanban>`</br>function actionFailure(args){}</br>	Event: actionFailure</br></br>`<KanbanComponent`</br>`actionFailure={this.actionFailure.bind(this)}`</br>`</KanbanComponent>`</br>private actionFailure(event) {}</br>
Triggers after</br>Kanban rendered	Event: create</br></br>`<EJ.Kanban`</br>`create={create}>`</br>`</EJ.Kanban>`</br>function create(args){}</br>	Event: created</br></br>`<KanbanComponent`</br>`created={this.created.bind(this)}`</br>`</KanbanComponent>`</br>private created(event) {}</br>
Triggers when</br>header click	Event: headerClick</br></br>`<EJ.Kanban`</br>`headerClick={headerClick}>`</br>`</EJ.Kanban>`</br>function headerClick(args){}</br>	Not Applicable
Triggers when destroy	Event: destroy</br></br>`<EJ.Kanban`</br>`destroy={destroy}>`</br>`</EJ.Kanban>`</br>function destroy(args){}</br>	Event: destroy</br></br>`<KanbanComponent`</br>`destroy={this.destroy.bind(this)}`</br>`</KanbanComponent>`</br>private destroy(event) {}</br>

Swimlane

Behavior	API in Essential^® JS 1	API in Essential^® JS 2
Default	Property: swimlaneKey</br></br>`<EJ.Kanban`</br>`fields-swimlaneKey="Assignee">`</br>`</EJ.Kanban>`	Property: keyField</br></br>`<KanbanComponent`</br>`swimlaneSettings={{`</br>`keyField: "Assignee" }} >`</br>`</KanbanComponent>`</br>
Header	Property: headers</br></br>`<EJ.Kanban`</br>`headers={headers}>`</br>`</EJ.Kanban>`</br>`var headers =` </br>`[{ </br>text: "Andrew",`</br>`key: "Andrew Fuller"}];`</br> } </br>}	Property: textField</br></br>`<KanbanComponent`</br>`swimlaneSettings={{`</br>`textField: "AssigneeName" }} >`</br>`</KanbanComponent>`</br>
Drag And Drop	Property: allowDragAndDrop</br></br>`<EJ.Kanban`</br>`swimlaneSettings={{allowDragAndDrop: true}}>`</br>`</EJ.Kanban>`	Property: allowDragAndDrop</br></br>`<KanbanComponent`</br>`swimlaneSettings={{`</br>`allowDragAndDrop: true}} >`</br>`</KanbanComponent>`</br>
Card Count	Property: showCount</br></br>`<EJ.Kanban`</br>`swimlaneSettings={{showCount: true}}>`</br>`</EJ.Kanban>`	Property: showItemCount</br></br>`<KanbanComponent`</br>`swimlaneSettings={{`</br>`showItemCount: true}} >`</br>`</KanbanComponent>`</br>
Empty Row	Property: </br>showEmptySwimlane</br></br>`<EJ.Kanban`</br>`swimlaneSettings={{showEmptySwimlane: true}}>`</br>`</EJ.Kanban>`	Property: showEmptyRow</br></br>`<KanbanComponent`</br>`swimlaneSettings={{`</br>`showEmptyRow: true}} >`</br>`</KanbanComponent>`</br>
Sorting	Not Available	Property: </br>sortDirection</br></br>`<KanbanComponent`</br>`swimlaneSettings={{`</br>`sortDirection:`</br>`"Descending"}} >`</br>`</KanbanComponent>`</br>
Expand All	Method: expandAll()</br></br>`<EJ.Kanban>`</br>`</EJ.Kanban>`</br>var kanbanObj =</br> $(“.e-kanban”).</br>ejKanban(“instance”);</br>kanbanObj.KanbanSwimlane</br>.expandAll();	Not Applicable
Collapse All	Method: collapseAll()</br></br>`<EJ.Kanban>`</br>`</EJ.Kanban>`</br>var kanbanObj =</br> $(“.e-kanban”).</br>ejKanban(“instance”);</br>kanbanObj.KanbanSwimlane</br>.collapseAll();	Not Applicable
Toggle	Method: toggle($div or key)</br></br>`<EJ.Kanban>`</br>`</EJ.Kanban>`</br>var kanbanObj =</br> $(“.e-kanban”).</br>ejKanban(“instance”);</br>kanbanObj.</br>KanbanSwimlane</br>.toggle($(“.e-slexpandcollapse”)</br>.eq(1));	Not Applicable
Get Swimlane Data	Not Applicable	Method: </br>getSwimlaneData(keyField)</br></br>`<KanbanComponent`</br>`ref={ kanban =>`</br>`this.kanbanInstance`</br>`= kanban}>`</br>`</KanbanComponent>`</br>this.kanbanInstance</br>.getSwimlaneData(“Janet”);</br>
Triggers before swimlane</br>icon click event	Event: swimlaneClick</br></br>`<EJ.Kanban`</br>`swimlaneClick={swimlaneClick}>`</br>`</EJ.Kanban>`</br>function swimlaneClick(args){}</br>	Not Applicable

Stacked Headers

Behavior	API in Essential^® JS 1	API in Essential^® JS 2
Multiple stacked headers	Property: stackedHeaderColumns</br></br>`<EJ.Kanban`</br>`stackedHeaderRows={stackedHeaderRow}>`</br>`</EJ.Kanban>`</br>var stackedHeaderRow = </br>[{ stackedHeaderColumns: [{ </br> headerText: “Status”,</br>column: “Backlog,</br>In Progress, Testing, </br>Done”}] },</br> { stackedHeaderColumns: [{</br> headerText: “Unresolved”,</br>column: “Backlog,</br>In Progress”}]}]}};	Not Applicable
Single Stacked Header	Property: stackedHeaderColumns</br></br>`<EJ.Kanban`</br>`stackedHeaderRows={stackedHeaderRow}>`</br>`</EJ.Kanban>`</br>var stackedHeaderRow = </br>[{ stackedHeaderColumns: [{ </br> headerText: “Status”,</br>column: “Backlog,</br>In Progress, Testing, </br>Done”}] },</br> { stackedHeaderColumns: [{</br>headerText: “Unresolved”,</br>column: “Backlog,</br>In Progress”}]}]}};	Property: </br>stackedHeaders</br>`<KanbanComponent>`</br>`<StackedHeadersDirective>`</br>`<StackedHeaderDirective`</br>`text='To Do'`</br>`keyFields='Open,`</br>`InProgress'>`</br>`</StackedHeaderDirective>`</br>`</KanbanComponent>`</br>

WIP Validation

Behavior	API in Essential^® JS 1	API in Essential^® JS 2
Constraints Type	Property: </br>constraints.type</br></br>`<EJ.Kanban>`</br>`<columns>`</br>`<column`</br>`headerText="Backlog"`</br>`key="Open"`</br>`constraints-type`</br>`="swimlane" />`</br>`</EJ.Kanban>`	Property: </br>constraintType</br></br>`<KanbanComponent`</br>`constraintType="swimlane">`</br>`</KanbanComponent>`</br>
Maximum card Count</br>at particular</br>column/swimlane	Property: </br>constraints.max</br></br>`<EJ.Kanban>`</br>`<columns>`</br>`<column`</br>`headerText="Backlog"`</br>`key="Open"`</br>`constraints-type`</br>`="swimlane"`</br> `constraints-max`</br>`="5" />`</br>`</columns></EJ.Kanban>`	Property: </br>maxCount</br></br>`<KanbanComponent>`</br>`<ColumnsDirective>`</br>`<ColumnDirective`</br>`headerText='Backlog`</br>`keyField='Open'`</br>`maxCount='5'/>`</br>`</ColumnsDirective>`</br>`</KanbanComponent>`</br>
Minimum card Count</br>at particular column	Property:</br>constraints.min</br></br>`<EJ.Kanban>`</br>`<columns>`</br>`<column`</br>`headerText="Backlog"`</br>`key="Open"`</br>`constraints-type`</br>`="swimlane"`</br> `constraints-min`</br>`="5" />`</br>`</columns></EJ.Kanban>`	Property: minCount</br>`<KanbanComponent>`</br>`<ColumnsDirective>`</br>`<ColumnDirective`</br>`headerText='Backlog`</br>`keyField='Open'`</br>`minCount='5'/>`</br>`</ColumnsDirective>`</br>`</KanbanComponent>`</br>

Keyboard

Behavior	API in Essential^® JS 1	API in Essential^® JS 2
KeyBoard	Property: </br>allowKeyboardNavigation</br></br>`<EJ.Kanban`</br>`allowKeyboardNavigation={true}>`</br>`</EJ.Kanban>`	Property: allowDragAndDrop</br></br>`<KanbanComponent`</br>`allowKeyboard={true}>`</br>`</KanbanComponent>`</br>
Settings	Property: </br>keySettings</br></br>`<EJ.Kanban`</br>`keySettings={keySettings}>`</br>`</EJ.Kanban>`</br>var keySettings = {</br> focus: “e”,</br> insertCard: “45”</br>}	Not Applicable

Toggle Columns

Behavior	API in Essential^® JS 1	API in Essential^® JS 2
Default	Property: </br>allowToggleColumn</br></br>`<EJ.Kanban`</br>`allowToggleColumn={true}>`</br>`</EJ.Kanban>`	Property: </br>allowToggle</br></br>`<KanbanComponent>`</br>`<ColumnsDirective>`</br>`<ColumnDirective`</br>`allowToggle={true}`</br>`/>`</br>`</ColumnsDirective>`</br>`</KanbanComponent>`</br>
Toggle	Method: toggleColumn</br>(headerText or $div)</br></br>`<EJ.Kanban>`</br>`</EJ.Kanban>`</br>var kanbanObj =</br> $(“.e-kanban”).</br>ejKanban(“instance”);</br>kanbanObj.</br>toggleColumn</br>(“Backlog”);	Not Applicable

Dialog Editing

Behavior	API in Essential^® JS 1	API in Essential^® JS 2
Fields	Property: editItems</br></br>`<EJ.Kanban`</br>`editSettings-editItems`</br>`={editItems}>`</br>`</EJ.Kanban>`</br>var editItems = []</br>	Property: fields</br></br>`<KanbanComponent`</br>`dialogSettings={{`</br>`fields: this.fields`</br>`}}>`</br>`</KanbanComponent>`</br>private fields:</br>DialogFieldsModel[] = []
Dialog Model	Not Available	Property: model</br></br>`<KanbanComponent`</br>`dialogSettings={{`</br>`model: {model}`</br>`}}>`</br>`</KanbanComponent>`</br>private model:</br>DialogModel[] = { width: 250 }
Template	Property: dialogTemplate</br></br>`<EJ.Kanban`</br>`editSettings-dialogTemplate="#template"`</br>`</EJ.Kanban>`</br>	Property: template</br></br>`<KanbanComponent`</br>`dialogSettings={{`</br>`template:`</br>`this.dialogTemplate }}>`</br>`</KanbanComponent>`
Enable Editing	Property: allowEditing</br></br>`<EJ.Kanban`</br>`editSettings-allowEditing`</br>`={true}>`</br>`</EJ.Kanban>`	In default allowed for editing.
Enable Adding	Property: allowAdding</br></br>`<EJ.Kanban`</br>`editSettings-allowAdding`</br>`={true}>`</br>`</EJ.Kanban>`	Adding applicable using column</br> show add button or</br>public method.
Edit Mode	Property: editMode</br></br>`<EJ.Kanban`</br>`editSettings-editMode`</br>`="dialogtemplate">`</br>`</EJ.Kanban>`	Not Applicable
External Form template	Property:</br>externalFormTemplate</br></br>`<EJ.Kanban`</br>`editSettings-externalFormTemplate`</br>`="#template">`</br>`</EJ.Kanban>`	Not Applicable
External Form Position	Property: </br>externalFormPosition</br></br>`<EJ.Kanban`</br>`editSettings-externalFormPosition`</br>`="bottom">`</br>`</EJ.Kanban>`	Not Applicable
Add Card	Method:</br>KanbanEdit.addCard</br>([primaryKey], [card])</br></br>`<EJ.Kanban>`</br>`</EJ.Kanban>`</br>var kanbanObj =</br> $(“.e-kanban”).</br>ejKanban(“instance”);</br>kanbanObj.KanbanEdit</br>.addCard(“2”,</br>{ Id: 2, Status: Open});</br>	Method:</br></br>addCard(cardData)</br>`<KanbanComponent`</br>`ref={ kanban =>`</br>`this.kanbanInstance`</br>`= kanban}>`</br>`</KanbanComponent>`</br>this.kanbanInstance</br>.addCard({ Id: 2,</br>Status: Open});</br>
Update Card	Method: updateCard(key, data)</br></br>`<EJ.Kanban>`</br>`</EJ.Kanban>`</br>var kanbanObj =</br> $(“.e-kanban”).</br>ejKanban(“instance”);</br>kanbanObj.KanbanEdit</br>.updateCard(2, { Id: 2,</br>Status: Open});</br>	Method: updateCard(cardData)</br></br>`<KanbanComponent`</br>`ref={ kanban =>`</br>`this.kanbanInstance`</br>`= kanban}>`</br>`</KanbanComponent>`</br>this.kanbanInstance</br>.updateCard({ Id: 2,</br>Status: Open});</br>
Delete Card	Method: </br>KanbanEdit.deleteCard(key)</br></br>`<EJ.Kanban>`</br>`</EJ.Kanban>`</br>var kanbanObj =</br> $(“.e-kanban”).</br>ejKanban(“instance”);</br>kanbanObj.KanbanEdit</br>.deleteCard(2);</br>	Method: deleteCard()</br></br>`<KanbanComponent`</br>`ref={ kanban =>`</br>`this.kanbanInstance`</br>`= kanban}>`</br>`</KanbanComponent>`</br>this.kanbanInstance</br>.deleteCard(2);</br>
Cancel Edit	Method: </br>KanbanEdit.cancelEdit()</br></br>`<EJ.Kanban>`</br>`</EJ.Kanban>`</br>var kanbanObj =</br> $(“.e-kanban”).</br>ejKanban(“instance”);</br>kanbanObj.KanbanEdit</br>.cancelEdit();	Not Available
End Edit	Method: </br>KanbanEdit.endEdit()</br></br>`<EJ.Kanban>`</br>`</EJ.Kanban>`</br>var kanbanObj =</br> $(“.e-kanban”).</br>ejKanban(“instance”);</br>kanbanObj.KanbanEdit</br>.endEdit();	Not Available
Start Edit	Method: </br>KanbanEdit.startEdit</br>($div or key)</br></br>`<EJ.Kanban>`</br>`</EJ.Kanban>`</br>var kanbanObj =</br> $(“.e-kanban”).</br>ejKanban(“instance”);</br>kanbanObj.KanbanEdit</br>.startEdit(2);	Method: </br>openDialog(action, data)</br></br>`<KanbanComponent`</br>`ref={ kanban =>`</br>`this.kanbanInstance`</br>`= kanban}>`</br>`</KanbanComponent>`</br>this.kanbanInstance</br>.openDialog(“Add”)</br>
Set Validation	Method: KanbanEdit</br>.setValidationToField(name, rules)</br></br>`<EJ.Kanban>`</br>`</EJ.Kanban>`</br>var kanbanObj =</br> $(“.e-kanban”).</br>ejKanban(“instance”);</br>kanbanObj.KanbanEdit</br>.setValidationToField</br>(“Summary”, { required: true });	Not Available
Close Dialog	Not Applicable	Method: closeDialog()</br>`<KanbanComponent`</br>`ref={ kanban =>`</br>`this.kanbanInstance`</br>`= kanban}>`</br>`</KanbanComponent>`</br>this.kanbanInstance</br>.closeDialog();
Triggers before</br>dialog Open	Not Applicable	Event: dialogOpen</br></br>`<KanbanComponent`</br>`dialogOpen={this.dialogOpen.bind(this)}`</br>`</KanbanComponent>`</br>private dialogOpen(event) {}</br>
Triggers when</br>dialog close	Not Applicable	Event: dialogClose</br></br>`<KanbanComponent`</br>`dialogClose={this.dialogClose.bind(this)}`</br>`</KanbanComponent>`</br>private dialogClose(event) {}</br>
Triggers after</br>the card is edited	Event: endEdit</br></br>`<EJ.Kanban`</br>`endEdit={endEdit}>`</br>`</EJ.Kanban>`</br>function endEdit(args){}</br>	Not Applicable
Triggers after</br>the card is deleted	Event: endDelete</br></br>`<EJ.Kanban`</br>`endDelete={endDelete}>`</br>`</EJ.Kanban>`</br>function endDelete(args){}</br>	Not Applicable
Triggers before</br>task is edited	Event: beginEdit </br></br>`<EJ.Kanban`</br>`beginEdit={beginEdit}>`</br>`</EJ.Kanban>`</br>function beginEdit(args){}</br>	Not Applicable

Dialog Editing Fields

Behavior	API in Essential^® JS 1	API in Essential^® JS 2
Fields	Property: </br>editItems</br></br>`<EJ.Kanban`</br>`editSettings-editItems`</br>`={editItems}>`</br>`</EJ.Kanban>`</br>var editItems = []</br>	Property: fields</br></br>`<KanbanComponent`</br>`dialogSettings={{`</br>`fields: this.fields`</br>`}}>`</br>`</KanbanComponent>`</br>private fields:</br>DialogFieldsModel[] = []
Mapping key	Property: field</br></br>`<EJ.Kanban`</br>`editSettings-editItems`</br>`={editItems}>`</br>`</EJ.Kanban>`</br>var editItems = [{ </br>field: “Id”}]</br>	Property: key</br></br>`<KanbanComponent`</br>`dialogSettings={{`</br>`fields: this.fields`</br>`}}>`</br>`</KanbanComponent>`</br>private fields:</br>DialogFieldsModel[] = [{ </br>key: “Id”}]
Label	Not Applicable	Property: text</br></br>`<KanbanComponent`</br>`dialogSettings={{`</br>`fields: this.fields`</br>`}}>`</br>`</KanbanComponent>`</br>private fields:</br>DialogFieldsModel[] = [{ </br>text: “ID”,</br>key: “Id”}]
Type	Property: editType</br></br>`<EJ.Kanban`</br>`editSettings-editItems`</br>`={editItems}>`</br>`</EJ.Kanban>`</br>var editItems = [{ </br>editType: ej.Kanban</br>.EditingType.String}]</br>	Property: type</br></br>`<KanbanComponent`</br>`dialogSettings={{`</br>`fields: this.fields`</br>`}}>`</br>`</KanbanComponent>`</br>private fields:</br>DialogFieldsModel[] = [{</br>type: “TextBox”,</br> key: “Id”}]
Validation Rules	Property: validationRules</br></br>`<EJ.Kanban`</br>`editSettings-editItems`</br>`={editItems}>`</br>`</EJ.Kanban>`</br>var editItems = [{ </br>validationRules: {</br>required: true} </br>}]</br>	Property: validationRules</br></br>`<KanbanComponent`</br>`dialogSettings={{`</br>`fields: this.fields`</br>`}}>`</br>`</KanbanComponent>`</br>private fields:</br>DialogFieldsModel[] = [{ </br>validationRules: {</br>required: true}]
Params	Property: editParams</br></br>`<EJ.Kanban`</br>`editSettings-editItems`</br>`={editItems}>`</br>`</EJ.Kanban>`</br>var editItems = [{ </br>editParams: {</br> decimalPlaces: 2}</br>}]</br>	Not Applicable
Default value	Property: defaultValue</br></br>`<EJ.Kanban`</br>`editSettings-editItems`</br>`={editItems}>`</br>`</EJ.Kanban>`</br>var editItems = [{ </br>defaultValue: “Open”</br>}]</br>	Not Applicable

Behavior	API in Essential^® JS 1	API in Essential^® JS 2
Default	Property: </br>tooltipSettings.enable</br></br>`<EJ.Kanban`</br>`tooltipSettings-enable={true}`</br>`>`</br>`</EJ.Kanban>`	Property:</br>enableTooltip</br></br>`<KanbanComponent`</br>`enableTooltip=`</br>`{true}>`</br>`</KanbanComponent>`
Template	Property: </br>tooltipSettings.template</br></br>`<EJ.Kanban`</br>`tooltipSettings-template=#tooltipTemplate`</br>`>`</br>`</EJ.Kanban>`	Property: tooltipTemplate</br></br>`<KanbanComponent`</br>`tooltipTemplate=`</br>`{this.template.bind(this)}>`</br>`</KanbanComponent>`

Behavior	API in Essential^® JS 1	API in Essential^® JS 2
Default	Property: enable</br></br>`<EJ.Kanban`</br>`contextMenuSettings-enable={true}`</br>`>`</br>`</EJ.Kanban>`	Not Applicable
Menu Items	Property: menuItems</br></br>`<EJ.Kanban`</br>`contextMenuSettings-enable={true}`</br>`contextMenuSettings-menuItems`</br>`={menuItem}>`</br>`</EJ.Kanban>`</br>var menuItem = [“Move Right”];	Not Applicable
Disable default Items	Property: disableDefaultItems</br></br>`<EJ.Kanban`</br>`contextMenuSettings-enable={true}`</br>`contextMenuSettings-disableDefaultItems`</br>`={disableDefaultItems}>`</br>`</EJ.Kanban>`</br>var disableDefaultItems =</br> [ej.Kanban.MenuItem.MoveLeft];	Not Applicable
Custom Menu Items	Property: customMenuItems</br></br>Text:`<EJ.Kanban`</br>`contextMenuSettings-enable={true}`</br>`contextMenuSettings-custommenuitems`</br>`={customMenuItems}>`</br>`</EJ.Kanban>`</br>var customMenuItems =</br> [{ text: “Menu1” </br>}];</br></br>Target:</br>`<EJ.Kanban`</br>`contextMenuSettings-enable={true}`</br>`contextMenuSettings-custommenuitems`</br>`={customMenuItems}>`</br>`</EJ.Kanban>`</br>var customMenuItems =</br> [{ target: ej.Kanban</br>.Target.Header </br>}];</br></br>Template:</br>`<EJ.Kanban`</br>`contextMenuSettings-enable={true}`</br>`contextMenuSettings-custommenuitems`</br>`={customMenuItems}>`</br>`</EJ.Kanban>`</br>var customMenuItems =</br> [{ text: “Hide Column”,</br>template: “#template”</br>}];	Not Applicable
Triggers when context</br>menu item click	Event: contextClick</br>`<EJ.Kanban`</br>`contextClick={contextClick}>`</br>`</EJ.Kanban>`</br>function contextClick(args){}</br>	Not Applicable
Triggers when context</br>menu open	Event: contextOpen</br>`<EJ.Kanban`</br>`contextOpen={contextOpen}>`</br>`</EJ.Kanban>`</br>function contextOpen(args){}</br>	Not Applicable

WorkFlows

Behavior	API in Essential^® JS 1	API in Essential^® JS 2
Default	Property: workFlows</br></br>`<EJ.Kanban`</br>`workflows={workflow}/>`</br>`</EJ.Kanban>`</br>var workflow =[]	Not Applicable
Key	Property: key</br></br>`<EJ.Kanban`</br>`workflows={workflow}/>`</br>`</EJ.Kanban>`</br>var workflow =[{</br>key: “Order”}]	Not Applicable
Allowed Transition	Property: allowedTransition</br></br>`<EJ.Kanban`</br>`workflows={workflow}/>`</br>`</EJ.Kanban>`</br>var workflow =[{</br>key: “Order”, </br>allowedTransitions: “Served”</br>}]	Not Applicable

Filtering

Behavior	API in Essential^® JS 1	API in Essential^® JS 2
Default	Property: filterSettings</br></br>`<EJ.Kanban`</br>`filterSettings={filter}/>`</br>`</EJ.Kanban>`</br>var filter = []	Not Applicable
Enable	Property: allowFiltering</br></br>`<EJ.Kanban`</br>`allowFiltering={true}/>`</br>`</EJ.Kanban>`</br>	Not Applicable
Text	Property: text</br></br>`<EJ.Kanban`</br>`filterSettings={filter}/>`</br>`</EJ.Kanban>`</br>var filter = [{</br>text: “Janet Issues”</br>}]	Not Applicable
Query	Property: query</br></br>`<EJ.Kanban`</br>`filterSettings={filter}/>`</br>`</EJ.Kanban>`</br>var filter = [{</br>query: new ej.Query()</br>.where(“Assignee”,</br>“equal”, “Janet”)}]</br>}]	Not Applicable
Description	Property: description</br></br>`<EJ.Kanban`</br>`filterSettings={filter}/>`</br>`</EJ.Kanban>`</br>var filter = [{</br>description:”Display Issues”</br>}]</br>}]	Not Applicable
Filter Cards	Method: filterCards(query)</br></br>`<EJ.Kanban>`</br>`</EJ.Kanban>`</br>var kanbanObj =</br> $(“.e-kanban”).</br>ejKanban(“instance”);</br>kanbanObj.KanbanFilter</br>.filterCards(new ej.Query().</br>where(“Assignee”, “equal”,</br> “Janet”));	Not Applicable
Clear	Method: clearFilter()</br></br>`<EJ.Kanban>`</br>`</EJ.Kanban>`</br>var kanbanObj =</br> $(“.e-kanban”).</br>ejKanban(“instance”);</br>kanbanObj.KanbanFilter</br>.clearFilter();	Not Applicable

Searching

Behavior	API in Essential^® JS 1	API in Essential^® JS 2
Default	Property: </br>searchSettings</br></br>`<EJ.Kanban`</br>`searchSettings={searchSettings}/>`</br>`</EJ.Kanban>`</br>var searchSettings = []	Not Applicable
Enable	Property: </br>allowSearching</br></br>`<EJ.Kanban`</br>`allowSearching={true}/>`</br>`</EJ.Kanban>`</br>	Not Applicable
Fields	Property: fields</br></br>`<EJ.Kanban`</br>`searchSettings={searchSettings}/>`</br>`</EJ.Kanban>`</br>var searchSettings = [{</br>fields: [“Summary”]}]	Not Applicable
Key	Property: key</br></br>`<EJ.Kanban`</br>`searchSettings={searchSettings}/>`</br>`</EJ.Kanban>`</br>var searchSettings = [{</br>key: “Task 1”}]	Not Applicable
Operator	Property: operator</br></br>`<EJ.Kanban`</br>`searchSettings={searchSettings}/>`</br>`</EJ.Kanban>`</br>var searchSettings = [{</br>operator: “contains”}]	Not Applicable
Ignore Case	Property: ignoreCase</br></br>`<EJ.Kanban`</br>`searchSettings={searchSettings}/>`</br>`</EJ.Kanban>`</br>var searchSettings = [{</br>ignoreCase: true}]	Not Applicable
Search Cards	Method: </br>searchCards(searchString)</br></br>`<EJ.Kanban>`</br>`</EJ.Kanban>`</br>var kanbanObj =</br> $(“.e-kanban”).</br>ejKanban(“instance”);</br>kanbanObj.KanbanFilter</br>.searchCards(“Analyze”);	Not Applicable
Clear	Method: clearSearch()</br></br>`<EJ.Kanban>`</br>`</EJ.Kanban>`</br>var kanbanObj =</br> $(“.e-kanban”).</br>ejKanban(“instance”);</br>kanbanObj.KanbanFilter</br>.clearSearch();	Not Applicable

External Drag And Drop

Behavior	API in Essential^® JS 1	API in Essential^® JS 2
Default	Property: </br>allowExternalDragAndDrop</br></br>`<EJ.Kanban`</br>`allowExternalDragAndDrop={true}/>`</br>`</EJ.Kanban>`</br>	Not Applicable
Target	Property: </br>externalDropTarget</br></br>`<EJ.Kanban`</br> `cardSettings-externalDropTarget`</br>`="#DroppedKanban">`</br>`</EJ.Kanban>`</br>	Not Applicable

Scrolling

Behavior	API in Essential^® JS 1	API in Essential^® JS 2
Default	Property: allowScrolling</br></br>`<EJ.Kanban`</br>`allowScrolling={true}/>`</br>`</EJ.Kanban>`</br>	Not Applicable
height	Property: height</br></br>`<EJ.Kanban`</br>`allowScrolling={true}`</br>`scrollSettings={scrollSetting}/>`</br>`</EJ.Kanban>`</br>var scrollSetting={ </br>height: 400 } </br>	Property: height</br></br>`<KanbanComponent`</br>`height="400">`</br>`</KanbanComponent>`</br>
width	Property: width</br></br>`<EJ.Kanban`</br>`allowScrolling={true}`</br>`scrollSettings={scrollSetting}/>`</br>`</EJ.Kanban>`</br>var scrollSetting={ </br>width: 400 } </br>	Property: width</br></br>`<KanbanComponent`</br>`width="400">`</br>`</KanbanComponent>`</br>
Freeze Swimlane	Property: allowFreezeSwimlane</br></br>`<EJ.Kanban`</br>`allowScrolling={true}`</br>`scrollSettings={scrollSetting}/>`</br>`</EJ.Kanban>`</br>var scrollSetting={ </br>allowFreezeSwimlane: true } </br>	Not Applicable
Get Scroll Object	Method: </br>getScrollObject()</br></br>`<EJ.Kanban>`</br>`</EJ.Kanban>`</br>var kanbanObj =</br> $(“.e-kanban”).</br>ejKanban(“instance”);</br>kanbanObj.getScrollObject();	Not Applicable

Card Selection and Hover

Behavior	API in Essential^® JS 1	API in Essential^® JS 2
Enable	Property: allowSelection</br></br>`<EJ.Kanban`</br>`allowSelection={true}/>`</br>`</EJ.Kanban>`</br>	Property: cardSettings.</br>selectionType</br></br>`<KanbanComponent`</br>`cardSettings={{`</br>`selectionType: "Single"`</br>`</KanbanComponent>`</br>
Type	Property: selectionType</br></br>`<EJ.Kanban`</br>`selectionType="single"/>`</br>`</EJ.Kanban>`</br>	It is covered under </br>selectionType property.
Hover	Property: allowHover</br></br>`<EJ.Kanban`</br>`allowHover={true}/>`</br>`</EJ.Kanban>`</br>	Not Applicable
Clear	Method: clear()</br></br>`<EJ.Kanban>`</br>`</EJ.Kanban>`</br>var kanbanObj =</br> $(“.e-kanban”).</br>ejKanban(“instance”);</br>kanbanObj.KanbanSelection</br>.clear();	Not Applicable
Triggers before</br>card selected	Event: beforeCardSelect</br></br>`<EJ.Kanban`</br>`beforeCardSelect={beforeCardSelect}>`</br>`</EJ.Kanban>`</br>function beforeCardSelect(args){}</br>Event: cardSelecting </br>`<EJ.Kanban`</br>`cardSelecting={cardSelecting}>`</br>`</EJ.Kanban>`</br>function cardSelecting(args){}</br>	Not Applicable
Triggers after</br>card selected	Event: cardSelect</br></br>`<EJ.Kanban`</br>`cardSelect={cardSelect}>`</br>`</EJ.Kanban>`</br>function cardSelect(args){}</br>	Not Applicable

Behavior	API in Essential^® JS 1	API in Essential^® JS 2
Custom Toolbar	Property: </br>customToolbarItems.template</br></br>`<EJ.Kanban`</br>`customToolbarItems-template="#Delete"/>`</br>`</EJ.Kanban>`</br>	Not Applicable
Triggers toolbar</br>item click	Event: toolbarClick</br></br>`<EJ.Kanban`</br>`toolbarClick={toolbarClick}>`</br>`</EJ.Kanban>`</br>function toolbarClick(args){}</br>	Not Applicable

Responsive

Behavior	API in Essential^® JS 1	API in Essential^® JS 2
Default	Property: isResponsive</br></br>`<EJ.Kanban`</br>`isResponsive={true}/>`</br>`</EJ.Kanban>`</br>	Not Applicable
Minimum width	Property: minWidth</br></br>`<EJ.Kanban`</br>`isResponsive={true}`</br>`minWidth='400'/>`</br>`</EJ.Kanban>`</br>	Not Applicable

State Persistence

Behavior	API in Essential^® JS 1	API in Essential^® JS 2
Persistence	Not Applicable	Property:</br>enablePersistence</br></br>`<KanbanComponent`</br>`enablePersistence={true}`</br>`</KanbanComponent>`</br>

Right to Left - RTL

Behavior	API in Essential^® JS 1	API in Essential^® JS 2
default	Property: enableRTL</br></br>`<EJ.Kanban`</br>`enableRTL={true}/>`</br>`</EJ.Kanban>`</br>	Property: enableRtl</br></br>`<KanbanComponent`</br>`enableRtl={true}`</br>`</KanbanComponent>`</br>

Search docs

Ask HelpBot

Search docs

Ask HelpBot

Ej1 api migration in React Kanban component

Columns

Cards

DataSource

Common

Swimlane

Stacked Headers

WIP Validation

Keyboard

Toggle Columns

Dialog Editing

Dialog Editing Fields

Tooltip

Context Menu

WorkFlows

Filtering

Searching

External Drag And Drop

Scrolling

Card Selection and Hover

Responsive

State Persistence

Right to Left - RTL

Ej1 api migration in React Kanban component

Columns

Cards

DataSource

Common

Swimlane

Stacked Headers

WIP Validation

Keyboard

Toggle Columns

Dialog Editing

Dialog Editing Fields

Tooltip

Context Menu

WorkFlows

Filtering

Searching

External Drag And Drop

Scrolling

Card Selection and Hover

Toolbar

Responsive

State Persistence

Right to Left - RTL