@syncfusion/ej2-kanban
Version:
The Kanban board is an efficient way to visualize the workflow at each stage along its path to completion. The most important features available are Swim lane, filtering, and editing.
532 lines (531 loc) • 18.9 kB
TypeScript
import { Component, ModuleDeclaration } from '@syncfusion/ej2-base';
import { L10n, EmitType } from '@syncfusion/ej2-base';
import { DataManager, Query } from '@syncfusion/ej2-data';
import { Data } from './data';
import { KanbanModel } from './kanban-model';
import { CardSettingsModel, ColumnsModel, SwimlaneSettingsModel, StackedHeadersModel, DialogSettingsModel } from '../models/index';
import { SortSettingsModel } from '../models/index';
import { ActionEventArgs, CardClickEventArgs, CardRenderedEventArgs, DragEventArgs, ScrollPosition } from './interface';
import { QueryCellInfoEventArgs, DialogEventArgs, DataStateChangeEventArgs, DataSourceChangedEventArgs } from './interface';
import { ReturnType, ConstraintType, CurrentAction } from './type';
import { Action } from '../actions/action';
import { Crud } from '../actions/crud';
import { DragAndDrop } from '../actions/drag';
import { KanbanDialog } from '../actions/dialog';
import { Keyboard } from '../actions/keyboard';
import { KanbanTooltip } from '../actions/tooltip';
import { KanbanTouch } from '../actions/touch';
import { LayoutRender } from './layout-render';
import { VirtualLayoutRender } from './virtual-layout-render';
/**
* The Kanban board is an efficient way to visually depict various stages of a process using cards with transparent workflows.
* The Kanban board has rich set of APIs, methods, and events used to enable or disable its features and customize them.
* ```html
* <div id="kanban"></div>
* ```
* ```typescript
* <script>
* var kanbanObj = new Kanban();
* kanbanObj.appendTo("#kanban");
* </script>
* ```
*/
export declare class Kanban extends Component<HTMLElement> {
isAdaptive: boolean;
crudModule: Crud;
dataModule: Data;
layoutModule: LayoutRender;
virtualLayoutModule: VirtualLayoutRender;
actionModule: Action;
dragAndDropModule: DragAndDrop;
dialogModule: KanbanDialog;
keyboardModule: Keyboard;
tooltipModule: KanbanTooltip;
touchModule: KanbanTouch;
kanbanData: Record<string, any>[];
activeCardData: CardClickEventArgs;
localeObj: L10n;
swimlaneToggleArray: string[];
scrollPosition: ScrollPosition;
isInitialRender: boolean;
externalDropObj: Kanban;
isExternalKanbanDrop: boolean;
columnDataCount: {
[key: string]: number;
};
/**
* It is used to customize the Kanban, which accepts custom CSS class names that defines specific user-defined
* styles and themes to be applied on the Kanban element.
*
* @default null
*/
cssClass: string;
/**
* Sets the `width` of the Kanban board, accepting both string and number values.
* The string value can be either pixel or percentage format.
* When set to `auto`, the Kanban width gets auto-adjusted and display its content related to the viewable screen size.
*
* @default 'auto'
*/
width: string | number;
/**
* Sets the `height` of the Kanban board, accepting both string and number values.
* The string type includes either pixel or percentage values.
* When `height` is set with specific pixel value, then the Kanban will be rendered to that specified space.
* In case, if `auto` value is set, then the height of the Kanban gets auto-adjusted within the given container.
*
* @default 'auto'
*/
height: string | number;
/**
* Sets the `height` of the each card in the kanban.
* The string type includes pixel.
* When `height` is set with specific pixel value, then the card will be rendered to that specified height.
* In case, if `auto` value is set, then the height of the card gets auto-adjusted based on the content.
*
* @default 'auto'
*/
cardHeight: string;
/**
* When the enableVirtualization property is set to true in a Kanban,
* it will only render the cards that are currently visible within the viewport,
* and will load additional cards as the user scrolls vertically through the Kanban.
* This can be helpful for improving the performance of the Kanban when working with large datasets,
* as it reduces the number of elements that need to be rendered and managed by the browser at any given time.
*
* @default false
*/
enableVirtualization: boolean;
/**
* With this property, the card data will be bound to Kanban.
* The card data can be passed either as an array of JavaScript objects,
* or else can create an instance of [`DataManager`](http://ej2.syncfusion.com/documentation/data/api-dataManager.html)
* in case of processing remote data and can be assigned to the `dataSource` property.
* With the remote data assigned to dataSource, check the available
* [adaptors](http://ej2.syncfusion.com/documentation/data/adaptors.html) to customize the data processing.
*
* @default []
* @isGenericType true
*/
dataSource: Record<string, any>[] | DataManager;
/**
* Defines the external [`query`](http://ej2.syncfusion.com/documentation/data/api-query.html)
* that will be executed along with the data processing.
*
* @default null
*/
query: Query;
/**
* Defines the key field of Kanban board. The Kanban renders its layout based on this key field.
*
* @default null
*/
keyField: string;
/**
* Defines the constraint type used to apply validation based on column or swimlane. The possible values are:
* * Column
* * Swimlane
*
* @default column
*/
constraintType: ConstraintType;
/**
* Defines the ID of drop Kanban on which drop should occur.
*
* @default []
*/
externalDropId: string[];
/**
* Defines the Kanban board columns and their properties such as header text, key field, template, allow toggle,
* expand or collapse state, min or max count, and show or hide item count.
*
* @default []
*/
columns: ColumnsModel[];
/**
* When this property is set to true, it allows the keyboard interaction in Kanban.
*
* @default true
*/
allowKeyboard: boolean;
/**
* Determine whether to prevent cross-site scripting code in Kanban data entry fields.
*
* @default true
*/
enableHtmlSanitizer: boolean;
/**
* Defines the stacked header for Kanban columns with text and key fields.
*
* @default []
*/
stackedHeaders: StackedHeadersModel[];
/**
* Defines the swimlane settings to Kanban board such as key field, text field, template, allow drag-and-drop,
* show or hide empty row, show or hide items count, and more.
*
* @default {}
*/
swimlaneSettings: SwimlaneSettingsModel;
/**
* Defines the Kanban board related settings such as header field, content field, template,
* show or hide header, and single or multiple selection.
*
* @default {}
*/
cardSettings: CardSettingsModel;
/**
* Defines the sort settings such as field and direction.
*
* @default {}
*/
sortSettings: SortSettingsModel;
/**
* Defines the dialog settings such as template and fields.
*
* @default {}
*/
dialogSettings: DialogSettingsModel;
/**
* Enables or disables the drag and drop actions in Kanban.
*
* @default true
*/
allowDragAndDrop: boolean;
/**
* Enables or disables the tooltip in Kanban board. The property relates to the tooltipTemplate property.
*
* @default false
*/
enableTooltip: boolean;
/**
* Enable or disable the columns when empty dataSource.
*
* @default false
*/
showEmptyColumn: boolean;
/**
* Enables or disables the persisting Kanban board's state between page reloads.
* If enabled, columns, dataSource properties will be persisted in kanban.
*
* @default false
*/
enablePersistence: boolean;
/**
* Defines the template content to card’s tooltip. The property works by enabling the ‘enableTooltip’ property.
*
* @default null
* @aspType string
*/
tooltipTemplate: string | Function;
/**
* Triggers on beginning of every Kanban action.
*
* @event 'actionBegin'
*/
actionBegin: EmitType<ActionEventArgs>;
/**
* Triggers on successful completion of the Kanban actions.
*
* @event 'actionComplete'
*/
actionComplete: EmitType<ActionEventArgs>;
/**
* Triggers when a Kanban action gets failed or interrupted and an error information will be returned.
*
* @event 'actionFailure'
*/
actionFailure: EmitType<ActionEventArgs>;
/**
* Triggers after the kanban board is created.
*
* @event 'created'
*/
created: EmitType<Record<string, any>>;
/**
* Triggers before the data binds to the Kanban.
*
* @event 'dataBinding'
*/
dataBinding: EmitType<ReturnType>;
/**
* Triggers once the event data is bound to the Kanban.
*
* @event 'dataBound'
*/
dataBound: EmitType<ReturnType>;
/**
* Triggers on single-clicking the Kanban cards.
*
* @event 'cardClick'
*/
cardClick: EmitType<CardClickEventArgs>;
/**
* Triggers on double-clicking the Kanban cards.
*
* @event 'cardDoubleClick'
*/
cardDoubleClick: EmitType<CardClickEventArgs>;
/**
* Triggers before each column of the Kanban rendering on the page.
*
* @event 'queryCellInfo'
*/
queryCellInfo: EmitType<QueryCellInfoEventArgs>;
/**
* Triggers before each card of the Kanban rendering on the page.
*
* @event 'cardRendered'
*/
cardRendered: EmitType<CardRenderedEventArgs>;
/**
* Triggers when the card drag actions starts.
*
* @event 'dragStart'
*/
dragStart: EmitType<DragEventArgs>;
/**
* Triggers when the card is dragging to other stage or other swimlane.
*
* @event 'drag'
*/
drag: EmitType<DragEventArgs>;
/**
* Triggers when the card drag actions stops.
*
* @event 'dragStop'
*/
dragStop: EmitType<DragEventArgs>;
/**
* Triggers before the dialog opens.
*
* @event 'dialogOpen'
*/
dialogOpen: EmitType<DialogEventArgs>;
/**
* Triggers before the dialog closes.
*
* @event 'dialogClose'
*/
dialogClose: EmitType<DialogEventArgs>;
/**
* Triggers when the grid actions such as Sorting, Paging, Grouping etc., are done.
* In this event,the current view data and total record count should be assigned to the `dataSource` based on the action performed.
*
* @event dataStateChange
*/
dataStateChange: EmitType<DataStateChangeEventArgs>;
/**
* Triggers when the grid data is added, deleted and updated.
*
* Invoke the done method from the argument to start render after edit operation.
*
* @event dataSourceChanged
*/
dataSourceChanged: EmitType<DataSourceChangedEventArgs>;
protected needsID: boolean;
/**
* Constructor for creating the Kanban widget
*
* @param {KanbanModel} options Accepts the kanban properties to render the Kanban board.
* @param {string | HTMLElement} element Accepts the DOM element reference as either selector or element to render the Kanban Board.
*/
constructor(options?: KanbanModel, element?: string | HTMLElement);
/**
* Initializes the values of private members.
*
* @returns {void}
* @private
*/
protected preRender(): void;
/**
* To provide the array of modules needed for control rendering
*
* @returns {ModuleDeclaration[]} Returns the declared modules.
* @private
*/
requiredModules(): ModuleDeclaration[];
/**
* Returns the properties to be maintained in the persisted state.
*
* @returns {string} Returns the persistance state.
* @private
*/
protected getPersistData(): string;
/**
* Core method to return the module name.
*
* @returns {string} Returns the module name.
* @private
*/
getModuleName(): string;
/**
* Core method that initializes the control rendering.
*
* @returns {void}
* @private
*/
render(): void;
/**
* Called internally, if any of the property value changed.
*
* @param {KanbanModel} newProp Gets the updated values
* @param {KanbanModel} oldProp Gets the previous values
* @returns {void}
* @private
*/
onPropertyChanged(newProp: KanbanModel, oldProp: KanbanModel): void;
private onSwimlaneSettingsPropertyChanged;
private onCardSettingsPropertyChanged;
private initializeModules;
renderTemplates(): void;
resetTemplates(templates?: string[]): void;
private destroyModules;
templateParser(template: string | Function): any;
/**
* Returns the card details based on card ID from the board.
*
* @function getCardDetails
* @param {Element} target Accepts the card element to get the details.
* @returns {Object} Returns the card details based on given target.
*/
getCardDetails(target: Element): Record<string, any>;
/**
* Returns the column data based on column key input.
*
* @function getColumnData
* @param {string | number} columnKey Accepts the column key to get the objects.
* @param {Object[]} dataSource Accepts the collection of objects to get the results based on given columnKey.
* @returns {Object[]} Returns the collection of card objects based on given inputs.
*/
getColumnData(columnKey: string | number, dataSource?: Record<string, any>[]): Record<string, any>[];
/**
* Returns the swimlane column data based on swimlane keyField input.
*
* @function getSwimlaneData
* @param {string} keyField Accepts the swimlane keyField to get the objects.
* @returns {Object[]} Returns the collection of card objects based on given inputs.
*/
getSwimlaneData(keyField: string): Record<string, any>[];
/**
* Gets the list of selected cards from the board.
*
* @function getSelectedCards
* @returns {HTMLElement[]} Returns the card elements based on selection.
*/
getSelectedCards(): HTMLElement[];
/**
* Allows you to show the spinner on Kanban at the required scenarios.
*
* @function showSpinner
* @returns {void}
*/
showSpinner(): void;
/**
* When the spinner is shown manually using the showSpinner method, it can be hidden using this `hideSpinner` method.
*
* @function hideSpinner
* @returns {void}
*/
hideSpinner(): void;
/**
* To manually open the dialog.
*
* @function openDialog
* @param {CurrentAction} action Accepts the action for which the dialog needs to be opened such as either for new card creation or
* editing of existing cards. The applicable action names are `Add` and `Edit`.
* @param {Object} data It can be card data.
* @returns {void}
*/
openDialog(action: CurrentAction, data?: Record<string, any>): void;
/**
* To manually close the dialog.
*
* @function closeDialog
* @returns {void}
*/
closeDialog(): void;
/**
* Adds the new card to the data source of Kanban and layout.
*
* @function addCard
* @param {Object | Object[]} cardData Accepts Single card object or Collection of card objects to be added into Kanban.
* @param {number} index Accepts the index to insert the card in column.
* @returns {void}
*/
addCard(cardData: Record<string, any> | Record<string, any>[], index?: number): void;
/**
* Updates the changes made in the card object by passing it as a parameter to the data source.
*
* @function updateCard
* @param {Object | Object[]} cardData Accepts Single card object or Collection of card objects to be updated into Kanban.
* @param {number} index Accepts the index to update the card in column.
* @returns {void}
*/
updateCard(cardData: Record<string, any> | Record<string, any>[], index?: number): void;
/**
* Deletes the card based on the provided ID or card collection in the argument list.
*
* @function deleteCard
* @param {string | number | Object | Object[]} cardData Accepts the ID of the remove card in string or number type or
* Single card object or Collection of card objects to be removed from Kanban
* @returns {void}
*/
deleteCard(cardData: string | number | Record<string, any> | Record<string, any>[]): void;
/**
* Add the column to Kanban board dynamically based on the provided column options and index in the argument list.
*
* @function addColumn
* @param {ColumnsModel} columnOptions Accepts the properties to new column that are going to be added in the board.
* @param {number} index Accepts the index of column to add the new column.
* @returns {void}
*/
addColumn(columnOptions: ColumnsModel, index: number): void;
/**
* Deletes the column based on the provided index value.
*
* @function deleteColumn
* @param {number} index Accepts the index of column to delete the existing column from Kanban board.
* @returns {void}
*/
deleteColumn(index: number): void;
/**
* Shows the column from hidden based on the provided key in the columns.
*
* @function showColumn
* @param {string | number} key Accepts the hidden column key name to be shown from the hidden state in board.
* @returns {void}
*/
showColumn(key: string | number): void;
/**
* Hides the column from Kanban board based on the provided key in the columns.
*
* @function hideColumn
* @param {string | number} key Accepts the visible column key name to be hidden from the board.
* @returns {void}
*/
hideColumn(key: string | number): void;
/**
* Method to refresh the Kanban UI based on modified records.
*
* @function refreshUI
* @param {ActionEventArgs} args Accepts the added, changed or deleted data.
* @param {number} index Accepts the index of the changed items.
* @returns {void}
*/
refreshUI(args: ActionEventArgs, index?: number): void;
/**
* Method to refresh the column header.
*
* @method refreshHeader
* @returns {void}
*/
refreshHeader(): void;
/**
* Removes the control from the DOM and detaches all its related event handlers. Also, it removes the attributes and classes.
*
* @function destroy
* @returns {void}
*/
destroy(): void;
}