This article describes the API migration process of Kanban component from Essential JS 1 to Essential JS 2.
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property : columns <EJ.Kanban><columns> </columns></EJ.Kanban> |
Property : columns<KanbanComponent><ColumnsDirective> </ColumnsDirective></KanbanComponent> |
Header Text | Property : headerText <EJ.Kanban><columns> <column headerText="Backlog"> </column> </columns></EJ.Kanban> |
Property : headerText <KanbanComponent> <ColumnsDirective> <ColumnDirective headerText="Backlog"/> </ColumnsDirective> </KanbanComponent> |
Key Field | Property : key <EJ.Kanban><columns> <column key="Open"> </column> </columns></EJ.Kanban> |
Property: keyField <KanbanComponent> <ColumnsDirective> <ColumnDirective keyField='Open'/> </ColumnsDirective> </KanbanComponent> |
Initial CollapsedColumns | Property: isCollapsed<EJ.Kanban><columns> <column key="Open" headerText="Backlog" [isCollapsed]="true"> </column> </columns></EJ.Kanban> |
Property: isExpanded <KanbanComponent> <ColumnsDirective> <ColumnDirective keyField='Open' allowToggle='true' [isExpanded]='true'/> </ColumnsDirective> </KanbanComponent> |
Cell Add card button | Property: showAddButton <EJ.Kanban><columns> <column key="Open" headerText="Backlog" [showAddButton]="true"> </column> </columns></EJ.Kanban> |
Property: showAddButton <KanbanComponent> <ColumnsDirective> <ColumnDirective headerText='To do' keyField='Open' [showAddButton]='true'/> </ColumnsDirective> </KanbanComponent> |
Column card count | Property: enableTotalCount <EJ.Kanban [enableTotalCount]="true"> </EJ.Kanban> |
Property: showItemCount <KanbanComponent> <ColumnsDirective> <ColumnDirective headerText='To do' keyField='Open' [showItemCount]='true'/> </ColumnsDirective> </KanbanComponent> |
Template | Property: headerTemplate <EJ.Kanban><columns> <column key="Open" headerText="Backlog" headerTemplate="#template"> </column> </columns></EJ.Kanban> |
Property: template<KanbanComponent> <ColumnsDirective> <ColumnDirective headerText='To do' keyField='Open' template='#headerTemplate'/> </ColumnsDirective> </KanbanComponent> |
Allow Drop | Property: allowDrop <EJ.Kanban><columns> <column key="Open" headerText="Backlog" [allowDrop]="false"> </column> </columns></EJ.Kanban> |
Property: allowDrop <KanbanComponent> <ColumnsDirective> <ColumnDirective headerText='To do' keyField='Open' [allowDrop]="false"/> </ColumnsDirective> </KanbanComponent> |
Allow Drag | Property: allowDrag <EJ.Kanban><columns> <column key="Open" headerText="Backlog" [allowDrag]="false"> </column> </columns></EJ.Kanban> |
Property: allowDrag <KanbanComponent> <ColumnsDirective> <ColumnDirective headerText='To do' keyField='Open' [allowDrag]="false"/> </ColumnsDirective> </KanbanComponent> |
Total Count text | Property: totalCount <EJ.Kanban><columns> <column key="Open" headerText="Backlog" totalCount-text="Backlog Count"> </column> </columns></EJ.Kanban> |
Not Available |
Width | Property: width<EJ.Kanban><columns> <column key="Open" headerText="Backlog" width="200"> </column> </columns></EJ.Kanban> |
Not Available |
Visible | Property: visible<EJ.Kanban><columns> <column key="Open" headerText="Backlog" visible={false}> </column> </columns></EJ.Kanban> |
Not Available |
Add/Delete Columns | Method: columns(column, key, [action])Add :<EJ.Kanban> </EJ.Kanban> var kanbanObj = $(“.e-kanban”).ejKanban(“instance”);kanbanObj.columns(“Review”, “Review”, “add”);Delete: kanbanObj.columns(“Review”, “Review”, “remove”); |
Method: addColumn(columnOptions, index)<KanbanComponent ref={ kanban => this. kanbanInstance = kanban}> </KanbanComponent> this.kanbanInstance.addColumn({ headerText: “Review”, keyField: “Review”}, 2);Method: deleteColumn(index) this.kanbanInstance.deleteColumn(2); |
Show Columns | Method: showColumns(headerText) <EJ.Kanban> </EJ.Kanban> var kanbanObj = $(“.e-kanban”).ejKanban(“instance”);kanbanObj.showColumns(“Testing”); |
Method: showColumn(key) <KanbanComponent ref={ kanban => this.kanbanInstance = kanban}> </KanbanComponent> this.kanbanInstance.showColumn(“Testing”); |
Hide Columns | Method: hideColumns(headerText) <EJ.Kanban> </EJ.Kanban> var kanbanObj = $(“.e-kanban”).ejKanban(“instance”);kanbanObj.hideColumns(“Testing”); |
Method: hideColumns(key) <KanbanComponent ref={ kanban => this.kanbanInstance = kanban}> </KanbanComponent> this.kanbanInstance.hideColumn(“Testing”); |
Get VisibleColumn Names | Method: getVisibleColumnNames()<EJ.Kanban> </EJ.Kanban> var kanbanObj = $(“.e-kanban”).ejKanban(“instance”);kanbanObj.getVisibleColumnNames(); |
Not Applicable |
Get ColumnBy Header Text | Method: getColumnByHeaderText(headerText)<EJ.Kanban> </EJ.Kanban> var kanbanObj = $(“.e-kanban”).ejKanban(“instance”);kanbanObj.getColumnByHeaderText(“Testing”); |
Not Applicable |
Get Column Data | Not Applicable | Method: getColumnData()<KanbanComponent ref={ kanban => this.kanbanInstance = kanban}> </KanbanComponent> this.kanbanInstance.getColumnData(); |
Triggers aftercell is click | Event: cellClick<EJ.Kanban cellClick={cellClick}> </EJ.Kanban> function cellClick(args){} |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Card unique field | Property : fields.primaryKey<EJ.Kanban fields-primaryKey="Id"> </EJ.Kanban> |
Property : cardSettings.headerField<KanbanComponent cardSettings={{ headerField: "Id"}}> </KanbanComponent> |
Content | Property: fields.content <EJ.Kanban fields-content ="Summary"> </EJ.Kanban> |
Property : cardSettings.contentField<KanbanComponent cardSettings={{ contentField: 'Summary'> </KanbanComponent> |
Tag | Property: fields.tag <EJ.Kanban fields-tag="Tags"> </EJ.Kanban> |
Property : cardSettings.tagsField<KanbanComponent cardSettings={{ tagsField: 'Tags'> </KanbanComponent> |
Left border color | Property: fields.color<EJ.Kanban fields-color="Type" cardSettings-colorMapping={colormap}> </EJ.Kanban> var colormap = {“#cb2027”: “Bug,Story”,“#67ab47”: “Improvement”,“#fbae19”: “Epic”,“#6a5da8”: “Others” }; |
Property: cardSettings.grabberField<KanbanComponent cardSettings={{ grabberField: "color"> </KanbanComponent> |
Header | Property: fields.title<EJ.Kanban fields-title="Assignee" </EJ.Kanban> |
Card Unique mapping field is displayed on card header. |
Image | Property: fields.imageUrl<EJ.Kanban fields-imageUrl="ImgUrl" </EJ.Kanban> |
Not Applicable |
CSS class | Not Applicable | Property : cardSettings.footerCssField<KanbanComponent cardSettings={{ footerCssField: "classNames"> </KanbanComponent> |
Template | Property: cardSettings.template<EJ.Kanban cardSettings-template ="#template" </EJ.Kanban> |
Property: cardSettings.template<KanbanComponent cardSettings={{ template: this.cardTemplate.bind(this)> </KanbanComponent> |
Toggle Card | Method: toggleCard($div or id)<EJ.Kanban> </EJ.Kanban> var kanbanObj = $(“.e-kanban”).ejKanban(“instance”);kanbanObj.toggleCard(“2”); |
Not Applicable |
Get Card Details | Not Applicable | Method: getCardDetails(target)<KanbanComponent ref={ kanban => this.kanbanInstance = kanban}> </KanbanComponent> this.kanbanInstance.getCardDetails(obj.element.querySelector(“.e-card”)); |
Get Selected Cards | Not Applicable | Method: getSelectedCards()<KanbanComponent ref={ kanban => this.kanbanInstance = kanban}> </KanbanComponent> this.kanbanInstance.getSelectedCards(); |
Card Click | Event: cardClick<EJ.Kanban cardClick={cardClick}> </EJ.Kanban> function cardClick(args){} |
Event: cardClick <KanbanComponent cardClick={this.cardClick.bind(this)} </KanbanComponent> private cardClick() {} |
Card Double Click | Event: cardDoubleClick<EJ.Kanban cardDoubleClick={cardDoubleClick}> </EJ.Kanban> function cardDoubleClick(args){} |
Event: cardDoubleClick <KanbanComponent cardDoubleClick={this.cardDoubleClick.bind(this)} </KanbanComponent> private cardDoubleClick() {} |
Triggers when startthe drag | Event: cardDragStart<EJ.Kanban cardDragStart={cardDragStart}> </EJ.Kanban> function cardDragStart(args){} |
Event: dragStart<KanbanComponent dragStart={this.dragStart.bind(this)} </KanbanComponent> private dragStart() {} |
Triggers when cardis dragged | Event: cardDrag<EJ.Kanban cardDrag={cardDrag}> </EJ.Kanban> function cardDrag(args){} |
Event: drag <KanbanComponent drag={this.drag.bind(this)} </KanbanComponent> private drag() {} |
Triggers when carddragging stops | Event: cardDragStop<EJ.Kanban cardDragStop={cardDragStop}> </EJ.Kanban> function cardDragStop(args){} |
Event: dragStop<KanbanComponent dragStop={this.dragStop.bind(this)} </KanbanComponent> private dragStop() {} |
Triggers after savethe data when dropped | Event: cardDrop<EJ.Kanban cardDrop={cardDrop}> </EJ.Kanban> function cardDrop(args){} |
Not Applicable |
Triggers aftercell is click | Event: cellClick<EJ.Kanban cellClick={cellClick}> </EJ.Kanban> function cellClick(args){} |
Not Applicable |
Triggers eachcard rendered | Event: queryCellInfo<EJ.Kanban queryCellInfo={queryCellInfo}> </EJ.Kanban> function queryCellInfo(args){} |
Event: cardRendered<KanbanComponent cardRendered={this.cardRendered.bind(this)} </KanbanComponent> private cardRendered() {} |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Card unique field | Property : fields.primaryKey<EJ.Kanban fields-primaryKey="Id"> </EJ.Kanban> |
Property : cardSettings.headerField<KanbanComponent cardSettings={{ headerField: "Id"}}> </KanbanComponent> |
DataSource | Property: dataSource <EJ.Kanban dataSource={window.kanbanData}> </EJ.Kanban> Method: dataSource(datasource)<EJ.Kanban> </EJ.Kanban> var kanbanObj = $(“.e-kanban”).ejKanban(“instance”);kanbanObj.dataSource(newDataSource); |
Property: dataSource <KanbanComponent dataSource={this.data}> </KanbanComponent> Method: dataSource(datasource)<KanbanComponent ref={ kanban => this.kanbanInstance = kanban}> </KanbanComponent> this.kanbanInstance.dataSource(newDataSource); |
Triggers beforedata load | Event: load<EJ.Kanban load={load}> </EJ.Kanban> function load(args){} |
Event: dataBinding<KanbanComponent dataBinding={this.dataBinding.bind(this)} </KanbanComponent> private dataBinding() {} |
Triggers afterdata bounded | Event: dataBound<EJ.Kanban dataBound={dataBound}> </EJ.Kanban> function dataBound(args){} |
Event: dataBound<KanbanComponent dataBound={this.dataBound.bind(this)} </KanbanComponent> private dataBound() {} |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Drag And Drop | Property: allowDragAndDrop<EJ.Kanban allowDragAndDrop={true}> </EJ.Kanban> |
Property: allowDragAndDrop<KanbanComponent allowDragAndDrop={true}> </KanbanComponent> |
Key Field | Property: keyField<EJ.Kanban keyField="Status"> </EJ.Kanban> |
Property : keyField<KanbanComponent keyField="Status"> </KanbanComponent> |
Title | Property: allowTitle<EJ.Kanban allowTitle={true}> </EJ.Kanban> |
Not Applicable |
CssClass | Property: cssClass<EJ.Kanban cssClass="gradient-green"> </EJ.Kanban> |
Property: cssClass<KanbanComponent cssClass= "custom-class"> </KanbanComponent> |
Property: allowPrinting<EJ.Kanban allowPrinting={true}> </EJ.Kanban> Method: print()<EJ.Kanban> </EJ.Kanban> var kanbanObj = $(“.e-kanban”).ejKanban(“instance”);kanbanObj.print(); |
Not Applicable | |
Touch | Property: enableTouch<EJ.Kanban enableTouch={true}> </EJ.Kanban> |
Not Applicable |
Locale | Property: locale<EJ.Kanban locale="de-DE"> </EJ.Kanban> |
Property: locale<KanbanComponent locale="de-DE"> </KanbanComponent> |
Query | Property: query<EJ.Kanban query={query}> </EJ.Kanban> var query =ej.Query().select("") |
Property : query<KanbanComponent query={query}> </KanbanComponent> var query= new Query().select("")}); |
Refresh | Method: refresh([templateRefresh])<EJ.Kanban> </EJ.Kanban> var kanbanObj = $(“.e-kanban”).ejKanban(“instance”);kanbanObj.refresh(); |
Method: refresh()<KanbanComponent ref={ kanban => this.kanbanInstance = kanban}> </KanbanComponent> this.kanbanInstance.refresh(); |
Refresh Template | Method: refreshTemplate()<EJ.Kanban> </EJ.Kanban> var kanbanObj = $(“.e-kanban”).ejKanban(“instance”);kanbanObj.refreshTemplate(); |
Not Applicable |
Destroy | Method: destroy()<EJ.Kanban> </EJ.Kanban> var kanbanObj = $(“.e-kanban”).ejKanban(“instance”);kanbanObj.destroy(); |
Method: destroy()<KanbanComponent ref={ kanban => this.kanbanInstance = kanban}> </KanbanComponent> this.kanbanInstance.destroy(); |
Get Header Table | Method: getHeaderTable()<EJ.Kanban> </EJ.Kanban> var kanbanObj = $(“.e-kanban”).ejKanban(“instance”);kanbanObj.getHeaderTable(); |
Not Applicable |
Show Spinner | Not Applicable | Method: showSpinner()<KanbanComponent ref={ kanban => this.kanbanInstance = kanban}> </KanbanComponent> this.kanbanInstance.showSpinner(); |
Hide Spinner | Not Applicable | Method: hideSpinner()<KanbanComponent ref={ kanban => this.kanbanInstance = kanban}> </KanbanComponent> this.kanbanInstance.hideSpinner(); |
Triggers beforeevery action | Event: actionBegin<EJ.Kanban actionBegin={actionBegin}> </EJ.Kanban> function actionBegin(args){} |
Event: actionBegin<KanbanComponent actionBegin={this.actionBegin.bind(this)} </KanbanComponent> private actionBegin(event) {} |
Triggers on successfullycompletion of actions | Event: actionComplete<EJ.Kanban actionComplete={actionComplete}> </EJ.Kanban> function actionComplete(args){} |
Event: actionComplete<KanbanComponent actionComplete={this.actionComplete.bind(this)} </KanbanComponent> private actionComplete(event) {} |
Triggers onaction failure | Event: actionFailure<EJ.Kanban actionFailure={actionFailure}> </EJ.Kanban> function actionFailure(args){} |
Event: actionFailure<KanbanComponent actionFailure={this.actionFailure.bind(this)} </KanbanComponent> private actionFailure(event) {} |
Triggers afterKanban rendered | Event: create<EJ.Kanban create={create}> </EJ.Kanban> function create(args){} |
Event: created<KanbanComponent created={this.created.bind(this)} </KanbanComponent> private created(event) {} |
Triggers whenheader click | Event: headerClick<EJ.Kanban headerClick={headerClick}> </EJ.Kanban> function headerClick(args){} |
Not Applicable |
Triggers when destroy | Event: destroy<EJ.Kanban destroy={destroy}> </EJ.Kanban> function destroy(args){} |
Event: destroy<KanbanComponent destroy={this.destroy.bind(this)} </KanbanComponent> private destroy(event) {} |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: swimlaneKey<EJ.Kanban fields-swimlaneKey="Assignee"> </EJ.Kanban> |
Property: keyField<KanbanComponent swimlaneSettings={{ keyField: "Assignee" }} > </KanbanComponent> |
Header | Property: headers<EJ.Kanban headers={headers}> </EJ.Kanban> var headers = [{ </br>text: "Andrew", key: "Andrew Fuller"}]; } } |
Property: textField<KanbanComponent swimlaneSettings={{ textField: "AssigneeName" }} > </KanbanComponent> |
Drag And Drop | Property: allowDragAndDrop<EJ.Kanban swimlaneSettings={{allowDragAndDrop: true}}> </EJ.Kanban> |
Property: allowDragAndDrop<KanbanComponent swimlaneSettings={{ allowDragAndDrop: true}} > </KanbanComponent> |
Card Count | Property: showCount<EJ.Kanban swimlaneSettings={{showCount: true}}> </EJ.Kanban> |
Property: showItemCount<KanbanComponent swimlaneSettings={{ showItemCount: true}} > </KanbanComponent> |
Empty Row | Property: showEmptySwimlane<EJ.Kanban swimlaneSettings={{showEmptySwimlane: true}}> </EJ.Kanban> |
Property: showEmptyRow<KanbanComponent swimlaneSettings={{ showEmptyRow: true}} > </KanbanComponent> |
Sorting | Not Available | Property: sortDirection<KanbanComponent swimlaneSettings={{ sortDirection: "Descending"}} > </KanbanComponent> |
Expand All | Method: expandAll()<EJ.Kanban> </EJ.Kanban> var kanbanObj = $(“.e-kanban”).ejKanban(“instance”);kanbanObj.KanbanSwimlane.expandAll(); |
Not Applicable |
Collapse All | Method: collapseAll()<EJ.Kanban> </EJ.Kanban> var kanbanObj = $(“.e-kanban”).ejKanban(“instance”);kanbanObj.KanbanSwimlane.collapseAll(); |
Not Applicable |
Toggle | Method: toggle($div or key)<EJ.Kanban> </EJ.Kanban> var kanbanObj = $(“.e-kanban”).ejKanban(“instance”);kanbanObj.KanbanSwimlane.toggle($(“.e-slexpandcollapse”).eq(1)); |
Not Applicable |
Get Swimlane Data | Not Applicable | Method: getSwimlaneData(keyField)<KanbanComponent ref={ kanban => this.kanbanInstance = kanban}> </KanbanComponent> this.kanbanInstance.getSwimlaneData(“Janet”); |
Triggers before swimlaneicon click event | Event: swimlaneClick<EJ.Kanban swimlaneClick={swimlaneClick}> </EJ.Kanban> function swimlaneClick(args){} |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Multiple stacked headers | Property: stackedHeaderColumns<EJ.Kanban stackedHeaderRows={stackedHeaderRow}> </EJ.Kanban> var stackedHeaderRow = [{ stackedHeaderColumns: [{ headerText: “Status”,column: “Backlog,In Progress, Testing, Done”}] }, { stackedHeaderColumns: [{ headerText: “Unresolved”,column: “Backlog,In Progress”}]}]}}; |
Not Applicable |
Single Stacked Header | Property: stackedHeaderColumns<EJ.Kanban stackedHeaderRows={stackedHeaderRow}> </EJ.Kanban> var stackedHeaderRow = [{ stackedHeaderColumns: [{ headerText: “Status”,column: “Backlog,In Progress, Testing, Done”}] }, { stackedHeaderColumns: [{headerText: “Unresolved”,column: “Backlog,In Progress”}]}]}}; |
Property: stackedHeaders<KanbanComponent> <StackedHeadersDirective> <StackedHeaderDirective text='To Do' keyFields='Open, InProgress'> </StackedHeaderDirective> </KanbanComponent> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Constraints Type | Property: constraints.type<EJ.Kanban> <columns> <column headerText="Backlog" key="Open" constraints-type ="swimlane" /> </EJ.Kanban> |
Property: constraintType<KanbanComponent constraintType="swimlane"> </KanbanComponent> |
Maximum card Countat particularcolumn/swimlane | Property: constraints.max<EJ.Kanban> <columns> <column headerText="Backlog" key="Open" constraints-type ="swimlane" constraints-max ="5" /> </columns></EJ.Kanban> |
Property: maxCount<KanbanComponent> <ColumnsDirective> <ColumnDirective headerText='Backlog keyField='Open' maxCount='5'/> </ColumnsDirective> </KanbanComponent> |
Minimum card Countat particular column | Property:constraints.min<EJ.Kanban> <columns> <column headerText="Backlog" key="Open" constraints-type ="swimlane" constraints-min ="5" /> </columns></EJ.Kanban> |
Property: minCount<KanbanComponent> <ColumnsDirective> <ColumnDirective headerText='Backlog keyField='Open' minCount='5'/> </ColumnsDirective> </KanbanComponent> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
KeyBoard | Property: allowKeyboardNavigation<EJ.Kanban allowKeyboardNavigation={true}> </EJ.Kanban> |
Property: allowDragAndDrop<KanbanComponent allowKeyboard={true}> </KanbanComponent> |
Settings | Property: keySettings<EJ.Kanban keySettings={keySettings}> </EJ.Kanban> var keySettings = { focus: “e”, insertCard: “45”} |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: allowToggleColumn<EJ.Kanban allowToggleColumn={true}> </EJ.Kanban> |
Property: allowToggle<KanbanComponent> <ColumnsDirective> <ColumnDirective allowToggle={true} /> </ColumnsDirective> </KanbanComponent> |
Toggle | Method: toggleColumn(headerText or $div)<EJ.Kanban> </EJ.Kanban> var kanbanObj = $(“.e-kanban”).ejKanban(“instance”);kanbanObj.toggleColumn(“Backlog”); |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Fields | Property: editItems<EJ.Kanban editSettings-editItems ={editItems}> </EJ.Kanban> var editItems = [] |
Property: fields<KanbanComponent dialogSettings={{ fields: this.fields }}> </KanbanComponent> private fields:DialogFieldsModel[] = [] |
Dialog Model | Not Available | Property: model<KanbanComponent dialogSettings={{ model: {model} }}> </KanbanComponent> private model:DialogModel[] = { width: 250 } |
Template | Property: dialogTemplate<EJ.Kanban editSettings-dialogTemplate="#template" </EJ.Kanban> |
Property: template<KanbanComponent dialogSettings={{ template: this.dialogTemplate }}> </KanbanComponent> |
Enable Editing | Property: allowEditing<EJ.Kanban editSettings-allowEditing ={true}> </EJ.Kanban> |
In default allowed for editing. |
Enable Adding | Property: allowAdding<EJ.Kanban editSettings-allowAdding ={true}> </EJ.Kanban> |
Adding applicable using column show add button orpublic method. |
Edit Mode | Property: editMode<EJ.Kanban editSettings-editMode ="dialogtemplate"> </EJ.Kanban> |
Not Applicable |
External Form template | Property:externalFormTemplate<EJ.Kanban editSettings-externalFormTemplate ="#template"> </EJ.Kanban> |
Not Applicable |
External Form Position | Property: externalFormPosition<EJ.Kanban editSettings-externalFormPosition ="bottom"> </EJ.Kanban> |
Not Applicable |
Add Card | Method:KanbanEdit.addCard([primaryKey], [card])<EJ.Kanban> </EJ.Kanban> var kanbanObj = $(“.e-kanban”).ejKanban(“instance”);kanbanObj.KanbanEdit.addCard(“2”,{ Id: 2, Status: Open}); |
Method:addCard(cardData)<KanbanComponent ref={ kanban => this.kanbanInstance = kanban}> </KanbanComponent> this.kanbanInstance.addCard({ Id: 2,Status: Open}); |
Update Card | Method: updateCard(key, data)<EJ.Kanban> </EJ.Kanban> var kanbanObj = $(“.e-kanban”).ejKanban(“instance”);kanbanObj.KanbanEdit.updateCard(2, { Id: 2,Status: Open}); |
Method: updateCard(cardData)<KanbanComponent ref={ kanban => this.kanbanInstance = kanban}> </KanbanComponent> this.kanbanInstance.updateCard({ Id: 2,Status: Open}); |
Delete Card | Method: KanbanEdit.deleteCard(key)<EJ.Kanban> </EJ.Kanban> var kanbanObj = $(“.e-kanban”).ejKanban(“instance”);kanbanObj.KanbanEdit.deleteCard(2); |
Method: deleteCard()<KanbanComponent ref={ kanban => this.kanbanInstance = kanban}> </KanbanComponent> this.kanbanInstance.deleteCard(2); |
Cancel Edit | Method: KanbanEdit.cancelEdit()<EJ.Kanban> </EJ.Kanban> var kanbanObj = $(“.e-kanban”).ejKanban(“instance”);kanbanObj.KanbanEdit.cancelEdit(); |
Not Available |
End Edit | Method: KanbanEdit.endEdit()<EJ.Kanban> </EJ.Kanban> var kanbanObj = $(“.e-kanban”).ejKanban(“instance”);kanbanObj.KanbanEdit.endEdit(); |
Not Available |
Start Edit | Method: KanbanEdit.startEdit($div or key)<EJ.Kanban> </EJ.Kanban> var kanbanObj = $(“.e-kanban”).ejKanban(“instance”);kanbanObj.KanbanEdit.startEdit(2); |
Method: openDialog(action, data)<KanbanComponent ref={ kanban => this.kanbanInstance = kanban}> </KanbanComponent> this.kanbanInstance.openDialog(“Add”) |
Set Validation | Method: KanbanEdit.setValidationToField(name, rules)<EJ.Kanban> </EJ.Kanban> var kanbanObj = $(“.e-kanban”).ejKanban(“instance”);kanbanObj.KanbanEdit.setValidationToField(“Summary”, { required: true }); |
Not Available |
Close Dialog | Not Applicable | Method: closeDialog()<KanbanComponent ref={ kanban => this.kanbanInstance = kanban}> </KanbanComponent> this.kanbanInstance.closeDialog(); |
Triggers beforedialog Open | Not Applicable | Event: dialogOpen<KanbanComponent dialogOpen={this.dialogOpen.bind(this)} </KanbanComponent> private dialogOpen(event) {} |
Triggers whendialog close | Not Applicable | Event: dialogClose<KanbanComponent dialogClose={this.dialogClose.bind(this)} </KanbanComponent> private dialogClose(event) {} |
Triggers afterthe card is edited | Event: endEdit<EJ.Kanban endEdit={endEdit}> </EJ.Kanban> function endEdit(args){} |
Not Applicable |
Triggers afterthe card is deleted | Event: endDelete<EJ.Kanban endDelete={endDelete}> </EJ.Kanban> function endDelete(args){} |
Not Applicable |
Triggers beforetask is edited | Event: beginEdit <EJ.Kanban beginEdit={beginEdit}> </EJ.Kanban> function beginEdit(args){} |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Fields | Property: editItems<EJ.Kanban editSettings-editItems ={editItems}> </EJ.Kanban> var editItems = [] |
Property: fields<KanbanComponent dialogSettings={{ fields: this.fields }}> </KanbanComponent> private fields:DialogFieldsModel[] = [] |
Mapping key | Property: field<EJ.Kanban editSettings-editItems ={editItems}> </EJ.Kanban> var editItems = [{ field: “Id”}] |
Property: key<KanbanComponent dialogSettings={{ fields: this.fields }}> </KanbanComponent> private fields:DialogFieldsModel[] = [{ key: “Id”}] |
Label | Not Applicable | Property: text<KanbanComponent dialogSettings={{ fields: this.fields }}> </KanbanComponent> private fields:DialogFieldsModel[] = [{ text: “ID”,key: “Id”}] |
Type | Property: editType<EJ.Kanban editSettings-editItems ={editItems}> </EJ.Kanban> var editItems = [{ editType: ej.Kanban.EditingType.String}] |
Property: type<KanbanComponent dialogSettings={{ fields: this.fields }}> </KanbanComponent> private fields:DialogFieldsModel[] = [{type: “TextBox”, key: “Id”}] |
Validation Rules | Property: validationRules<EJ.Kanban editSettings-editItems ={editItems}> </EJ.Kanban> var editItems = [{ validationRules: {required: true} }] |
Property: validationRules<KanbanComponent dialogSettings={{ fields: this.fields }}> </KanbanComponent> private fields:DialogFieldsModel[] = [{ validationRules: {required: true}] |
Params | Property: editParams<EJ.Kanban editSettings-editItems ={editItems}> </EJ.Kanban> var editItems = [{ editParams: { decimalPlaces: 2}}] |
Not Applicable |
Default value | Property: defaultValue<EJ.Kanban editSettings-editItems ={editItems}> </EJ.Kanban> var editItems = [{ defaultValue: “Open”}] |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: tooltipSettings.enable<EJ.Kanban tooltipSettings-enable={true} > </EJ.Kanban> |
Property:enableTooltip<KanbanComponent enableTooltip= {true}> </KanbanComponent> |
Template | Property: tooltipSettings.template<EJ.Kanban tooltipSettings-template=#tooltipTemplate > </EJ.Kanban> |
Property: tooltipTemplate<KanbanComponent tooltipTemplate= {this.template.bind(this)}> </KanbanComponent> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: enable<EJ.Kanban contextMenuSettings-enable={true} > </EJ.Kanban> |
Not Applicable |
Menu Items | Property: menuItems<EJ.Kanban contextMenuSettings-enable={true} contextMenuSettings-menuItems ={menuItem}> </EJ.Kanban> var menuItem = [“Move Right”]; |
Not Applicable |
Disable default Items | Property: disableDefaultItems<EJ.Kanban contextMenuSettings-enable={true} contextMenuSettings-disableDefaultItems ={disableDefaultItems}> </EJ.Kanban> var disableDefaultItems = [ej.Kanban.MenuItem.MoveLeft]; |
Not Applicable |
Custom Menu Items | Property: customMenuItemsText:<EJ.Kanban contextMenuSettings-enable={true} contextMenuSettings-custommenuitems ={customMenuItems}> </EJ.Kanban> var customMenuItems = [{ text: “Menu1” }];Target:<EJ.Kanban contextMenuSettings-enable={true} contextMenuSettings-custommenuitems ={customMenuItems}> </EJ.Kanban> var customMenuItems = [{ target: ej.Kanban.Target.Header }];Template:<EJ.Kanban contextMenuSettings-enable={true} contextMenuSettings-custommenuitems ={customMenuItems}> </EJ.Kanban> var customMenuItems = [{ text: “Hide Column”,template: “#template”}]; |
Not Applicable |
Triggers when contextmenu item click | Event: contextClick<EJ.Kanban contextClick={contextClick}> </EJ.Kanban> function contextClick(args){} |
Not Applicable |
Triggers when contextmenu open | Event: contextOpen<EJ.Kanban contextOpen={contextOpen}> </EJ.Kanban> function contextOpen(args){} |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: workFlows<EJ.Kanban workflows={workflow}/> </EJ.Kanban> var workflow =[] |
Not Applicable |
Key | Property: key<EJ.Kanban workflows={workflow}/> </EJ.Kanban> var workflow =[{key: “Order”}] |
Not Applicable |
Allowed Transition | Property: allowedTransition<EJ.Kanban workflows={workflow}/> </EJ.Kanban> var workflow =[{key: “Order”, allowedTransitions: “Served”}] |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: filterSettings<EJ.Kanban filterSettings={filter}/> </EJ.Kanban> var filter = [] |
Not Applicable |
Enable | Property: allowFiltering<EJ.Kanban allowFiltering={true}/> </EJ.Kanban> |
Not Applicable |
Text | Property: text<EJ.Kanban filterSettings={filter}/> </EJ.Kanban> var filter = [{text: “Janet Issues”}] |
Not Applicable |
Query | Property: query<EJ.Kanban filterSettings={filter}/> </EJ.Kanban> var filter = [{query: new ej.Query().where(“Assignee”,“equal”, “Janet”)}]}] |
Not Applicable |
Description | Property: description<EJ.Kanban filterSettings={filter}/> </EJ.Kanban> var filter = [{description:“Display Issues”}]}] |
Not Applicable |
Filter Cards | Method: filterCards(query)<EJ.Kanban> </EJ.Kanban> var kanbanObj = $(“.e-kanban”).ejKanban(“instance”);kanbanObj.KanbanFilter.filterCards(new ej.Query().where(“Assignee”, “equal”, “Janet”)); |
Not Applicable |
Clear | Method: clearFilter()<EJ.Kanban> </EJ.Kanban> var kanbanObj = $(“.e-kanban”).ejKanban(“instance”);kanbanObj.KanbanFilter.clearFilter(); |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: searchSettings<EJ.Kanban searchSettings={searchSettings}/> </EJ.Kanban> var searchSettings = [] |
Not Applicable |
Enable | Property: allowSearching<EJ.Kanban allowSearching={true}/> </EJ.Kanban> |
Not Applicable |
Fields | Property: fields<EJ.Kanban searchSettings={searchSettings}/> </EJ.Kanban> var searchSettings = [{fields: [“Summary”]}] |
Not Applicable |
Key | Property: key<EJ.Kanban searchSettings={searchSettings}/> </EJ.Kanban> var searchSettings = [{key: “Task 1”}] |
Not Applicable |
Operator | Property: operator<EJ.Kanban searchSettings={searchSettings}/> </EJ.Kanban> var searchSettings = [{operator: “contains”}] |
Not Applicable |
Ignore Case | Property: ignoreCase<EJ.Kanban searchSettings={searchSettings}/> </EJ.Kanban> var searchSettings = [{ignoreCase: true}] |
Not Applicable |
Search Cards | Method: searchCards(searchString)<EJ.Kanban> </EJ.Kanban> var kanbanObj = $(“.e-kanban”).ejKanban(“instance”);kanbanObj.KanbanFilter.searchCards(“Analyze”); |
Not Applicable |
Clear | Method: clearSearch()<EJ.Kanban> </EJ.Kanban> var kanbanObj = $(“.e-kanban”).ejKanban(“instance”);kanbanObj.KanbanFilter.clearSearch(); |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: allowExternalDragAndDrop<EJ.Kanban allowExternalDragAndDrop={true}/> </EJ.Kanban> |
Not Applicable |
Target | Property: externalDropTarget<EJ.Kanban cardSettings-externalDropTarget ="#DroppedKanban"> </EJ.Kanban> |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: allowScrolling<EJ.Kanban allowScrolling={true}/> </EJ.Kanban> |
Not Applicable |
height | Property: height<EJ.Kanban allowScrolling={true} scrollSettings={scrollSetting}/> </EJ.Kanban> var scrollSetting={ height: 400 } |
Property: height<KanbanComponent height="400"> </KanbanComponent> |
width | Property: width<EJ.Kanban allowScrolling={true} scrollSettings={scrollSetting}/> </EJ.Kanban> var scrollSetting={ width: 400 } |
Property: width<KanbanComponent width="400"> </KanbanComponent> |
Freeze Swimlane | Property: allowFreezeSwimlane<EJ.Kanban allowScrolling={true} scrollSettings={scrollSetting}/> </EJ.Kanban> var scrollSetting={ allowFreezeSwimlane: true } |
Not Applicable |
Get Scroll Object | Method: getScrollObject()<EJ.Kanban> </EJ.Kanban> var kanbanObj = $(“.e-kanban”).ejKanban(“instance”);kanbanObj.getScrollObject(); |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Enable | Property: allowSelection<EJ.Kanban allowSelection={true}/> </EJ.Kanban> |
Property: cardSettings.selectionType<KanbanComponent cardSettings={{ selectionType: "Single" </KanbanComponent> |
Type | Property: selectionType<EJ.Kanban selectionType="single"/> </EJ.Kanban> |
It is covered under selectionType property. |
Hover | Property: allowHover<EJ.Kanban allowHover={true}/> </EJ.Kanban> |
Not Applicable |
Clear | Method: clear()<EJ.Kanban> </EJ.Kanban> var kanbanObj = $(“.e-kanban”).ejKanban(“instance”);kanbanObj.KanbanSelection.clear(); |
Not Applicable |
Triggers beforecard selected | Event: beforeCardSelect<EJ.Kanban beforeCardSelect={beforeCardSelect}> </EJ.Kanban> function beforeCardSelect(args){}Event: cardSelecting <EJ.Kanban cardSelecting={cardSelecting}> </EJ.Kanban> function cardSelecting(args){} |
Not Applicable |
Triggers aftercard selected | Event: cardSelect<EJ.Kanban cardSelect={cardSelect}> </EJ.Kanban> function cardSelect(args){} |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Custom Toolbar | Property: customToolbarItems.template<EJ.Kanban customToolbarItems-template="#Delete"/> </EJ.Kanban> |
Not Applicable |
Triggers toolbaritem click | Event: toolbarClick<EJ.Kanban toolbarClick={toolbarClick}> </EJ.Kanban> function toolbarClick(args){} |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: isResponsive<EJ.Kanban isResponsive={true}/> </EJ.Kanban> |
Not Applicable |
Minimum width | Property: minWidth<EJ.Kanban isResponsive={true} minWidth='400'/> </EJ.Kanban> |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Persistence | Not Applicable | Property:enablePersistence<KanbanComponent enablePersistence={true} </KanbanComponent> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
default | Property: enableRTL<EJ.Kanban enableRTL={true}/> </EJ.Kanban> |
Property: enableRtl<KanbanComponent enableRtl={true} </KanbanComponent> |