Contents
- 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
Having trouble getting help?
Contact Support
Contact Support
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> |
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> |