Ej1 api migration in React Kanban component
27 Jan 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> <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> |
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 |
Tooltip
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>
|
Context Menu
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 |
Toolbar
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> |