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, ColumnDragEventArgs } 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 { ColumnDragAndDrop } from '../actions/column-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 *
* ``` * ```typescript * * ``` */ export declare class Kanban extends Component { isAdaptive: boolean; crudModule: Crud; dataModule: Data; layoutModule: LayoutRender; virtualLayoutModule: VirtualLayoutRender; actionModule: Action; dragAndDropModule: DragAndDrop; columnDragAndDropModule: ColumnDragAndDrop; dialogModule: KanbanDialog; keyboardModule: Keyboard; tooltipModule: KanbanTooltip; touchModule: KanbanTouch; kanbanData: Record[]; 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[] | 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 column drag and drop actions in Kanban. * * @default false */ allowColumnDragAndDrop: 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; /** * Triggers on successful completion of the Kanban actions. * * @event 'actionComplete' */ actionComplete: EmitType; /** * Triggers when a Kanban action gets failed or interrupted and an error information will be returned. * * @event 'actionFailure' */ actionFailure: EmitType; /** * Triggers after the kanban board is created. * * @event 'created' */ created: EmitType>; /** * Triggers before the data binds to the Kanban. * * @event 'dataBinding' */ dataBinding: EmitType; /** * Triggers once the event data is bound to the Kanban. * * @event 'dataBound' */ dataBound: EmitType; /** * Triggers on single-clicking the Kanban cards. * * @event 'cardClick' */ cardClick: EmitType; /** * Triggers on double-clicking the Kanban cards. * * @event 'cardDoubleClick' */ cardDoubleClick: EmitType; /** * Triggers before each column of the Kanban rendering on the page. * * @event 'queryCellInfo' */ queryCellInfo: EmitType; /** * Triggers before each card of the Kanban rendering on the page. * * @event 'cardRendered' */ cardRendered: EmitType; /** * Triggers when the card drag actions starts. * * @event 'dragStart' */ dragStart: EmitType; /** * Triggers when the card is dragging to other stage or other swimlane. * * @event 'drag' */ drag: EmitType; /** * Triggers when the card drag actions stops. * * @event 'dragStop' */ dragStop: EmitType; /** * Triggers before the dialog opens. * * @event 'dialogOpen' */ dialogOpen: EmitType; /** * Triggers before the dialog closes. * * @event 'dialogClose' */ dialogClose: EmitType; /** * Triggers when a column drag operation starts. * * @event 'columnDragStart' */ columnDragStart: EmitType; /** * Triggers during the column drag operation. * * @event 'columnDrag' */ columnDrag: EmitType; /** * Triggers when a column is dropped. * * @event 'columnDrop' */ columnDrop: EmitType; /** * 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; /** * 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; 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; wireColumnDragEvent(): void; unwireColumnDragEvent(): void; 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; /** * 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[]): Record[]; /** * 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[]; /** * 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): 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 | Record[], 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 | Record[], 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 | Record[]): 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; }