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><e-kanban-columns> </e-kanban-columns></ej-kanban> |
Property : columns <ejs-kanban><e-columns> </e-columns></ejs-kanban> |
Header Text | Property : headerText <ej-kanban><e-kanban-columns> <e-kanban-column headerText="Backlog"> </e-kanban-column> |
Property : headerText <ejs-kanban><e-columns> <e-column headerText='To do'> </e-column> </e-columns></ejs-kanban> |
Key Field | Property : key <ej-kanban><e-kanban-columns> <e-kanban-column key="Open"> </e-kanban-column> </e-kanban-columns> </ej-kanban> |
Property: keyField <ejs-kanban><e-columns> <e-column keyField='Open'> </e-column> </e-columns></ejs-kanban> |
Initial CollapsedColumns | Property: isCollapsed<ej-kanban> <e-kanban-columns> <e-kanban-column key="Open" headerText="Backlog" [isCollapsed]="true"> </e-kanban-column> </e-kanban-columns> </ej-kanban> |
Property: isExpanded <ejs-kanban> <e-columns> <e-column headerText='To do' keyField='Open' allowToggle='true' [isExpanded]='true'> </e-column> </e-columns> </ejs-kanban> |
Cell Add card button | Property: showAddButton <ej-kanban> <e-kanban-columns> <e-kanban-column key="Open" headerText="Backlog" [showAddButton]="true"> </e-kanban-column> </e-kanban-columns> </ej-kanban> |
Property: showAddButton <ejs-kanban> <e-columns> <e-column headerText='To do' keyField='Open' [showAddButton]='true'> </e-column> </e-columns> </ejs-kanban> |
Column card count | Property: enableTotalCount <ej-kanban [enableTotalCount]="true"> </ej-kanban> |
Property: showItemCount <ejs-kanban> <e-columns> <e-column headerText='To do' keyField='Open' [showItemCount]='true'> </e-column> </e-columns> </ejs-kanban> |
Template | Property: headerTemplate <ej-kanban> <e-kanban-columns> <e-kanban-column key="Open" headerText="Backlog" headerTemplate="#template"> </e-kanban-column> </e-kanban-columns> </ej-kanban> |
Property: template<ejs-kanban> <e-columns> <e-column headerText='To do' keyField='Open' template='#headerTemplate'> </e-column> </e-columns> </ejs-kanban> |
Allow Drop | Property: allowDrop <ej-kanban> <e-kanban-columns> <e-kanban-column key="Open" headerText="Backlog" [allowDrop]="false"> </e-kanban-column> </e-kanban-columns> </ej-kanban> |
Property: allowDrop <ejs-kanban> <e-columns> <e-column headerText='To do' keyField='Open' [allowDrop]="false"> </e-column> </e-columns> </ejs-kanban> |
Allow Drag | Property: allowDrag <ej-kanban> <e-kanban-columns> <e-kanban-column key="Open" headerText="Backlog" [allowDrag]="false"> </e-kanban-column> </e-kanban-columns> </ej-kanban> |
Property: allowDrag <ejs-kanban> <e-columns> <e-column headerText='To do' keyField='Open' [allowDrag]="false"> </e-column> </e-columns> </ejs-kanban> |
Total Count text | Property: totalCount <ej-kanban> <e-kanban-columns> <e-kanban-column key="Open" headerText="Backlog" [totalCount]="totalcount"> </e-kanban-column> </e-kanban-columns> </ej-kanban> TSexport class AppComponent { constructor() { this.totalcount = { text: “Backlog Count” }; } } |
Not Available |
Width | Property: width<ej-kanban> <e-kanban-columns> <e-kanban-column key="Open" headerText="Backlog" width="200"> </e-kanban-column> </e-kanban-columns> </ej-kanban> |
Not Available |
Visible | Property: visible<ej-kanban> <e-kanban-columns> <e-kanban-column headerText="Backlog" key="Open" [visible]="false"> </e-kanban-column> </e-kanban-columns> </ej-kanban> |
Not Available |
Add/Delete Columns | Method: columns(column, key, [action])Add :<ej-kanban #kanbanObj> </ej-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.columns(“Review”, “Review”, “add”);Delete: kanbanObj.columns(“Review”, “Review”, “remove”); |
Method: addColumn(columnOptions, index)<ejs-kanban #kanbanObj> </ejs-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.addColumn({ headerText: “Review”, keyField: “Review”}, 2);Method: deleteColumn(index) kanbanObj.deleteColumn(2); |
Show Columns | Method: showColumns(headerText) <ej-kanban #kanbanObj> </ej-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.showColumns(“Testing”); |
Method: showColumn(key) <ejs-kanban #kanbanObj> </ejs-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.showColumn(“Testing”); |
Hide Columns | Method: hideColumns(headerText) <ej-kanban #kanbanObj> </ej-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.hideColumns(“Testing”); |
Method: hideColumns(key) <ejs-kanban #kanbanObj> </ejs-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.hideColumn(“Testing”); |
Get VisibleColumn Names | Method: getVisibleColumnNames()<ej-kanban #kanbanObj> </ej-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.getVisibleColumnNames(); |
Not Applicable |
Get ColumnBy Header Text | Method: getColumnByHeaderText(headerText)<ej-kanban #kanbanObj> </ej-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.getColumnByHeaderText(“Testing”); |
Not Applicable |
Get Column Data | Not Applicable | Method: getColumnData()<ejs-kanban #kanbanObj> </ejs-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.getColumnData(); |
Triggers aftercell is click | Event: cellClick<ej-kanban #kanbanObj (cellClick)="cellClick($event)"> </ej-kanban> TS cellClick(event) {} |
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<ejs-kanban [cardSettings]='cardSettings'> <ejs-kanban> TS public cardSettings: CardSettingsModel = {headerField: ‘Id’ }; |
Content | Property: fields.content <ej-kanban fields.content="Summary"> </ej-kanban> |
Property : cardSettings.contentField<ejs-kanban [cardSettings]='cardSettings'> <ejs-kanban> TS public cardSettings: CardSettingsModel = {contentField: ‘Summary’ }; |
Tag | Property: fields.tag <ej-kanban fields.tag="Tags"> </ej-kanban> |
Property : cardSettings.tagsField<ejs-kanban [cardSettings]='cardSettings'> <ejs-kanban> TS public cardSettings: CardSettingsModel = {tagsField: ‘Tags’}; |
Left border color | Property: fields.color<ej-kanban fields.color="Type" [cardSettings.colorMapping] ="color"> </ej-kanban> TSexport class AppComponent { color = {“#cb2027”: “Bug,Story”,“#67ab47”: “Improvement”,“#fbae19”: “Epic”,“#6a5da8”: “Others” }; } |
Property: cardSettings.grabberField<ejs-kanban [cardSettings]='cardSettings'> <ejs-kanban> TS public cardSettings: CardSettingsModel = {grabberField: “color” }; |
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<ejs-kanban [cardSettings]='cardSettings'> <ejs-kanban> TS public cardSettings: CardSettingsModel = {footerCssField: “classNames” }; |
Template | Property: cardSettings.template<ej-kanban cardSettings.template="#template"> </ej-kanban> |
Property: cardSettings.template<ejs-kanban [cardSettings]='cardSettings'> <ejs-kanban> TS public cardSettings: CardSettingsModel = {template: “#cardTemplate” }; |
Toggle Card | Method: toggleCard($div or id)<ej-kanban #kanbanObj> </ej-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.toggleCard(“2”); |
Not Applicable |
Get Card Details | Not Applicable | Method: getCardDetails(target)<ejs-kanban #kanbanObj> </ejs-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.getCardDetails(obj.element.querySelector(“.e-card”)); |
Get Selected Cards | Not Applicable | Method: getSelectedCards()<ejs-kanban #kanbanObj> </ejs-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.getSelectedCards(); |
Card Click | Event: cardClick<ej-kanban #kanbanObj (cardClick)="cardClick($event)"> </ej-kanban> TS cardClick(event) {} |
Event: cardClick <ejs-kanban #kanbanObj (cardClick)="cardClick($event)"> </ejs-kanban> TS cardClick(event) {} |
Card Double Click | Event: cardDoubleClick<ej-kanban #kanbanObj (cardDoubleClick) ="cardDoubleClick($event)"> </ej-kanban> TS cardDoubleClick(event) {} |
Event: cardDoubleClick <ejs-kanban #kanbanObj (cardDoubleClick)= "cardDoubleClick($event)"> </ejs-kanban> TS cardDoubleClick(event) {} |
Triggers when startthe drag | Event: cardDragStart<ej-kanban #kanbanObj (cardDragStart)="cardDragStart($event)"> </ej-kanban> TS cardDragStart(event) {} |
Event: dragStart<ejs-kanban #kanbanObj (dragStart)="dragStart($event)"> </ejs-kanban> TS dragStart(event) {} |
Triggers when cardis dragged | Event: cardDrag<ej-kanban #kanbanObj (cardDrag)="cardDrag($event)"> </ej-kanban> TS cardDrag(event) {} |
Event: drag <ejs-kanban #kanbanObj (drag)="drag($event)"> </ejs-kanban> TS drag(event) {} |
Triggers when carddragging stops | Event: cardDragStop<ej-kanban #kanbanObj (cardDragStop)= "cardDragStop($event)"> </ej-kanban> TS cardDragStop(event) {} |
Event: dragStop<ejs-kanban #kanbanObj (dragStop)="dragStop($event)"> </ejs-kanban> TS dragStop(event) {} |
Triggers after savethe data when dropped | Event: cardDrop<ej-kanban #kanbanObj (cardDrop)="cardDrop($event)"> </ej-kanban> TS cardDrop(event) {} |
Not Applicable |
Triggers aftercell is click | Event: cellClick<ej-kanban #kanbanObj (cellClick)="cellClick($event)"> </ej-kanban> TS cellClick(event) {} |
Not Applicable |
Triggers eachcard rendered | Event: queryCellInfo<ej-kanban #kanbanObj (queryCellInfo)= "queryCellInfo($event)"> </ej-kanban> TS queryCellInfo(event) {} |
Event: cardRendered<ejs-kanban #kanbanObj (cardRendered)= "cardRendered($event)"> </ejs-kanban> TS cardRendered(event) {} |
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<ejs-kanban [cardSettings]='cardSettings'> <ejs-kanban> TS public cardSettings: CardSettingsModel = {headerField: ‘Id’ }; |
DataSource | Property: dataSource <ej-kanban [dataSource]="kanbanData"> </ej-kanban> TSexport class AppComponent { public kanbanData: any; constructor() { this.kanbanData = [];} Method: dataSource(datasource)<ej-kanban #kanbanObj> </ej-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.dataSource(newDataSource); |
Property: dataSource <ejs-kanban [dataSource]="kanbanData"> </ejs-kanban> TS public kanbanData:Object[] = extend([], kanbanData, null, true) as Object[];Method: dataSource(datasource)<ejs-kanban #kanbanObj> </ejs-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.dataSource(newDataSource); |
Triggers beforedata load | Event: load<ej-kanban #kanbanObj (load)="load($event)"> </ej-kanban> TS load(event) {} |
Event: dataBinding<ejs-kanban #kanbanObj (dataBinding)="dataBinding($event)"> </ejs-kanban> TS dataBinding(event) {} |
Triggers afterdata bounded | Event: dataBound<ej-kanban #kanbanObj (dataBound)="dataBound($event)"> </ej-kanban> TS dataBound(event) {} |
Event: dataBound<ejs-kanban #kanbanObj (dataBound)="dataBound($event)"> </ejs-kanban> TS dataBound(event) {} |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Drag And Drop | Property: allowDragAndDrop<ej-kanban [allowDragAndDrop]="true"> </ej-kanban> |
Property: allowDragAndDrop<ejs-kanban [allowDragAndDrop]= true> </ejs-kanban> |
Key Field | Property: keyField<ej-kanban keyField="Status"> </ej-kanban> |
Property : keyField<ejs-kanban keyField="Status"> </ejs-kanban> |
Title | Property: allowTitle<ej-kanban [allowTitle]="true"> </ej-kanban> |
Not Applicable |
CssClass | Property: cssClass<ej-kanban cssClass="gradient-green"> </ej-kanban> |
Property: cssClass<ejs-kanban cssClass= "custom-class"> </ejs-kanban> |
Property: allowPrinting<ej-kanban [allowPrinting]="true"> </ej-kanban> Method: print()<ej-kanban #kanbanObj> </ej-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;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<ejs-kanban locale="de-DE"> </ejs-kanban> |
Query | Property: query<ej-kanban [query]="query"> </ej-kanban> TSexport class AppComponent { constructor() { this.query = ej.Query().select("")});} |
Property : query<ejs-kanban [query]="query"> </ejs-kanban> TS public query= new Query().select("")}); |
Refresh | Method: refresh([templateRefresh])<ej-kanban #kanbanObj> </ej-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.refresh(); |
Method: refresh()<ejs-kanban #kanbanObj> </ejs-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.refresh(); |
Refresh Template | Method: refreshTemplate()<ej-kanban #kanbanObj> </ej-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.refreshTemplate(); |
Not Applicable |
Destroy | Method: destroy()<ej-kanban #kanbanObj> </ej-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.destroy(); |
Method: destroy()<ejs-kanban #kanbanObj> </ejs-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.destroy(); |
Get Header Table | Method: getHeaderTable()<ej-kanban #kanbanObj> </ej-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.getHeaderTable(); |
Not Applicable |
Show Spinner | Not Applicable | Method: showSpinner()<ejs-kanban #kanbanObj> </ejs-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.showSpinner(); |
Hide Spinner | Not Applicable | Method: hideSpinner()<ejs-kanban #kanbanObj> </ejs-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.hideSpinner(); |
Triggers beforeevery action | Event: actionBegin<ej-kanban #kanbanObj (actionBegin)= "actionBegin($event)"> </ej-kanban> TS actionBegin(event) {} |
Event: actionBegin<ejs-kanban #kanbanObj (actionBegin)= "actionBegin($event)"> </ejs-kanban> TS actionBegin(event) {} |
Triggers on successfullycompletion of actions | Event: actionComplete<ej-kanban #kanbanObj (actionComplete)= "actionComplete($event)"> </ej-kanban> TS actionComplete(event) {} |
Event: actionComplete<ejs-kanban #kanbanObj (actionComplete)= "actionComplete($event)"> </ejs-kanban> TS actionComplete(event) {} |
Triggers onaction failure | Event: actionFailure<ej-kanban #kanbanObj (actionFailure)= "actionFailure($event)"> </ej-kanban> TS actionFailure(event) {} |
Event: actionFailure<ejs-kanban #kanbanObj (actionFailure)= "actionFailure($event)"> </ejs-kanban> TS actionFailure(event) {} |
Triggers afterKanban rendered | Event: create<ej-kanban #kanbanObj (create)="create($event)"> </ej-kanban> TS create(event) {} |
Event: created<ejs-kanban #kanbanObj (created)="created($event)"> </ejs-kanban> TS created(event) {} |
Triggers whenheader click | Event: headerClick<ej-kanban #kanbanObj (headerClick)="headerClick($event)"> </ej-kanban> TS headerClick(event) {} |
Not Applicable |
Triggers when destroy | Event: destroy<ej-kanban #kanbanObj (destroy)="destroy($event)"> </ej-kanban> TS destroy(event) {} |
Event: destroy<ejs-kanban #kanbanObj (destroy)="destroy($event)"> </ejs-kanban> TS 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<ejs-kanban [swimlaneSettings]='swimlaneSettings'> </ejs-kanban> TS public swimlaneSettings: SwimlaneSettingsModel = { keyField: ‘Assignee’ }; |
Header | Property: headers<ej-kanban [headers]="headers"> </ej-kanban> TSexport class AppComponent { constructor() { this.headers = [{ text: “Andrew”, key: “Andrew Fuller”}]; } } |
Property: textField<ejs-kanban [swimlaneSettings]='swimlaneSettings'> </ejs-kanban> TS public swimlaneSettings: SwimlaneSettingsModel = { textField: “AssigneeName” }; |
Drag And Drop | Property: allowDragAndDrop<ej-kanban [swimlaneSettings]="swimlaneSettings"> </ej-kanban> TSexport class AppComponent { constructor() { this.swimlaneSettings = { allowDragAndDrop: true } } } |
Property: allowDragAndDrop<ejs-kanban [swimlaneSettings]='swimlaneSettings'> </ejs-kanban> TS public swimlaneSettings: SwimlaneSettingsModel = { allowDragAndDrop: true }; |
Card Count | Property: showCount<ej-kanban [swimlaneSettings]="swimlaneSettings"> </ej-kanban> TSexport class AppComponent { constructor() { this.swimlaneSettings = { showCount: true } } } |
Property: showItemCount<ejs-kanban [swimlaneSettings]='swimlaneSettings'> </ejs-kanban> TS public swimlaneSettings: SwimlaneSettingsModel = { showItemCount: true }; |
Empty Row | Property: showEmptySwimlane<ej-kanban [swimlaneSettings]="swimlaneSettings"> </ej-kanban> TSexport class AppComponent { constructor() { this.swimlaneSettings = { showEmptySwimlane: true } } } |
Property: showEmptyRow<ejs-kanban [swimlaneSettings]='swimlaneSettings'> </ejs-kanban> TS public swimlaneSettings: SwimlaneSettingsModel = { showEmptyRow: true }; |
Sorting | Not Available | Property: sortDirection<ejs-kanban [swimlaneSettings]='swimlaneSettings'> </ejs-kanban> TS public swimlaneSettings: SwimlaneSettingsModel = { sortDirection: “Descending” }; |
Expand All | Method: expandAll()<ej-kanban #kanbanObj> </ej-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.KanbanSwimlane.expandAll(); |
Not Applicable |
Collapse All | Method: collapseAll()<ej-kanban #kanbanObj> </ej-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.KanbanSwimlane.collapseAll(); |
Not Applicable |
Toggle | Method: toggle($div or key)<ej-kanban #kanbanObj> </ej-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.KanbanSwimlane.toggle($(“.e-slexpandcollapse”).eq(1)); |
Not Applicable |
Get Swimlane Data | Not Applicable | Method: getSwimlaneData(keyField)<ejs-kanban #kanbanObj> </ejs-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.getSwimlaneData(“Janet”); |
Triggers before swimlaneicon click event | Event: swimlaneClick<ej-kanban #kanbanObj (swimlaneClick)="swimlaneClick($event)"> </ej-kanban> TS swimlaneClick(event) {} |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Multiple stacked headers | Property: stackedHeaderColumns<ej-kanban [stackedHeaderRows]= "stackedHeaderRow"> </ej-kanban> TSexport class AppComponent { constructor() { this.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> TSexport class AppComponent { constructor() { this.stackedHeaderRow = [{ stackedHeaderColumns: [{ headerText: “Status”,column: “Backlog,In Progress, Testing, Done”}] }, { stackedHeaderColumns: [{headerText: “Unresolved”,column: “Backlog,In Progress”}]}]}}; |
Property: stackedHeaders<ejs-kanban> <e-stackedHeaders> <e-stackedHeader text='To Do' keyFields='Open, InProgress'> </e-stackedHeader> </e-stackedHeaders> </ejs-kanban> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Constraints Type | Property: constraints.type<ej-kanban> <e-kanban-columns> <e-kanban-column headerText="Backlog", key: "Open", [constraints]="constraint"> </e-kanban-column> </ej-kanban> TSexport class AppComponent { constraint = { max: ‘2’ };}; |
Property: constraintType<ejs-kanban constraintType="swimlane"> </ejs-kanban> |
Maximum card Countat particularcolumn/swimlane | Property: constraints.max<ej-kanban> <e-kanban-columns> <e-kanban-column headerText="Backlog", key: "Open", [constraints]="constraint"> </e-kanban-column> </ej-kanban> TSexport class AppComponent { constraint = {type: “swimlane”,max: 5};}; |
Property: maxCount<ejs-kanban> <e-columns> <e-column headerText='Backlog' keyField='Open' maxCount='5'> </e-column></e-columns> </ejs-kanban> |
Minimum card Countat particular column | Property:constraints.min<ej-kanban> <e-kanban-columns> <e-kanban-column headerText="Backlog", key: "Open", [constraints]="constraint"> </e-kanban-column> </e-kanban-columns> </ej-kanban> TSexport class AppComponent { constraint = {type: “swimlane”,min: 2};}; |
Property: minCount<ejs-kanban> <e-columns> <e-column headerText='Backlog' keyField='Open' minCount='2'> </e-column></e-columns> </ejs-kanban> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
KeyBoard | Property: allowKeyboardNavigation<ej-kanban [allowKeyboardNavigation]="true"> </ej-kanban> |
Property: allowKeyboard<ejs-kanban [allowKeyboard]="true"> </ejs-kanban> |
Settings | Property: keySettings<ej-kanban [keySettings]='keySettings'> </ej-kanban> TSexport class AppComponent { 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<ejs-kanban> <e-columns> <e-column [allowToggle]="true"> </e-column></e-columns> </ejs-kanban> |
Toggle | Method: toggleColumn(headerText or $div)<ej-kanban #kanbanObj> </ej-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.toggleColumn(“Backlog”); |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Fields | Property: editItems<ej-kanban [editSettings.editItems]="editItem"> </ej-kanban> TSexport class AppComponent { editItem = [] }; |
Property: fields<ejs-kanban [dialogSettings]='dialogSettings'> </ejs-kanban> TS public dialogSettings: DialogSettingsModel = {fields: [] } |
Dialog Model | Not Available | Property: model<ejs-kanban [dialogSettings]='dialogSettings'> </ejs-kanban> TS public dialogSettings: DialogSettingsModel = {model: { width: 250 } } |
Template | Property: dialogTemplate<ej-kanban editSettings.dialogTemplate="#template"> </ej-kanban> |
Property: template<ejs-kanban> <ng-template #dialogSettingsTemplate let-data> </ng-template> </ejs-kanban> |
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 #kanbanObj> </ej-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.KanbanEdit.addCard(“2”,{ Id: 2, Status: Open}); |
Method:addCard(cardData)<ejs-kanban #kanbanObj> </ejs-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.addCard({ Id: 2,Status: Open}); |
Update Card | Method: updateCard(key, data)<ej-kanban #kanbanObj> </ej-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.KanbanEdit.updateCard(2, { Id: 2,Status: Open}); |
Method: updateCard(cardData)<ejs-kanban #kanbanObj> </ejs-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.updateCard({ Id: 2,Status: Open}); |
Delete Card | Method: KanbanEdit.deleteCard(key)<ej-kanban #kanbanObj> </ej-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.KanbanEdit.deleteCard(2); |
Method: deleteCard()<ejs-kanban #kanbanObj> </ejs-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.deleteCard(2); |
Cancel Edit | Method: KanbanEdit.cancelEdit()<ej-kanban #kanbanObj> </ej-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.KanbanEdit.cancelEdit(); |
Not Available |
End Edit | Method: KanbanEdit.endEdit()<ej-kanban #kanbanObj> </ej-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.KanbanEdit.endEdit(); |
Not Available |
Start Edit | Method: KanbanEdit.startEdit($div or key)<ej-kanban #kanbanObj> </ej-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.KanbanEdit.startEdit(2); |
Method: openDialog(action, data)<ejs-kanban #kanbanObj> </ejs-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.openDialog(“Add”); |
Set Validation | Method: KanbanEdit.setValidationToField(name, rules)<ej-kanban #kanbanObj> </ej-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.KanbanEdit.setValidationToField(“Summary”, { required: true }); |
Not Available |
Close Dialog | Not Applicable | Method: closeDialog()<ejs-kanban #kanbanObj> </ejs-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.closeDialog(); |
Triggers beforedialog Open | Not Applicable | Event: dialogOpen<ejs-kanban #kanbanObj (dialogOpen)="dialogOpen($event)"> </ejs-kanban> TS dialogOpen(event) {} |
Triggers whendialog close | Not Applicable | Event: dialogClose<ejs-kanban #kanbanObj (dialogClose)="dialogClose($event)"> </ejs-kanban> TS dialogClose(event) {} |
Triggers afterthe card is edited | Event: endEdit<ej-kanban #kanbanObj (endEdit)="endEdit($event)"> </ej-kanban> TS endEdit(event) {} |
Not Applicable |
Triggers afterthe card is deleted | Event: endDelete<ej-kanban #kanbanObj (endDelete)="endDelete($event)"> </ej-kanban> TS endDelete(event) {} |
Not Applicable |
Triggers beforetask is edited | Event: beginEdit <ej-kanban #kanbanObj (beginEdit)="beginEdit($event)"> </ej-kanban> TS beginEdit(event) {} |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Fields | Property: editItems<ej-kanban [editSettings.editItems]="editItem"> </ej-kanban> TSexport class AppComponent { editItem = [] }; |
Property: fields<ejs-kanban [dialogSettings]='dialogSettings'> </ejs-kanban> TS public dialogSettings: DialogSettingsModel = {fields: [] } |
Mapping key | Property: field<ej-kanban [editSettings.editItems]="editItem"> </ej-kanban> TSexport class AppComponent { editItem = [{ field: “Id”}] }; |
Property: key<ejs-kanban [dialogSettings]='dialogSettings'> </ejs-kanban> TS public dialogSettings: DialogSettingsModel = {fields: [{ key: “Id”}] } |
Label | Not Applicable | Property: text<ejs-kanban [dialogSettings]='dialogSettings'> </ejs-kanban> TS public dialogSettings: DialogSettingsModel = {fields: [{ text: “ID”,key: “Id”}] } |
Type | Property: editType<ej-kanban [editSettings.editItems]="editItem"> </ej-kanban> TSexport class AppComponent { editItem = [{ editType: ej.Kanban.EditingType.String}]}] }; |
Property: type<ejs-kanban [dialogSettings]='dialogSettings'> </ejs-kanban> TS public dialogSettings: DialogSettingsModel = {fields: [{type: “TextBox”, key: “Id”}] } |
Validation Rules | Property: validationRules<ej-kanban [editSettings.editItems]="editItem"> </ej-kanban> TSexport class AppComponent { editItem = [{ validationRules: {required: true} }]}; |
Property: validationRules<ejs-kanban [dialogSettings]='dialogSettings'> </ejs-kanban> TS public dialogSettings: DialogSettingsModel = {fields: [{validationRules: {required: true}}] } |
Params | Property: editParams<ej-kanban [editSettings.editItems]="editItem"> </ej-kanban> TSexport class AppComponent { editItem = [{ editParams: { decimalPlaces: 2} }]}; |
Not Applicable |
Default value | Property: defaultValue<ej-kanban [editSettings.editItems]="editItem"> </ej-kanban> TSexport class AppComponent { editItem = [{ 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<ejs-kanban [enableTooltip]="true"> </ejs-kanban> |
Template | Property: tooltipSettings.template<ej-kanban tooltipSettings.template="#tooltipTemplate"> </ej-kanban> |
Property: tooltipTemplate<ejs-kanban tooltipTemplate="#tooltipTemplate"> </ejs-kanban> |
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> TSthis.menuItem = [“Move Right”]; |
Not Applicable |
Disable default Items | Property: disableDefaultItems<ej-kanban contextMenuSettings.enable ="true" contextmenusettings. disableDefaultItems= [ej.Kanban.MenuItem.MoveLeft]> </ej-kanban> |
Not Applicable |
Custom Menu Items | Property: customMenuItemsText:<ej-kanban contextMenuSettings.enable ="true" contextmenusettings. custommenuitems= "customMenuItems" </ej-kanban> TSexport class AppComponent { this.customMenuItems = [{ text: “Menu1” }];Target:<ej-kanban contextMenuSettings.enable ="true" contextmenusettings. custommenuitems= "customMenuItems" </ej-kanban> TSexport class AppComponent { this.customMenuItems = [{ target: ej.Kanban.Target.Header }];Template:<ej-kanban contextMenuSettings.enable ="true" contextmenusettings. custommenuitems= "customMenuItems" </ej-kanban> TSexport class AppComponent { this.customMenuItems = [{ text: “Hide Column”,template: “#template”}]; |
Not Applicable |
Triggers when contextmenu item click | Event: contextClick<ej-kanban #kanbanObj (contextClick)="contextClick($event)"> </ej-kanban> TS contextClick(event) {}> |
Not Applicable |
Triggers when contextmenu open | Event: contextOpen<ej-kanban #kanbanObj (contextOpen)="contextOpen($event)"> </ej-kanban> TS contextOpen(event) {}> |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: workFlows<ej-kanban [workflows]="workflow"> </ej-kanban> TSexport class AppComponent { workflow= [{}] }; |
Not Applicable |
Key | Property: key<ej-kanban [workflows]="workflow"> </ej-kanban> TSexport class AppComponent { workFlow= [{key: “Order”}] }; |
Not Applicable |
Allowed Transition | Property: allowedTransition<ej-kanban [workflows]="workflow"> </ej-kanban> TSexport class AppComponent { workFlow= [{key: “Order”, allowedTransitions: “Served”}] }; |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: filterSettings<ej-kanban [filterSettings]="filterSetting"> </ej-kanban> TSexport class AppComponent { filterSetting= [] }; |
Not Applicable |
Enable | Property: allowFiltering<ej-kanban [allowFiltering]="true"> </ej-kanban> |
Not Applicable |
Text | Property: text<ej-kanban [filterSettings]="filterSetting"> </ej-kanban> TSexport class AppComponent { filterSetting= [{text: “Janet Issues”}] }; |
Not Applicable |
Query | Property: query<ej-kanban [filterSettings]="filterSetting"> </ej-kanban> TSexport class AppComponent { filterSetting= [{query: new ej.Query().where(“Assignee”,“equal”, “Janet”)}]}] }; |
Not Applicable |
Description | Property: description<ej-kanban [filterSettings]="filterSetting"> </ej-kanban> TSexport class AppComponent { filterSetting= [{description:“Display Issues”}] }; |
Not Applicable |
Filter Cards | Method: filterCards(query)<ej-kanban #kanbanObj> </ej-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.KanbanFilter.filterCards(new ej.Query().where(“Assignee”, “equal”, “Janet”)); |
Not Applicable |
Clear | Method: clearFilter()<ej-kanban #kanbanObj> </ej-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;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> TSexport class AppComponent { searchSettings= [] }; |
Not Applicable |
Enable | Property: allowSearching<ej-kanban [allowSearching]="true"> </ej-kanban> |
Not Applicable |
Fields | Property: fields<ej-kanban [searchSettings]="searchSettings"> </ej-kanban> TSexport class AppComponent { searchSettings= [{fields: [“Summary”]}] }; |
Not Applicable |
Key | Property: key<ej-kanban [searchSettings]="searchSettings"> </ej-kanban> TSexport class AppComponent { searchSettings= [{ key: “Task 1”}] }; |
Not Applicable |
Operator | Property: operator<ej-kanban [searchSettings]="searchSettings"> </ej-kanban> TSexport class AppComponent { searchSettings= [{operator: “contains”}] }; |
Not Applicable |
Ignore Case | Property: ignoreCase<ej-kanban [searchSettings]="searchSettings"> </ej-kanban> TSexport class AppComponent { searchSettings= [{ignoreCase: true}] }; |
Not Applicable |
Search Cards | Method: searchCards(searchString)<ej-kanban #kanbanObj> </ej-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.KanbanFilter.searchCards(“Analyze”); |
Not Applicable |
Clear | Method: clearSearch()<ej-kanban #kanbanObj> </ej-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.KanbanFilterclearSearch(); |
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]="cardSettings"> </ej-kanban> TSexport class AppComponent { cardSettings= {externalDropTarget:“#DroppedKanban” } }; |
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]="scrollSettings"> </ej-kanban> TSexport class AppComponent { scrollSettings= {height: 400 } }; |
Property: height<ejs-kanban height=400> </ejs-kanban> |
width | Property: width<ej-kanban [allowScrolling]="true" [scrollSettings]="scrollSettings"> </ej-kanban> TSexport class AppComponent { scrollSettings= {width: 400 } }; |
Property: width<ejs-kanban width=400> </ejs-kanban> |
Freeze Swimlane | Property: allowFreezeSwimlane<ej-kanban [allowScrolling]="true" [scrollSettings]="scrollSettings"> </ej-kanban> TSexport class AppComponent { scrollSettings= {allowFreezeSwimlane: true } }; |
Not Applicable |
Get Scroll Object | Method: getScrollObject()<ej-kanban #kanbanObj> </ej-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;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<ejs-kanban [cardSettings]='cardSettings'> <ejs-kanban> TS public cardSettings: CardSettingsModel = {selectionType: “Single” }; |
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 #kanbanObj> </ej-kanban> TS@ViewChild(‘kanbanObj’) kanbanObj: KanbanComponent;kanbanObj.KanbanSelection.clear(); |
Not Applicable |
Triggers beforecard selected | Event: beforeCardSelect<ej-kanban #kanbanObj (beforeCardSelect)= "beforeCardSelect($event)"> </ej-kanban> TS beforeCardSelect(event) {}>Event: cardSelecting <ej-kanban #kanbanObj (cardSelecting)= "cardSelecting($event)"> </ej-kanban> TS cardSelecting(event) {}> |
Not Applicable |
Triggers aftercard selected | Event: cardSelect<ej-kanban #kanbanObj (cardSelect)= "cardSelect($event)"> </ej-kanban> TS cardSelect(event) {}> |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Custom Toolbar | Property: customToolbarItems.template<ej-kanban [customToolbarItems]="customToolbarItems"> </ej-kanban> TSexport class AppComponent { customToolbarItems= {template: “#Delete”} }; |
Not Applicable |
Triggers toolbaritem click | Event: toolbarClick<ej-kanban #kanbanObj (toolbarClick)="toolbarClick($event)"> </ej-kanban> TS toolbarClick(event) {}> |
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<ejs-kanban [enablePersistence]="true"> </ejs-kanban> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
default | Property: enableRTL<ej-kanban [enableRTL]="true"> </ej-kanban> |
Property: enableRtl<ejs-kanban [enableRtl]="true"> </ejs-kanban> |