Ej1 api migration in EJ2 TypeScript Kanban control

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

Cards

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

DataSource

Behavior	API in Essential JS 1	API in Essential JS 2
DataSource	Property: dataSource </br></br>var kanbanObj = new</br> ej.Kanban($(“#Kanban”), { </br>dataSource: data});</br></br>Method: </br>dataSource(datasource)</br>var kanbanObj = $(“#Kanban”)</br>.data(“ejKanban”);</br>kanbanObj.dataSource</br>(newDataSource);	Property: dataSource </br>let obj: Kanban = new</br>Kanban({</br>datasource: data</br>});</br></br>Method: </br>dataSource(datasource)</br>let obj: Kanban = new Kanban({});</br>obj.appendTo(“#kanban”);</br>obj.dataSource(newDataSource);
Triggers before</br>data load	Event: load</br></br>var kanbanObj = new </br>ej.Kanban($(“#Kanban”), {</br>load: function (args) {}});	Event: dataBinding</br></br>let obj: Kanban = new </br>Kanban({ </br>dataBinding: </br>function(args){}});
Triggers after</br>data bounded	Event: dataBound</br></br>var kanbanObj = new </br>ej.Kanban($(“#Kanban”), {</br>dataBound: function (args) {}});	Event: dataBound</br></br>let obj: Kanban = new Kanban({</br>dataBound: function(args){} </br>});

Common:

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

Swimlane:

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

Stacked Headers

Behavior	API in Essential JS 1	API in Essential JS 2
Multiple stacked headers	Property: stackedHeaderColumns</br></br>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br>stackedHeaderRows: [{</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>var kanbanObj = new </br>ej.Kanban($(“#Kanban”), {</br> stackedHeaderRows: [{</br>stackedHeaderColumns: [{</br>headerText: “Unresolved”,</br>column: “Backlog,</br>In Progress”}]}]});	Property: </br>stackedHeaders</br>let obj: Kanban = new</br>Kanban({</br>stackedHeaders: [{</br>text: “To Do”,</br>keyField: “Open,</br>InProgress”}]});</br>obj.appendTo(“#kanban”);

WIP Validation

Behavior	API in Essential JS 1	API in Essential JS 2
Constraints Type	Property: </br>constraints.type</br></br>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br>columns: [{</br>headerText: “Backlog”,</br>key: “Open”,</br>constraints: { </br>type: “swimlane”, max: 5}}]});	Property: </br>constraintType</br></br>var kanban = new</br>ej.Kanban($(“#kanban”), {</br>constraintType:</br>“swimlane” });
Maximum card Count</br>at particular</br>column/swimlane	Property: </br>constraints.max</br></br>var kanbanObj = new </br>ej.Kanban($(“#Kanban”), {</br>columns: [{</br>headerText: “Backlog”,</br>key: “Open”,</br>constraints: {</br>type: “swimlane”,</br>max: 5}}]});	Property: </br>maxCount</br></br>let obj: Kanban = new Kanban({</br> columns:[{</br>headerText: “Backlog”,</br>keyField: “Open”,</br>maxCount: 5}] });</br>obj.appendTo(“#kanban”);
Minimum card Count</br>at particular column	Property:</br>constraints.min</br></br>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br>columns: [{</br>headerText: “Backlog”,</br> key: “Open”,</br>constraints: {</br>type: “swimlane”,</br>min: 2} }]});	Property: minCount</br>let obj: Kanban = new</br>Kanban({</br>columns:[{</br>headerText: “Backlog”,</br>keyField: “Open”,</br>minCount: 2}] });</br>obj.appendTo(“#kanban”);

Keyboard

Behavior	API in Essential JS 1	API in Essential JS 2
KeyBoard	Property: </br>allowKeyboardNavigation</br></br>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br>allowKeyboardNavigation:</br> true});	Property: </br>allowKeyboard</br></br>let obj: Kanban = new</br>Kanban({ </br>allowKeyboard: true });</br>obj.appendTo(“#kanban”);
Settings	Property: </br>keySettings</br></br>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br>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>var kanbanObj = new </br>ej.Kanban($(“#Kanban”), {</br> allowToggleColumn</br>: true});	Property: </br>allowToggle</br></br>let obj: Kanban = new</br> Kanban({</br>columns:[{ </br>allowToggle: true</br>}]});</br>obj.appendTo(“#kanban”);
Toggle	Method: toggleColumn</br>(headerText or $div)</br></br>var kanbanObj = $(“#Kanban”)</br>.data(“ejKanban”);</br>kanbanObj.toggleColumn</br>(“Backlog”);	Not Applicable

Dialog Editing

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

Dialog Editing Fields

Behavior	API in Essential JS 1	API in Essential JS 2
Fields	Property: </br>editItems</br></br>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br> editSettings: { </br>editItems: [] }});	Property: fields</br>let obj: Kanban = new</br>Kanban({</br> dialogSettings: {</br>fields: []}});</br>obj.appendTo(“#kanban”);
Mapping key	Property: field</br></br>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br> editSettings: {</br> editItems: [{ </br>field: “Id”}] }});	Property: key</br></br>let obj: Kanban = new</br> Kanban({</br> dialogSettings: {</br> fields: [{ </br>key: “Id”}]}});</br>obj.appendTo(“#kanban”);
Label	Not Applicable	Property: text</br></br>let obj: Kanban = new Kanban({</br>dialogSettings: {</br> fields: [{ </br>text: “ID”,</br>key: “Id”}]}});</br>obj.appendTo(“#kanban”);
Type	Property: editType</br></br>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br> editSettings: {</br> editItems: [{ </br>editType: ej.Kanban</br>.EditingType.String}]</br> }});	Property: type</br></br>let obj: Kanban = new</br>Kanban({</br> dialogSettings: {</br> fields: [{</br>type: “TextBox”,</br> key: “Id”}]}});</br>obj.appendTo(“#kanban”);
Validation Rules	Property: validationRules</br></br>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br> editSettings: {</br>editItems: [{</br>validationRules: {</br>required: true}}] }});	Property: validationRules</br></br>let obj: Kanban = new Kanban({</br>dialogSettings: {</br> fields: [{</br>validationRules: {</br>required: true}}]}});</br>obj.appendTo(“#kanban”);
Params	Property: editParams</br></br>var kanbanObj = new</br> ej.Kanban($(“#Kanban”), {</br> editSettings: {</br> editItems: [{</br>editParams: {</br> decimalPlaces: 2}}]</br>}});	Not Applicable
Default value	Property: defaultValue</br></br>var kanbanObj = new ej.Kanban(</br>$(“#Kanban”), {</br> editSettings: {</br>editItems: [{</br>defaultValue: “Open”}] }});	Not Applicable

Behavior	API in Essential JS 1	API in Essential JS 2
Default	Property: </br>tooltipSettings.enable</br></br>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br> tooltipSettings: {</br>enable: true</br>}});	Property:</br>enableTooltip</br></br>let obj: Kanban = new</br> Kanban({</br>enableTooltip: true});</br>obj.appendTo(“#kanban”);
Template	Property: </br>tooltipSettings.template</br></br>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br>tooltipSettings: {</br>template: </br>“#tooltipTemplate”</br>}});	Property: tooltipTemplate</br></br>let obj: Kanban = new Kanban({</br>tooltipTemplate:</br>“#tooltipTemplate”});</br>obj.appendTo(“#kanban”);

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

WorkFlows

Behavior	API in Essential JS 1	API in Essential JS 2
Default	Property: workFlows</br></br>var kanbanObj = new </br>ej.Kanban($(“#Kanban”), {</br>workFlows: [{}]});	Not Applicable
Key	Property: key</br></br>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br>workFlows: [{</br>key: “Order”}]});	Not Applicable
Allowed Transition	Property: allowedTransition</br></br>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br> workFlows: [{</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>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br>filterSettings: []});	Not Applicable
Enable	Property: allowFiltering</br></br>$(“#Kanban”).ejKanban({</br>allowFiltering: true});	Not Applicable
Text	Property: text</br></br>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br>filterSettings: [{</br>text: “Janet Issues”</br>}]});	Not Applicable
Query	Property: query</br></br>$(“#Kanban”).ejKanban({</br>filterSettings: [{</br>query: new ej.Query()</br>.where(“Assignee”,</br>“equal”, “Janet”)}]});	Not Applicable
Description	Property: description</br></br>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br>filterSettings: [{</br>description:”Display Issues”</br>}]});	Not Applicable
Filter Cards	Method: filterCards(query)</br></br>var kanbanObj = $(“#Kanban”)</br>.data(“ejKanban”);</br>kanbanObj.KanbanFilter</br>.filterCards(new ej.Query().</br>where(“Assignee”, “equal”,</br> “Janet”));	Not Applicable
Clear	Method: clearFilter()</br></br>var kanbanObj = $(“#Kanban”)</br>.data(“ejKanban”);</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>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br>searchSettings: []});	Not Applicable
Enable	Property: </br>allowSearching</br></br>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br>allowSearching: true</br>});	Not Applicable
Fields	Property: fields</br></br>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br>searchSettings: [{</br>fields: [“Summary”]}]});	Not Applicable
Key	Property: key</br></br>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br>searchSettings: [{ </br>key: “Task 1”}]});	Not Applicable
Operator	Property: operator</br></br>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br>searchSettings: [{</br>operator: “contains”}]});	Not Applicable
Ignore Case	Property: ignoreCase</br></br>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br>searchSettings: [{ </br>ignoreCase: true}]});	Not Applicable
Search Cards	Method: </br>searchCards(searchString)</br></br>var kanbanObj = $(“#Kanban”)</br>.data(“ejKanban”);</br>kanbanObj.KanbanFilter</br>.searchCards(“Analyze”);	Not Applicable
Clear	Method: clearSearch()</br></br>var kanbanObj = $(“#Kanban”)</br>.data(“ejKanban”);</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>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br>allowExternalDragAndDrop</br>: true});	Not Applicable
Target	Property: </br>externalDropTarget</br></br>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br>cardSettings: {</br>externalDropTarget:</br>“#DroppedKanban” }});	Not Applicable

Scrolling

Behavior	API in Essential JS 1	API in Essential JS 2
Default	Property: allowScrolling</br></br>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br> allowScrolling: true});	Not Applicable
height	Property: height</br></br>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br>allowScrolling: true, </br>scrollSettings: { </br>height: 400 }});	Property: height</br></br>let obj: Kanban = new Kanban({</br>height: 400});</br>obj.appendTo(“#kanban”);
width	Property: width</br></br>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br>allowScrolling: true,</br>scrollSettings: { </br>width: 400 }});	Property: width</br></br>let obj: Kanban = new Kanban({</br>width: 400});</br>obj.appendTo(“#kanban”);
Freeze Swimlane	Property: allowFreezeSwimlane</br></br>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br>allowScrolling: true,</br>scrollSettings: {</br>allowFreezeSwimlane: true</br>}});	Not Applicable
Get Scroll Object	Method: </br>getScrollObject()</br></br>var kanbanObj = $(“#Kanban”)</br>.data(“ejKanban”);</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>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br>allowSelection: true});	Property: cardSettings.</br>selectionType</br></br>let obj: Kanban = new</br>Kanban({ cardSettings: {</br>selectionType: “Single”} });</br>obj.appendTo(“#kanban”);
Type	Property: selectionType</br></br>var kanbanObj = new</br> ej.Kanban($(“#Kanban”), { </br>selectionType: “single”});	It is covered under </br>selectionType property.
Hover	Property: allowHover</br></br>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br>allowHover: true});	Not Applicable
Clear	Method: clear()</br></br>var kanbanObj = $(“#Kanban”)</br>.data(“ejKanban”);</br>kanbanObj.KanbanSelection</br>.clear();	Not Applicable
Triggers before</br>card selected	Event: beforeCardSelect</br></br>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br>beforeCardSelect:</br>function (args) {}});</br></br>Event: cardSelecting </br>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br>cardSelecting:</br>function (args) {}});	Not Applicable
Triggers after</br>card selected	Event: cardSelect</br></br>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br>cardSelect: function</br>(args) {}});	Not Applicable

Behavior	API in Essential JS 1	API in Essential JS 2
Custom Toolbar	Property: </br>customToolbarItems.template</br></br>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br>customToolbarItems: {</br>template: “#Delete”</br>}});	Not Applicable
Triggers toolbar</br>item click	Event: toolbarClick</br></br>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br>toolbarClick: function </br>(args) {}});	Not Applicable

Responsive

Behavior	API in Essential JS 1	API in Essential JS 2
Default	Property: isResponsive</br></br>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br>isResponsive: true});	Not Applicable
Minimum width	Property: minWidth</br></br>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br>isResponsive: true,</br>minWidth: 400});	Not Applicable

State Persistence

Behavior	API in Essential JS 1	API in Essential JS 2
Persistence	Not Applicable	Property:</br>enablePersistence</br></br>let obj: Kanban = new Kanban({</br>enablePersistence: true</br>});</br>obj.appendTo(“#kanban”);

Right to Left - RTL

Behavior	API in Essential JS 1	API in Essential JS 2
default	Property: enableRTL</br></br>var kanbanObj = new</br>ej.Kanban($(“#Kanban”), {</br>enableRTL: true})	Property: enableRtl</br></br>let obj: Kanban = new Kanban({</br>enableRtl: true});</br>obj.appendTo(“#kanban”);

Ej1 api migration in EJ2 TypeScript Kanban control

Columns

Cards

DataSource

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