Kanban Javascript API

Class

Kanban

Kanban represents a kanban board that visually depicts work at various stages of a process using cards to represent tasks and columns to represent each stage of the process.

Selector

smart-kanban

Properties

Events

Methods

Properties

allowColumnReorderboolean

Controls whether users can reorder columns in a table or grid. When set to true and used in combination with allowDrag enabled, this property lets users rearrange columns by dragging and dropping their headers. For example, a user can click and hold the header of the first column, then drag it to a new position over another column header and drop it, changing the column order visually and functionally. This enhances the user experience by allowing customizable column layouts.

 <smart-kanban allow-column-reorder></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.allowColumnReorder = false;

 const kanban = document.querySelector('smart-kanban');

 let allowColumnReorder = kanban.allowColumnReorder;

allowColumnEditboolean

Controls whether column editing is permitted. When this property is set to true, users can dynamically edit the column's header label by double-clicking on it. This allows for in-place renaming of the column header directly within the user interface. If set to false, the column header label will remain static and cannot be modified by users.

 <smart-kanban allow-column-edit></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.allowColumnEdit = false;

 const kanban = document.querySelector('smart-kanban');

 let allowColumnEdit = kanban.allowColumnEdit;

allowColumnRemoveboolean

Controls whether users can remove columns from the table. When set to true, a "Remove Column" option will appear in the column actions menu, allowing users to dynamically delete columns. Note: The 'columnActions' property must also be enabled (set to true) for this feature to be available.

 <smart-kanban allow-column-remove></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.allowColumnRemove = false;

 const kanban = document.querySelector('smart-kanban');

 let allowColumnRemove = kanban.allowColumnRemove;

allowColumnHideboolean

Controls whether users can hide columns in the data table. When set to true, this property allows users to dynamically hide individual columns using the column actions menu. Note: To enable this feature, the 'columnActions' property must also be set to true.

 <smart-kanban allow-column-hide></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.allowColumnHide = false;

 const kanban = document.querySelector('smart-kanban');

 let allowColumnHide = kanban.allowColumnHide;

addNewButtonboolean

Controls whether the "Add Task" button is displayed at the top of each column. To hide the button for an individual column, set the addNewButton property to false within that column’s configuration object. If addNewButton is false, users will not see the "Add Task" button for that specific column.

 <smart-kanban add-new-button></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.addNewButton = false;

 const kanban = document.querySelector('smart-kanban');

 let addNewButton = kanban.addNewButton;

addNewButtonDisplayMode"top" | "bottom" | "both"

Specifies whether the add button appears in the column header, after the list of tasks within the column, or both. This controls the visibility and placement of the add button for creating new tasks in each column.

 <smart-kanban add-new-button-display-mode='both'></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.addNewButtonDisplayMode = 'top';

 const kanban = document.querySelector('smart-kanban');

 let addNewButtonDisplayMode = kanban.addNewButtonDisplayMode;

addNewColumnboolean

Specifies whether a special column containing a button for adding new status columns to the Kanban board is shown. When enabled, this feature allows users to quickly create additional status columns directly within the Kanban interface. You can use this setting to display or hide the "Add Column" button column as needed.

 <smart-kanban add-new-column></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.addNewColumn = false;

 const kanban = document.querySelector('smart-kanban');

 let addNewColumn = kanban.addNewColumn;

addNewColumnWidthnumber | null

Specifies the width of the dynamically added "Add New" column. This property is effective only when the 'columnWidth' property is also set. It allows you to control the exact width (in pixels or other valid CSS units) of the new column that appears when adding columns dynamically to the table or grid.

 <smart-kanban add-new-column-width='null'></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.addNewColumnWidth = 300;

 const kanban = document.querySelector('smart-kanban');

 let addNewColumnWidth = kanban.addNewColumnWidth;

allowDragboolean

Enables users to click and drag tasks within the interface, allowing them to easily reorder, move, or reorganize tasks by dragging and dropping them to the desired position.

 <smart-kanban allow-drag></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.allowDrag = false;

 const kanban = document.querySelector('smart-kanban');

 let allowDrag = kanban.allowDrag;

allowDropboolean

Enables users to remove or discard tasks from the list or workflow, either by dragging and dropping or through a designated action, facilitating task management and organization.

 <smart-kanban allow-drop></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.allowDrop = false;

 const kanban = document.querySelector('smart-kanban');

 let allowDrop = kanban.allowDrop;

allowDropPlaceholderboolean

Enables a visual placeholder to appear when dragging and dropping tasks. As you drag a task over another task, an empty space is dynamically created at the drop location, clearly indicating where the dragged task will be inserted. This improves usability by providing real-time visual feedback during task reordering.

 <smart-kanban allow-drop-placeholder></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.allowDropPlaceholder = false;

 const kanban = document.querySelector('smart-kanban');

 let allowDropPlaceholder = kanban.allowDropPlaceholder;

applyColumnColorToTasksboolean

This property controls the color styling of Kanban columns and their associated tasks. When set to true, and if a Kanban column has its color property defined, that color will not only visually highlight the column header but will also be applied to all tasks within that column, as well as to the background or accent color of the edit dialog for tasks in that column. This creates a consistent and visually cohesive color scheme throughout each column and its related UI elements.

 <smart-kanban apply-column-color-to-tasks></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.applyColumnColorToTasks = false;

 const kanban = document.querySelector('smart-kanban');

 let applyColumnColorToTasks = kanban.applyColumnColorToTasks;

autoLoadStateboolean

Controls whether the application automatically loads its state from the browser’s localStorage. This includes restoring information such as:

- The list of tasks and their positions
- The selected task and its state
- Applied filters and sorting options
- The state of collapsed columns
- The values of the following task-related properties:
- taskActions
- taskComments
- taskDue
- taskPriority
- taskProgress
- taskTags
- taskUserIcon

When enabled, all of these details will be reloaded from localStorage on page refresh or reopening the application, ensuring a consistent user experience. When disabled, this information will not be loaded automatically, and the state will not be restored.

 <smart-kanban auto-load-state></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.autoLoadState = false;

 const kanban = document.querySelector('smart-kanban');

 let autoLoadState = kanban.autoLoadState;

autoSaveStateboolean

Controls whether the application's current state is automatically saved to the browser's localStorage. When enabled, the following information is persistently stored and restored across sessions:

- Task data, including their current positions, selected status, and any applied filters or sorting.
- The collapsed or expanded state of columns.
- Values for the following properties:
- taskActions (user actions related to tasks)
- taskComments (comments attached to tasks)
- taskDue (task due dates)
- taskPriority (priority level of tasks)
- taskProgress (progress tracking for tasks)
- taskTags (tags associated with each task)
- taskUserIcon (user avatars/icons linked to tasks)

This ensures that user preferences and the state of the task interface are preserved, providing a seamless user experience even after closing or refreshing the browser. Disabling this feature will prevent any state information from being stored in localStorage, and all settings will be reset upon page reload.

 <smart-kanban auto-save-state></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.autoSaveState = false;

 const kanban = document.querySelector('smart-kanban');

 let autoSaveState = kanban.autoSaveState;

autoColumnHeightboolean

Dynamically adjusts the height of each column based on the total height of its tasks, ensuring all content is fully visible. This property is effective only when 'columnColorEntireSurface' is set to true, allowing the background color to extend appropriately over the column’s entire surface.

 <smart-kanban auto-column-height></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.autoColumnHeight = false;

 const kanban = document.querySelector('smart-kanban');

 let autoColumnHeight = kanban.autoColumnHeight;

collapsibleboolean

Enables the card content to be expanded or collapsed, providing users with the ability to show or hide additional information within the card. This enhances the user interface by reducing visual clutter and allowing for more compact content presentation.

 <smart-kanban collapsible></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.collapsible = false;

 const kanban = document.querySelector('smart-kanban');

 let collapsible = kanban.collapsible;

columnColorsboolean

Displays a color indicator in the column header whenever the column's color property is defined. The header visually reflects the assigned color, making it easier to identify and distinguish columns based on their color settings.

 <smart-kanban column-colors></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.columnColors = false;

 const kanban = document.querySelector('smart-kanban');

 let columnColors = kanban.columnColors;

columnWidthnumber | null

Defines the width for each Kanban column. When this property is specified, all Kanban columns are rendered at the given width. If the total width of all columns exceeds the available space, a horizontal scrollbar will appear, allowing users to scroll and view all columns.

 <smart-kanban column-width='null'></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.columnWidth = 300;

 const kanban = document.querySelector('smart-kanban');

 let columnWidth = kanban.columnWidth;

columnColorEntireSurfaceboolean

Renders a customizable background within the Kanban column, allowing for enhanced visual separation and improved column identification. Supports various background options such as color, image, or pattern to match your application's design requirements.

 <smart-kanban column-color-entire-surface></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.columnColorEntireSurface = false;

 const kanban = document.querySelector('smart-kanban');

 let columnColorEntireSurface = kanban.columnColorEntireSurface;

columnFooterboolean

Renders a column footer that displays a summary value, such as totals or averages, for the data in that column. This footer helps users quickly interpret aggregate information at the bottom of the column.

 <smart-kanban column-footer></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.columnFooter = false;

 const kanban = document.querySelector('smart-kanban');

 let columnFooter = kanban.columnFooter;

columns{ addNewButton?: boolean, collapsed?: boolean, collapsible?: boolean, columns?: [], dataField?: string, label?: string, orientation?: string, selected?: boolean }[]

Provides detailed definitions and configuration options for each column’s properties, including attributes such as data type, default value, visibility, header label, and formatting options.

 const kanban = document.querySelector('smart-kanban');

 let addNewButton = kanban.columns[0].addNewButton;

 const kanban = document.querySelector('smart-kanban');

 let allowRemove = kanban.columns[0].allowRemove;

 const kanban = document.querySelector('smart-kanban');

 let collapsed = kanban.columns[0].collapsed;

 const kanban = document.querySelector('smart-kanban');

 let collapsible = kanban.columns[0].collapsible;

 const kanban = document.querySelector('smart-kanban');

 let columns = kanban.columns[0].columns;

 const kanban = document.querySelector('smart-kanban');

 let dataField = kanban.columns[0].dataField;

 const kanban = document.querySelector('smart-kanban');

 let label = kanban.columns[0].label;

 const kanban = document.querySelector('smart-kanban');

 let editable = kanban.columns[0].editable;

 const kanban = document.querySelector('smart-kanban');

 let visible = kanban.columns[0].visible;

 const kanban = document.querySelector('smart-kanban');

 let reorder = kanban.columns[0].reorder;

 const kanban = document.querySelector('smart-kanban');

 let orientation = kanban.columns[0].orientation;

 const kanban = document.querySelector('smart-kanban');

 let selected = kanban.columns[0].selected;

 const kanban = document.querySelector('smart-kanban');

 let headerTemplate = kanban.columns[0].headerTemplate;

 const kanban = document.querySelector('smart-kanban');

 kanban.columns[0].width = 300;

 const kanban = document.querySelector('smart-kanban');

 let width = kanban.columns[0].width;

 <smart-kanban columns='{ label: 'In progress', dataField: 'inProgress' }, { label: 'Testing', dataField: 'testing' }, { label: 'Done', dataField: 'done' }'></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.columns = { label: 'In progress', dataField: 'inProgress' }, { label: 'Testing', dataField: 'testing', orientation: 'horizontal', columns: [{ label: 'Manual testing', dataField: 'manualTesting', selected: true, columns: [{ label: 'Desktop devices', dataField: 'desktop' }, { label: 'Mobile devices', dataField: 'mobile', selected: true }] }, { label: 'Unit testing', dataField: 'unitTesting' }] };

 const kanban = document.querySelector('smart-kanban');

 let columns = kanban.columns;

columnActionsboolean

Controls whether the column actions icon is displayed, allowing users to access additional options or actions for each table column. When enabled, the icon becomes visible; when disabled, the icon is hidden from view.

 <smart-kanban column-actions></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.columnActions = false;

 const kanban = document.querySelector('smart-kanban');

 let columnActions = kanban.columnActions;

columnSummaryboolean

Specifies whether the number of tasks is shown in the headers of each column, allowing users to see the count of tasks directly within the column titles.

 <smart-kanban column-summary></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.columnSummary = false;

 const kanban = document.querySelector('smart-kanban');

 let columnSummary = kanban.columnSummary;

columnHeaderTemplateany

Specifies whether a custom template is applied to the column header. Accepts a value of type string (containing template markup), function (returning a template or markup), or an HTMLTemplateElement. Use this property to customize the appearance and content of the column header beyond the default rendering.

 <smart-kanban column-header-template='#headerTemplate'></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.columnHeaderTemplate = #headerCustomTemplate;

 const kanban = document.querySelector('smart-kanban');

 let columnHeaderTemplate = kanban.columnHeaderTemplate;

columnEditMode"header" | "menu" | "headerAndMenu"

Specifies how column editing is initiated within the interface.
- When set to ''header'', editing mode is activated by double-clicking directly on the column's header label.
- When set to ''menu'', editing can only be started through the column's context or 'columnActions' menu.
- When set to ''headerAndMenu'', both methods are available—users can begin editing either by double-clicking the header or by selecting the relevant option from the column menu.

 <smart-kanban column-edit-mode='true'></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.columnEditMode = 'false';

 const kanban = document.querySelector('smart-kanban');

 let columnEditMode = kanban.columnEditMode;

currentUserstring | number

Sets or retrieves the ID of the currently active user. This value must match the 'id' of a user object within the 'users' property or array. The privileges and access rights available are determined based on the current user's identity. If no current user is specified, the element's permissions default to those defined by its own properties, rather than user-specific settings.

 <smart-kanban current-user='1'></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.currentUser = 2;

 const kanban = document.querySelector('smart-kanban');

 let currentUser = kanban.currentUser;

disableDialogboolean

Controls whether the default dialog for adding or removing tasks or comments is enabled or disabled. When set to true, the dialog will not appear, allowing for custom handling of these actions. When set to false, the standard dialog will be shown as usual. This property can be used to either retrieve the current setting (get) or define its behavior (set).

 <smart-kanban disable-dialog></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.disableDialog = false;

 const kanban = document.querySelector('smart-kanban');

 let disableDialog = kanban.disableDialog;

dialogCustomizationFunctionany

Sets or retrieves a customization function for the Kanban dialog component. This function allows you to modify the appearance and behavior of the dialog, or to replace it entirely with a custom implementation. When invoked, the Kanban component calls this function with five arguments:

- 'dialog': The default dialog instance, typically a 'smart-window' object, which serves as the default modal dialog for tasks and comments.
- 'taskOrComment': The data object representing either a Kanban task or a comment, depending on the context of the action.
- 'editors': An object containing the input elements or editors used within the dialog for data entry or modification.
- 'purpose': A string indicating the dialog’s intent, such as ''add'' for creating a new item or ''edit'' for modifying an existing one.
- 'type': A string specifying the entity being processed, such as ''task'' for task-related dialogs or ''column'' for column-related dialogs.

By providing a custom function, you can tailor the dialog’s UI, integrate additional logic, or substitute a completely different dialog component to meet your application's requirements.

dialogRenderedany

Sets or retrieves the callback function that is executed when the dialog is rendered. This function is invoked by the Kanban component and receives six arguments: dialog, editors, labels, tabs, layout, and taskOrComment.

- 'dialog': The 'smart-window' instance representing the Kanban dialog.
- 'taskOrComment': An object representing either the current Kanban task or a comment, depending on the context in which the dialog is opened.
- 'editors, labels, tabs, layout': Each is a JSON object where keys specify the element type (e.g., 'description', 'priority', 'notes'), and the values are their corresponding HTML elements within the dialog.

This function allows developers to customize the dialog content or behavior dynamically based on the element types and the associated data when the dialog is rendered.

dataSource{ id: string | number, checklist?: { completed?: boolean, text?: string }[], color?: string, comments?: { text?: string, time?: Date, userId: string | number }[], dueDate?: Date, priority?: string, progress?: number, startDate?: Date, status?: string, swimlane?: string, tags?: string, text?: string, userId?: string | number }[]

Specifies the origin or source of the data to be displayed and managed on the Kanban board, such as an API endpoint, database, or local data array. This setting dictates which dataset will populate the Kanban columns and cards.

 const kanban = document.querySelector('smart-kanban');

 let id = kanban.dataSource.id;

 const kanban = document.querySelector('smart-kanban');

 let checklist = kanban.dataSource.checklist;

 const kanban = document.querySelector('smart-kanban');

 let color = kanban.dataSource.color;

 const kanban = document.querySelector('smart-kanban');

 let comments = kanban.dataSource.comments;

 const kanban = document.querySelector('smart-kanban');

 let dueDate = kanban.dataSource.dueDate;

 const kanban = document.querySelector('smart-kanban');

 let priority = kanban.dataSource.priority;

 const kanban = document.querySelector('smart-kanban');

 let progress = kanban.dataSource.progress;

 const kanban = document.querySelector('smart-kanban');

 let startDate = kanban.dataSource.startDate;

 const kanban = document.querySelector('smart-kanban');

 let status = kanban.dataSource.status;

 const kanban = document.querySelector('smart-kanban');

 let swimlane = kanban.dataSource.swimlane;

 const kanban = document.querySelector('smart-kanban');

 let tags = kanban.dataSource.tags;

 const kanban = document.querySelector('smart-kanban');

 let text = kanban.dataSource.text;

 const kanban = document.querySelector('smart-kanban');

 let userId = kanban.dataSource.userId;

 <smart-kanban data-source='["item 1", "item 2"]'></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.dataSource = ["new item 1", "new item 2"];

 const kanban = document.querySelector('smart-kanban');

 let dataSource = kanban.dataSource;

dataSourceMap{ checklist?: string; color?: string; comments?: string; dueDate?: string; id?: string; priority?: string; progress?: string; startDate?: string; status?: string; swimlane?: string; tags?: string; text?: string; userId?: string; createdUserId?: string; updatedUserId?: string; createdDate?: Date; updatedDate?: Date;}

Specifies how the Kanban board's default fields (e.g., title, status, assignee) correspond to the fields in your data source. Use this mapping only if your data source uses field names that differ from the Kanban's expected keywords. If the field names already match, this mapping is optional. Note that only certain default fields support custom mapping; not all default mappings can be overridden.

 <smart-kanban data-source-map='{ checklist: 'toDoList', comments: 'feedback', status: 'dataField' }'></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.dataSourceMap = { id: 'ID', startDate: 'start', status: 'status', swimlane: 'category' };

 const kanban = document.querySelector('smart-kanban');

 let dataSourceMap = kanban.dataSourceMap;

dragOffsetboolean

Specifies the offset, in pixels, between the drag feedback element and the mouse cursor during task dragging operations. The value should be provided as an array: the first element sets the horizontal (x-axis) offset, and the second element sets the vertical (y-axis) offset, both relative to the cursor position. Alternatively, if set to 'auto', the system automatically calculates the offset based on the cursor’s position at the moment the drag action began. This allows for precise control over the visual positioning of the feedback element during drag-and-drop interactions.

 <smart-kanban drag-offset></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.dragOffset = auto;

 const kanban = document.querySelector('smart-kanban');

 let dragOffset = kanban.dragOffset;

editableboolean

Controls whether tasks can be modified, including editing task details and assigning users to tasks. When enabled, users can update task information and manage task assignments; when disabled, tasks and their assigned users are read-only and cannot be changed programmatically or through the user interface.

 <smart-kanban editable></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.editable = false;

 const kanban = document.querySelector('smart-kanban');

 let editable = kanban.editable;

editMode"doubleClick" | "singleClick"

Specifies how users can activate the task editing feature. The 'editBehavior' property accepts either '"singleClick"' or '"doubleClick"' as values:

- '"singleClick"': Opens the dialog edit window when the user clicks once on a Kanban task.
- '"doubleClick"' (default): Opens the dialog edit window when the user double-clicks on a Kanban task.

By default, editing is triggered by a double-click. Use this setting to customize the interaction based on your application's needs.

 <smart-kanban edit-mode='doubleClick'></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.editMode = 'singleClick';

 const kanban = document.querySelector('smart-kanban');

 let editMode = kanban.editMode;

formatStringDatestring

Sets or retrieves the format string used to display the "Due date" label, as well as the date format for both the "Start date" and "Due date" editor fields. This determines how dates are shown and entered in these UI components.

 <smart-kanban format-string-date='dddd-MMMM-yyyy'></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.formatStringDate = 'M/d/yyyy';

 const kanban = document.querySelector('smart-kanban');

 let formatStringDate = kanban.formatStringDate;

formatStringTimestring

Specifies or retrieves the format string used to display the timestamp on comments. This determines how the date and time of each comment are presented (e.g., "YYYY-MM-DD HH:mm:ss").

 <smart-kanban format-string-time='HH:mm'></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.formatStringTime = 'MMM d, h:mm tt';

 const kanban = document.querySelector('smart-kanban');

 let formatStringTime = kanban.formatStringTime;

headerPosition"none" | "top" | "bottom"

Sets or retrieves the position of the header section within the user interface. The header typically contains interactive controls such as Customize, Filter, Sort, and Search buttons, allowing users to adjust and manipulate the displayed data according to their preferences.

 <smart-kanban header-position='top'></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.headerPosition = 'bottom';

 const kanban = document.querySelector('smart-kanban');

 let headerPosition = kanban.headerPosition;

hierarchy"columns" | "tabs"

Defines or retrieves how the column hierarchy is structured and displayed, specifying the method or format used to represent the relationships between columns within the component or dataset.

Allowed Values

• "columns" - Sub-columns are represented as nested columns.
• "tabs" - Sub-columns are represented as nested tabs. In this case, each sub-column has the property selected that denotes if its contents is visible.

 <smart-kanban hierarchy='tabs'></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.hierarchy = 'columns';

 const kanban = document.querySelector('smart-kanban');

 let hierarchy = kanban.hierarchy;

unlockKeystring

Gets or sets the unlockKey property, a unique key used to unlock or activate the product. This key is required to enable full access to product features.

 <smart-kanban unlock-key=''></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.unlockKey = '1111-2222-3333-4444-5555';

 const kanban = document.querySelector('smart-kanban');

 let unlockKey = kanban.unlockKey;

localestring

Sets or retrieves the current locale (language and regional settings) used by the component. This property determines the language in which messages are displayed, and works together with the messages property, which provides localized message strings for each supported locale. Adjusting the locale will change the displayed text to correspond with the selected language from the messages definitions.

 <smart-kanban locale='de'></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.locale = 'fr';

 const kanban = document.querySelector('smart-kanban');

 let locale = kanban.locale;

messagesobject

Defines or retrieves an object containing the strings displayed in the widget, allowing for easy localization of text. This property works together with the locale property to support multiple languages and adapt the user interface based on the selected locale. Use this to provide translated labels, messages, and other widget text for internationalization.

 <smart-kanban messages='{ 'he': { 'addFilter': 'הוסף פילטר', 'and': 'ו', 'apply': 'להגיש מועמדות', 'booleanFirst': '☐', 'booleanLast': '☑', 'cancel': 'בטל', 'CONTAINS': 'מכיל', 'CONTAINS_CASE_SENSITIVE': 'מכיל (רגיש רישיות)', 'dateFirst': '1', 'dateLast': '9', 'DOES_NOT_CONTAIN': 'לא מכיל', 'DOES_NOT_CONTAIN_CASE_SENSITIVE': 'אינו מכיל (רגיש רישיות)', 'EMPTY': 'ריק', 'ENDS_WITH': 'נגמר עם', 'ENDS_WITH_CASE_SENSITIVE': 'מסתיים ב (רגיש רישיות)', 'EQUAL': 'שווה', 'EQUAL_CASE_SENSITIVE': 'שווה (רגיש אותיות רישיות)', 'filter': 'סנן', 'filteredByMultiple': '{{n}} פילטרים', 'filteredByOne': '1 פילטר', 'filterValuePlaceholder': 'ערך', 'find': 'מצא שדה', 'findInView': 'מצא בתצוגה', 'firstBy': 'מיין לפי', 'found': '{{nth}} מתוך {{n}}', 'from': 'מ', 'GREATER_THAN': 'גדול מ', 'GREATER_THAN_OR_EQUAL': 'גדול או שווה', 'LESS_THAN': 'פחות מ', 'LESS_THAN_OR_EQUAL': 'פחות מ או שווה', 'noFilters': 'לא הוחל מסננים', 'noResults': 'אין תוצאות', 'noSorting': 'לא מיושם מיון', 'NOT_EMPTY': 'לא ריק', 'NOT_EQUAL': 'לא שווה', 'NOT_NULL': 'לא ריק', 'NULL': 'ריק', 'numberFirst': '1', 'numberLast': '9', 'ok': 'בסדר', 'or': 'או', 'pickAnother': 'בחר שדה אחר למיין לפי', 'sort': 'סוג', 'sortedByMultiple': 'ממוין לפי שדות {{n}}', 'sortedByOne': 'מסודר לפי שדה 1', 'STARTS_WITH': 'starts with', 'STARTS_WITH_CASE_SENSITIVE': 'מתחיל עם', 'stringFirst': 'א', 'stringLast': 'ז', 'thenBy': 'ואז על ידי', 'where': 'איפה', 'actionsIcon': 'סמל פעולות', 'addNewStatus': 'סטטוס חדש', 'addNewTask': 'הוסף משימה חדשה', 'addSubtask': 'הוסף משימת משנה', 'assignedTo': 'שהוקצה ל', 'checklist': 'רשימת מטלות', 'color': 'צבע', 'commentsIcon': 'סמל הערות', 'copy': 'עותק', 'customize': 'התאם אישית משימות', 'dueDate': 'תאריך להגשה', 'edit': 'ערוך', 'editTask': 'ערוך את המשימה "{{taskId}}"', 'high': 'גבוה', 'low': 'נמוך', 'newComment': 'תגובה חדשה', 'newSubtask': 'תת-משימה חדשה', 'normal': 'רגיל', 'priority': 'עדיפות', 'priorityIcon': 'סמל עדיפות', 'progress': 'התקדמות', 'promptComment': 'האם אתה בטוח שברצונך להסיר תגובה זו?', 'promptTask': 'האם אתה בטוח שברצונך להסיר את המשימה "{{taskText}}"?', 'remove': 'הסר', 'removeSubtask': 'הסר את תת המשנה', 'send': 'שלח', 'startDate': 'תאריך התחלה', 'status': 'סטטוס', 'swimlane': 'נתיב שחייה', 'tags': 'תגיות', 'text': 'טקסט', 'userId': 'תעודת זהות של המשתמש', 'userIcon': 'סמל משתמש' } }'></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.messages = { 'en': { 'addFilter': '+ Add filter', 'and': 'And', 'apply': 'Apply', 'booleanFirst': '☐', 'booleanLast': '☑', 'cancel': 'Cancel', 'CONTAINS': 'contains', 'CONTAINS_CASE_SENSITIVE': 'contains (case sensitive)', 'dateFirst': '1', 'dateLast': '9', 'DOES_NOT_CONTAIN': 'does not contain', 'DOES_NOT_CONTAIN_CASE_SENSITIVE': 'does not contain (case sensitive)', 'EMPTY': 'empty', 'ENDS_WITH': 'ends with', 'ENDS_WITH_CASE_SENSITIVE': 'ends with (case sensitive)', 'EQUAL': 'equal', 'EQUAL_CASE_SENSITIVE': 'equal (case sensitive)', 'filter': 'Filter', 'filteredByMultiple': '{{n}} filters', 'filteredByOne': '1 filter', 'filterValuePlaceholder': 'Value', 'find': 'Find a field', 'findInView': 'Find in view', 'firstBy': 'Sort by', 'found': '{{nth}} of {{n}}', 'from': 'from', 'GREATER_THAN': 'greater than', 'GREATER_THAN_OR_EQUAL': 'greater than or equal', 'LESS_THAN': 'less than', 'LESS_THAN_OR_EQUAL': 'less than or equal', 'noFilters': 'No filters applied', 'noResults': 'No results', 'noSorting': 'No sorting applied', 'NOT_EMPTY': 'not empty', 'NOT_EQUAL': 'not equal', 'NOT_NULL': 'not null', 'NULL': 'null', 'numberFirst': '1', 'numberLast': '9', 'ok': 'OK', 'or': 'Or', 'pickAnother': 'Pick another field to sort by', 'sort': 'Sort', 'sortedByMultiple': 'Sorted by {{n}} fields', 'sortedByOne': 'Sorted by 1 field', 'STARTS_WITH': 'starts with', 'STARTS_WITH_CASE_SENSITIVE': 'starts with (case sensitive)', 'stringFirst': 'A', 'stringLast': 'Z', 'thenBy': 'then by', 'where': 'Where', 'actionsIcon': 'Actions icon', 'addNewStatus': 'New status', 'addNewTask': 'Add new task', 'addSubtask': 'Add subtask', 'assignedTo': 'Assigned to', 'checklist': 'Checklist', 'color': 'Color', 'commentsIcon': 'Comments icon', 'copy': 'Copy', 'customize': 'Customize tasks', 'dueDate': 'Due date', 'edit': 'Edit', 'editTask': 'Edit task "{{taskId}}"', 'high': 'High', 'low': 'Low', 'newComment': 'New comment', 'newSubtask': 'New subtask', 'normal': 'Normal', 'priority': 'Priority', 'priorityIcon': 'Priority icon', 'progress': 'Progress', 'promptComment': 'Are you sure you want to remove this comment?', 'promptTask': 'Are you sure you want to remove the task "{{taskText}}"?', 'remove': 'Remove', 'removeSubtask': 'Remove subtask', 'send': 'Send', 'startDate': 'Start date', 'status': 'Status', 'swimlane': 'Swimlane', 'tags': 'Tags', 'text': 'Text', 'userId': 'User ID', 'userIcon': 'User icon' } };

 const kanban = document.querySelector('smart-kanban');

 let messages = kanban.messages;

onTaskRenderany

Callback function that allows you to customize how tasks are rendered within the Kanban board. This function is invoked by the Kanban component and receives two arguments:

1. The HTML element representing the task (taskHtmlElement).
2. The data object associated with the task (taskData).

You can use this callback to modify the appearance, add event listeners, or inject additional content into the task's HTML element based on its data.

onFilterPrepareany

Callback function that enables customization of the filter items displayed in the dropdown. It receives a single argument: an array containing all the items available for filtering. Within the function, you can modify this array—such as by updating, removing, or reordering items—to control which options appear in the filter dropdown and how they are presented to the user. The modified array will determine the final set of filter options shown in the UI.

onSortPrepareany

A callback function that allows you to customize the items displayed in the sort dropdown menu. This function receives a single argument: an array containing all available sort options. You can modify this array—by removing, reordering, or updating items—to control which sorting options appear in the dropdown and how they are presented. The modified array will then be used to render the sort options to the user.

onColumnHeaderRenderany

Callback function that allows customization of the column header rendering in the Kanban component. This function is invoked with three arguments: the column header's HTML element, the complete column data object, and the column's data field (a string representing the key associated with the column). Use this callback to modify or enhance the appearance and behavior of column headers as needed.

onColumnFooterRenderany

Callback function that allows you to customize how the column footer is rendered in the Kanban component. This function is invoked with three arguments:

1. The HTML element representing the column header
2. The data object for the current column
3. The field name associated with the column data

Use this callback to modify the footer's appearance or content based on the specific column's properties and data.

selectionMode"zeroOrOne" | "zeroOrManyExtended"

Specifies how items can be selected within the component, such as allowing single selection, multiple selections, or disabling selection entirely.

Allowed Values

• "zeroOrOne" - Only one task can optionally be selected.
• "zeroOrManyExtended" - One or more items can optionally be selected; selection with Ctrl and Shift is allowed.

 <smart-kanban selection-mode='zeroOrManyExtended'></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.selectionMode = 'zeroOrOne';

 const kanban = document.querySelector('smart-kanban');

 let selectionMode = kanban.selectionMode;

storeHistoryboolean

Specifies whether the history of tasks is recorded and shown within the task dialog. When enabled, completed or previous tasks will be saved and displayed, allowing users to review their task activity directly in the dialog. When disabled, task history will not be retained or visible. This setting can be used to set or retrieve the current history display behavior.

 <smart-kanban store-history></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.storeHistory = true;

 const kanban = document.querySelector('smart-kanban');

 let storeHistory = kanban.storeHistory;

storeHistoryItemsnumber

Specifies the collection of task history items to be retrieved or updated when the storeHistory option is enabled. When storeHistory is true, this property determines which task history records are saved and accessed.

 <smart-kanban store-history-items='10'></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.storeHistoryItems = 30;

 const kanban = document.querySelector('smart-kanban');

 let storeHistoryItems = kanban.storeHistoryItems;

rightToLeftboolean

Sets or retrieves a value that determines whether the element’s alignment is configured for right-to-left (RTL) text direction, which is typically used in languages such as Arabic or Hebrew. When enabled, the element layout and text flow will support RTL locales, ensuring proper display for right-to-left scripts.

 <smart-kanban right-to-left></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.rightToLeft = true;

 const kanban = document.querySelector('smart-kanban');

 let rightToLeft = kanban.rightToLeft;

readonlyboolean

Controls the read-only state of the edit dialog. When enabled, the dialog displays task details but disables all editing capabilities for those fields. However, if the comments feature is active, users can still add comments within the dialog, even while other fields remain uneditable.

 <smart-kanban readonly></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.readonly = true;

 const kanban = document.querySelector('smart-kanban');

 let readonly = kanban.readonly;

swimlanesstring | { color?: string, dataField?: string, label?: string }[]

Provides a detailed configuration of swimlanes on the Kanban board, specifying how tasks are grouped horizontally by categories such as assignee, priority, or project. When swimlanes are enabled, sub-columns within each column are disabled to maintain a clear visual separation of items across swimlanes.

 const kanban = document.querySelector('smart-kanban');

 let color = kanban.swimlanes[0].color;

 const kanban = document.querySelector('smart-kanban');

 let dataField = kanban.swimlanes[0].dataField;

 const kanban = document.querySelector('smart-kanban');

 let label = kanban.swimlanes[0].label;

 <smart-kanban swimlanes='{ label: 'Client Energo', dataField: 'client1' }, { label: 'Client Sim-Prod Ltd.', dataField: 'client2', color: '#C90086' }'></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.swimlanes = { label: 'Client Sim-Prod Ltd.', dataField: 'client2', color: '#C90086' }, { label: 'Other clients', dataField: 'other', color: '#03C7C0' };

 const kanban = document.querySelector('smart-kanban');

 let swimlanes = kanban.swimlanes;

swimlanesFromnumber

Specifies or retrieves the zero-based index of the column where the swimlanes should begin. This determines the starting position for rendering swimlanes within a grid or table layout.

 <smart-kanban swimlanes-from='1'></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.swimlanesFrom = 3;

 const kanban = document.querySelector('smart-kanban');

 let swimlanesFrom = kanban.swimlanesFrom;

swimlanesTonumber

Specifies or retrieves the zero-based index of the column where the swimlanes should terminate. By default, swimlanes extend to the final column in the layout. Setting this property allows you to control at which column the swimlanes will stop, providing flexibility in customizing the swimlane display.

 <smart-kanban swimlanes-to='4'></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.swimlanesTo = 3;

 const kanban = document.querySelector('smart-kanban');

 let swimlanesTo = kanban.swimlanesTo;

tags[]

Specifies the permitted tags that can be used. When this property is set, only the listed tags will be allowed; if no tags are specified, all tags provided by the data source are accepted by default. This property can be used to restrict or expand the selection of allowed tags as needed.

 <smart-kanban tags='['method', 'data']'></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.tags = ['research', 'property', 'localization'];

 const kanban = document.querySelector('smart-kanban');

 let tags = kanban.tags;

taskActionsboolean

Controls whether the task actions icon is displayed or hidden, allowing users to show or conceal the icon based on their preferences or application state.

 <smart-kanban task-actions></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.taskActions = false;

 const kanban = document.querySelector('smart-kanban');

 let taskActions = kanban.taskActions;

taskActionsRenderedany

Defines a callback function that is invoked whenever the task actions menu is generated in the UI. This function receives the actions menu element as its parameter, enabling you to modify or extend the menu's content and behavior. For example, you can insert custom menu items, attach event listeners, or alter existing elements within the menu.

'Example usage:'
'''js
(list) => {
// Add a custom menu item
list.innerHTML = '

taskCommentsboolean

Controls whether the task comments icon is displayed or hidden, allowing you to show or conceal the icon associated with task comments.

 <smart-kanban task-comments></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.taskComments = false;

 const kanban = document.querySelector('smart-kanban');

 let taskComments = kanban.taskComments;

taskDueboolean

Controls whether the task due date icon is shown or hidden in the interface. When enabled, the icon indicating a task's due date will be visible; when disabled, the icon will be hidden from view.

 <smart-kanban task-due></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.taskDue = false;

 const kanban = document.querySelector('smart-kanban');

 let taskDue = kanban.taskDue;

taskPosition"all" | "leaf"

Determines whether tasks are displayed across all levels of the column hierarchy or are restricted to only the leaf (lowest-level) columns. When enabled, tasks can be shown in any column within the hierarchy; when disabled, tasks are displayed exclusively in the leaf columns. This setting allows you to control the visibility of tasks based on the column hierarchy structure.

Allowed Values

• "all" - Tasks can be shown in all levels of column hierarchy.
• "leaf" - Tasks can be shown only on leaf columns.

 <smart-kanban task-position='leaf'></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.taskPosition = 'all';

 const kanban = document.querySelector('smart-kanban');

 let taskPosition = kanban.taskPosition;

taskPriorityboolean

Controls whether the task priority icon is displayed. The icon appears when a task is marked as either low or high priority. Disabling this option will hide the icon regardless of the task’s priority status.

 <smart-kanban task-priority></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.taskPriority = false;

 const kanban = document.querySelector('smart-kanban');

 let taskPriority = kanban.taskPriority;

taskProgressboolean

Controls whether the task progress bar and the label displaying the number of completed sub-tasks are shown or hidden. When enabled, both visual elements will be visible; when disabled, they will be hidden from view.

 <smart-kanban task-progress></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.taskProgress = false;

 const kanban = document.querySelector('smart-kanban');

 let taskProgress = kanban.taskProgress;

taskCustomFieldsarray

Defines which custom fields are shown on a task card and how they appear. This property accepts an array of objects, where each object represents a custom field configuration with the following properties:

- 'dataField' (string, required): Specifies the unique key or identifier for the custom field. This determines which value will be displayed on the card.
- 'label' (string, required): The display name or title of the field as it appears on the card.
- 'dataType' (string, required): Indicates the field's data type (e.g., 'string', 'number', 'date'). Used to determine how the field value should be formatted or displayed.
- 'visible' (boolean, optional): If set to 'true', the field is displayed on the card; if 'false', it is hidden. Defaults to 'true' if omitted.
- 'image' (boolean, optional): Set to 'true' if the field value is an image URL or Base64 string. This tells the UI to render the value as an image instead of text.
- 'cover' (boolean, optional): When 'image' is 'true', setting 'cover' to 'true' will display the image as the card’s cover image (typically at the top of the card).

'Example usage:'
'''json
[
{
"dataField": "title",
"label": "Task Title",
"dataType": "string",
"visible": true
},
{
"dataField": "dueDate",
"label": "Due Date",
"dataType": "date"
},
{
"dataField": "avatar",
"label": "Assignee Photo",
"dataType": "string",
"image": true,
"visible": true
},
{
"dataField": "coverImage",
"label": "Project Cover",
"dataType": "string",
"image": true,
"cover": true
}
]
'''
This configuration determines which fields are shown, how they're labeled, their format, and whether any field displays an image or acts as a cover image on the task card.

taskColorEntireSurfaceboolean

The background color of a task is determined by its individual color property. By default, this color is visually represented as an accent along the left border of the task element, rather than filling the entire background. This design helps differentiate tasks based on their assigned colors while maintaining a consistent overall appearance.

 <smart-kanban task-color-entire-surface></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.taskColorEntireSurface = false;

 const kanban = document.querySelector('smart-kanban');

 let taskColorEntireSurface = kanban.taskColorEntireSurface;

taskSubTasksInputboolean

Displays an input field within the task card, allowing users to dynamically add sub-tasks to the main task. To enable this feature, ensure that the 'taskSubTasks' property is set to a value other than 'none'. When 'taskSubTasks' is appropriately configured, users will see and be able to use the sub-task input interface.

 <smart-kanban task-sub-tasks-input></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.taskSubTasksInput = false;

 const kanban = document.querySelector('smart-kanban');

 let taskSubTasksInput = kanban.taskSubTasksInput;

taskSubTasks"none" | "onePerRow" | "onlyUnfinished"

Specifies how sub-tasks are rendered within a task card.
- '"none"' *(default)*: Sub-tasks are hidden on the task card and are only visible within the edit dialog.
- '"onePerRow"': All sub-tasks associated with the task are displayed directly on the task card, with each sub-task shown on its own row.
- '"onlyUnfinished"': Only sub-tasks that are not marked as completed are displayed on the task card; completed sub-tasks remain hidden.

 <smart-kanban task-sub-tasks='onePerRow'></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.taskSubTasks = 'onlyUnfinished';

 const kanban = document.querySelector('smart-kanban');

 let taskSubTasks = kanban.taskSubTasks;

taskTagsboolean

Controls whether task tags are shown or hidden in the user interface, allowing users to display or conceal tag information associated with each task.

 <smart-kanban task-tags></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.taskTags = false;

 const kanban = document.querySelector('smart-kanban');

 let taskTags = kanban.taskTags;

taskUserIconboolean

Controls whether the task user icon is displayed or hidden, allowing you to show or hide the icon representing the user associated with a task.

 <smart-kanban task-user-icon></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.taskUserIcon = false;

 const kanban = document.querySelector('smart-kanban');

 let taskUserIcon = kanban.taskUserIcon;

textTemplatestring | (settings: { data: any, task: HTMLDivElement, text: string, template?: string }) => void

Specifies the template to use for rendering task text. This property accepts multiple value types:

- A string starting with #, which references the id of a <template> element on the page. The contents of this element will be used as the template.
- A string containing HTML or template markup, which will be parsed and applied directly to the task text.
- A function, which receives the task text (or a template) as input and returns the modified text or template to be used.

This property can be both set to define the template for future tasks, or retrieved to access the currently applied template.

 <smart-kanban text-template='true'></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.textTemplate = false;

 const kanban = document.querySelector('smart-kanban');

 let textTemplate = kanban.textTemplate;

themestring

Specifies the theme applied to the element. The theme controls the visual appearance, including colors, fonts, and overall style, ensuring a consistent look and feel across the component.

 <smart-kanban theme='blue'></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.theme = 'red';

 const kanban = document.querySelector('smart-kanban');

 let theme = kanban.theme;

priorityListboolean

Controls the visibility of the priority list (as specified by the priority property) when the user clicks the priority icon. This option is only effective when users have editable privileges enabled, allowing them to modify the priority value. If set to true, the list will appear on icon click; if false, the list will remain hidden.

 <smart-kanban priority-list></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.priorityList = false;

 const kanban = document.querySelector('smart-kanban');

 let priorityList = kanban.priorityList;

priority{ label: string, value: string }[]

Specifies the available priority levels that can be assigned to Kanban tasks. This array defines each priority as an object containing a label (for display purposes) and a corresponding value (for internal use).
Example: [{label: 'Low', value: 'low'}, {label: 'High', value: 'high'}]
Use this property to customize or extend the set of priority options in your Kanban board.

 const kanban = document.querySelector('smart-kanban');

 let label = kanban.priority.label;

 const kanban = document.querySelector('smart-kanban');

 let value = kanban.priority.value;

 <smart-kanban priority='true'></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.priority = false;

 const kanban = document.querySelector('smart-kanban');

 let priority = kanban.priority;

userListboolean

Controls the visibility of the user list—defined by the users property—when the user icon is clicked. This setting is only effective if editable privileges are enabled; otherwise, the user list will not be displayed regardless of this option.

 <smart-kanban user-list></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.userList = false;

 const kanban = document.querySelector('smart-kanban');

 let userList = kanban.userList;

users{ allowAdd?: boolean, allowComment?: boolean, allowDrag?: boolean, allowEdit?: boolean, allowRemove?: boolean, id: string | number, image?: string, name?: string }[]

Specifies the users eligible to be assigned Kanban tasks, along with their associated attributes (such as name, role, and status) and permissions (such as create, edit, or delete task capabilities).

 const kanban = document.querySelector('smart-kanban');

 let allowAdd = kanban.users[0].allowAdd;

 const kanban = document.querySelector('smart-kanban');

 let allowComment = kanban.users[0].allowComment;

 const kanban = document.querySelector('smart-kanban');

 let allowDrag = kanban.users[0].allowDrag;

 const kanban = document.querySelector('smart-kanban');

 let allowEdit = kanban.users[0].allowEdit;

 const kanban = document.querySelector('smart-kanban');

 let allowRemove = kanban.users[0].allowRemove;

 const kanban = document.querySelector('smart-kanban');

 let id = kanban.users[0].id;

 const kanban = document.querySelector('smart-kanban');

 let image = kanban.users[0].image;

 const kanban = document.querySelector('smart-kanban');

 let name = kanban.users[0].name;

 <smart-kanban users='true'></smart-kanban>

 const kanban = document.querySelector('smart-kanban');

 kanban.users = false;

 const kanban = document.querySelector('smart-kanban');

 let users = kanban.users;

Events

changeCustomEvent

This event is triggered whenever any changes are made to the details, status, or properties of an existing task. It allows you to respond programmatically whenever a task is modified, ensuring your application can stay synchronized with the latest task information.

• Bubbles Yes
• Cancelable No
• Interface CustomEvent
• Event handler property onChange

Arguments

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('change', function (event) {
    const detail = event.detail,
        oldValue = detail.oldValue,
        task = detail.task,
        value = detail.value;

	// event handling code goes here.
})

closeCustomEvent

This event is triggered when the user closes the edit or prompt dialog, either by submitting changes or canceling the operation. It signals that the dialog has been dismissed and any associated actions, such as saving or discarding input, should be handled.

• Bubbles Yes
• Cancelable No
• Interface CustomEvent
• Event handler property onClose

Arguments

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('close', function (event) {
	// event handling code goes here.
})

closingCustomEvent

This event fires just before the edit or prompt dialog is about to close, giving you an opportunity to intercept the closing action. By calling event.preventDefault() within the event handler, you can cancel the closing operation, allowing you to perform validation or prompt the user before the dialog is dismissed.

• Bubbles Yes
• Cancelable Yes
• Interface CustomEvent
• Event handler property onClosing

Arguments

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('closing', function (event) {
	// event handling code goes here.
})

columnAddCustomEvent

This event is triggered whenever a new column is successfully added to the data structure or interface. It allows you to respond to the addition of a column, such as updating the user interface, modifying related data, or performing custom logic. The event provides details about the added column, including its name, index, and relevant metadata.

• Bubbles Yes
• Cancelable No
• Interface CustomEvent
• Event handler property onColumnAdd

Arguments

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('columnAdd', function (event) {
    const detail = event.detail,
        label = detail.label,
        dataField = detail.dataField,
        collapsed = detail.collapsed;

	// event handling code goes here.
})

columnRemoveCustomEvent

This event is triggered whenever a column is deleted or removed from the data structure, table, or grid. It provides an opportunity to handle any necessary updates or clean-up tasks related to the removal of a column, such as updating the user interface, adjusting data bindings, or modifying underlying data sources. The event typically includes information about the column that was removed, allowing developers to respond dynamically to changes in the structure.

• Bubbles Yes
• Cancelable No
• Interface CustomEvent
• Event handler property onColumnRemove

Arguments

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('columnRemove', function (event) {
    const detail = event.detail,
        label = detail.label,
        dataField = detail.dataField,
        collapsed = detail.collapsed;

	// event handling code goes here.
})

columnReorderCustomEvent

This event is triggered whenever a user changes the position of a column, such as by dragging and dropping a column header to rearrange the column order in the table.

• Bubbles Yes
• Cancelable No
• Interface CustomEvent
• Event handler property onColumnReorder

Arguments

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('columnReorder', function (event) {
    const detail = event.detail,
        oldIndex = detail.oldIndex,
        index = detail.index,
        column = detail.column;

	// event handling code goes here.
})

columnUpdateCustomEvent

This event is triggered whenever the data in a column is updated. It occurs after any changes are made to the value(s) of a column, providing an opportunity to respond to or process the updated data. Listeners can use this event to execute custom logic, such as validating input, persisting changes, or updating related UI components.

• Bubbles Yes
• Cancelable No
• Interface CustomEvent
• Event handler property onColumnUpdate

Arguments

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('columnUpdate', function (event) {
    const detail = event.detail,
        oldValue = detail.oldValue,
        value = detail.value,
        column = detail.column;

	// event handling code goes here.
})

columnClickCustomEvent

This event is triggered whenever a user clicks on a column header within the data table. It can be used to initiate actions such as sorting the column, displaying a menu, or highlighting the selected column. The event typically provides information about which column was clicked, enabling you to implement custom logic based on the user's interaction.

• Bubbles Yes
• Cancelable No
• Interface CustomEvent
• Event handler property onColumnClick

Arguments

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('columnClick', function (event) {
    const detail = event.detail,
        label = detail.label,
        dataField = detail.dataField,
        collapsed = detail.collapsed;

	// event handling code goes here.
})

columnDoubleClickCustomEvent

This event is triggered when a user double-clicks on a column header, typically in a data grid or table. It can be used to initiate actions such as resizing the column, sorting data, or displaying additional options related to the selected column.

• Bubbles Yes
• Cancelable No
• Interface CustomEvent
• Event handler property onColumnDoubleClick

Arguments

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('columnDoubleClick', function (event) {
    const detail = event.detail,
        label = detail.label,
        dataField = detail.dataField,
        collapsed = detail.collapsed;

	// event handling code goes here.
})

columnShowCustomEvent

This event is triggered whenever a column becomes visible—either when a user selects the "Show" option from the column's action menu, or when the Kanban component's `show` method is programmatically called to reveal the column.

• Bubbles Yes
• Cancelable No
• Interface CustomEvent
• Event handler property onColumnShow

Arguments

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('columnShow', function (event) {
    const detail = event.detail,
        label = detail.label,
        dataField = detail.dataField;

	// event handling code goes here.
})

columnHideCustomEvent

This event is triggered whenever a column is hidden, either through the column's action menu or programmatically via the Kanban board’s `hide` method. Use this event to execute custom logic or UI updates whenever a column becomes invisible to the user.

• Bubbles Yes
• Cancelable No
• Interface CustomEvent
• Event handler property onColumnHide

Arguments

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('columnHide', function (event) {
    const detail = event.detail,
        label = detail.label,
        dataField = detail.dataField;

	// event handling code goes here.
})

columnCollapseCustomEvent

This event is triggered whenever a column is collapsed, either by selecting the "Collapse" option from the column's action menu or by programmatically invoking the Kanban board's `collapse` method.

• Bubbles Yes
• Cancelable No
• Interface CustomEvent
• Event handler property onColumnCollapse

Arguments

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('columnCollapse', function (event) {
    const detail = event.detail,
        label = detail.label,
        dataField = detail.dataField;

	// event handling code goes here.
})

columnExpandCustomEvent

This event is triggered whenever a column in the Kanban board is expanded, either by a user selecting the "expand" option from the column's action menu or programmatically through the Kanban component's `expand` method.

• Bubbles Yes
• Cancelable No
• Interface CustomEvent
• Event handler property onColumnExpand

Arguments

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('columnExpand', function (event) {
    const detail = event.detail,
        label = detail.label,
        dataField = detail.dataField;

	// event handling code goes here.
})

commentAddCustomEvent

This event is triggered whenever a user adds a comment to a task within the Kanban board. It activates immediately after the comment is successfully posted, allowing you to respond to or process new task comments in real-time.

• Bubbles Yes
• Cancelable No
• Interface CustomEvent
• Event handler property onCommentAdd

Arguments

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('commentAdd', function (event) {
    const detail = event.detail,
        id = detail.id,
        value = detail.value;

	// event handling code goes here.
})

commentRemoveCustomEvent

This event is triggered whenever a comment is deleted from a task card within the Kanban board. It allows you to perform actions or updates in response to the removal of a comment from any Kanban task.

• Bubbles Yes
• Cancelable No
• Interface CustomEvent
• Event handler property onCommentRemove

Arguments

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('commentRemove', function (event) {
    const detail = event.detail,
        id = detail.id,
        value = detail.value;

	// event handling code goes here.
})

commentUpdateCustomEvent

This event is triggered whenever an existing comment on a Kanban Task is modified. It occurs after any changes are made to the comment’s content, such as edits or updates, allowing you to respond to or track comment modifications within the Kanban board.

• Bubbles Yes
• Cancelable No
• Interface CustomEvent
• Event handler property onCommentUpdate

Arguments

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('commentUpdate', function (event) {
    const detail = event.detail,
        id = detail.id,
        value = detail.value;

	// event handling code goes here.
})

dragEndCustomEvent

This event is triggered when a task is dropped onto a target element within the DOM during a drag-and-drop operation. It allows developers to handle the completion of a drag action by responding to where the task is released. To prevent the default drop behavior—such as moving the element or initiating a browser action—you can call event.preventDefault() within the event handler. This enables you to implement custom logic for handling dropped tasks, such as updating data models, modifying the UI, or triggering other application-specific actions."

• Bubbles Yes
• Cancelable Yes
• Interface CustomEvent
• Event handler property onDragEnd

Arguments

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('dragEnd', function (event) {
    const detail = event.detail,
        container = detail.container,
        data = detail.data,
        item = detail.item,
        items = detail.items,
        originalEvent = detail.originalEvent,
        previousContainer = detail.previousContainer,
        target = detail.target;

	// event handling code goes here.
})

draggingCustomEvent

This event is triggered while the user is actively dragging a task, such as during a drag-and-drop operation. It fires continuously as the task is being moved, enabling real-time updates or visual feedback in response to the task's position.

• Bubbles Yes
• Cancelable Yes
• Interface CustomEvent
• Event handler property onDragging

Arguments

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('dragging', function (event) {
    const detail = event.detail,
        data = detail.data,
        item = detail.item,
        items = detail.items,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

dragStartCustomEvent

This event is fired when the user initiates a drag action on one or more tasks. During the event, you can access information about the tasks being dragged. If you want to prevent the drag-and-drop operation from starting, you can call event.preventDefault() inside your event handler. This will cancel the dragging process and prevent any associated drag logic or UI changes from occurring.

• Bubbles Yes
• Cancelable Yes
• Interface CustomEvent
• Event handler property onDragStart

Arguments

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('dragStart', function (event) {
    const detail = event.detail,
        container = detail.container,
        data = detail.data,
        item = detail.item,
        items = detail.items,
        originalEvent = detail.originalEvent,
        previousContainer = detail.previousContainer;

	// event handling code goes here.
})

filterCustomEvent

This event is triggered immediately after a user applies a filter to refine the displayed data. It indicates that the filter criteria have been set and the view has been updated accordingly. Developers can use this event to perform actions such as fetching new data, updating UI elements, or logging user interactions related to filtering.

• Bubbles Yes
• Cancelable No
• Interface CustomEvent
• Event handler property onFilter

Arguments

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('filter', function (event) {
	// event handling code goes here.
})

openCustomEvent

This event is triggered whenever the edit or prompt dialog window is displayed to the user. It signals that the user interface has opened a dialog for editing content or requesting input, allowing developers to execute custom logic in response to the dialog becoming visible.

• Bubbles Yes
• Cancelable No
• Interface CustomEvent
• Event handler property onOpen

Arguments

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('open', function (event) {
	// event handling code goes here.
})

openingCustomEvent

This event is fired immediately before the edit or prompt dialog is displayed. You can intercept and prevent the dialog from opening by calling event.preventDefault() within your event handler. This allows you to provide your own custom dialog or take other actions instead of showing the default Kanban dialog. To stop the default Kanban dialog from appearing, simply call event.preventDefault() in the appropriate event handler function.

• Bubbles Yes
• Cancelable Yes
• Interface CustomEvent
• Event handler property onOpening

Arguments

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('opening', function (event) {
    const detail = event.detail,
        comment = detail.comment,
        purpose = detail.purpose,
        task = detail.task;

	// event handling code goes here.
})

sortCustomEvent

This event is triggered immediately after a sorting operation has been applied to the data set. It signifies that the data has been reordered based on the selected sorting criteria, and any relevant updates or UI refreshes can be performed in response to this change. The event may provide details about the sort field(s), direction (ascending or descending), and the affected data.

• Bubbles Yes
• Cancelable No
• Interface CustomEvent
• Event handler property onSort

Arguments

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('sort', function (event) {
	// event handling code goes here.
})

taskBeforeAddCustomEvent

This event is fired immediately before a new task is added to the Kanban board. Within the event handler, you can access and modify the task's initial data using event.detail.value (which contains the task details) and event.detail.id (which represents the task's unique identifier). This allows you to customize attributes—such as assigning a specific ID or updating field values—before the task is officially added.

**Example usage:**

```js
kanban.onTaskBeforeAdd = (event) => {
const taskData = event.detail.value; // the task data before it is added
const currentId = event.detail.id; // the proposed task ID
event.detail.id = 'BG12'; // assign a custom ID before adding
// Additional custom logic can be added here
};
```

**Note:** Make any necessary changes to `event.detail.value` or `event.detail.id` within this handler to control how tasks are created and represented on your Kanban board.

• Bubbles Yes
• Cancelable No
• Interface CustomEvent
• Event handler property onTaskBeforeAdd

Arguments

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('taskBeforeAdd', function (event) {
    const detail = event.detail,
        value = detail.value,
        id = detail.id;

	// event handling code goes here.
})

taskAddCustomEvent

This event fires whenever a new task is added to the Kanban board. The associated event object contains detailed information about the new task, accessible via the event's detail property.

**Example usage:**

```javascript
kanban.onTaskAdd = (event) => {
const taskData = event.detail.value; // Contains the properties of the newly added task
const taskId = event.detail.id; // Unique identifier of the new task
}
```

**Description:**
Use this event to execute custom logic or update your application whenever a user creates a new task. The `event.detail.value` provides the complete task data object, while `event.detail.id` gives you the unique ID assigned to that task.

• Bubbles Yes
• Cancelable No
• Interface CustomEvent
• Event handler property onTaskAdd

Arguments

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('taskAdd', function (event) {
    const detail = event.detail,
        value = detail.value,
        id = detail.id;

	// event handling code goes here.
})

taskRemoveCustomEvent

This event is triggered whenever a task is deleted or removed from the system. It occurs immediately after a task is successfully deleted, allowing you to perform any necessary cleanup, updates, or notifications in response to the removal action.

• Bubbles Yes
• Cancelable No
• Interface CustomEvent
• Event handler property onTaskRemove

Arguments

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('taskRemove', function (event) {
    const detail = event.detail,
        value = detail.value,
        id = detail.id;

	// event handling code goes here.
})

taskUpdateCustomEvent

This event is triggered whenever a task undergoes an update, such as changes to its status, description, assigned users, due date, or any other task-related property. It allows listeners to respond in real time to modifications made to existing tasks.

• Bubbles Yes
• Cancelable No
• Interface CustomEvent
• Event handler property onTaskUpdate

Arguments

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('taskUpdate', function (event) {
    const detail = event.detail,
        value = detail.value,
        oldValue = detail.oldValue,
        id = detail.id;

	// event handling code goes here.
})

taskClickCustomEvent

This event is fired when a user clicks on a task item, allowing you to execute custom logic in response to the interaction. It provides details about the clicked task, enabling you to access its data or update its state as needed.

• Bubbles Yes
• Cancelable No
• Interface CustomEvent
• Event handler property onTaskClick

Arguments

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('taskClick', function (event) {
    const detail = event.detail,
        value = detail.value,
        id = detail.id;

	// event handling code goes here.
})

taskDoubleClickCustomEvent

This event is triggered when a user double-clicks on a task element in the interface. It allows you to detect and respond to double-click actions performed specifically on individual tasks, enabling functionalities such as editing, viewing task details, or initiating other custom behaviors associated with a double-click interaction.

• Bubbles Yes
• Cancelable No
• Interface CustomEvent
• Event handler property onTaskDoubleClick

Arguments

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('taskDoubleClick', function (event) {
    const detail = event.detail,
        value = detail.value,
        id = detail.id;

	// event handling code goes here.
})

Methods

addFilter( filters: any, operator?: string): void

Enables advanced filtering functionality for the data. For example, you can create a `Smart.FilterGroup` object to build complex filters. You might define a filter that checks if a 'Country' field contains the string 'Italy':

```javascript
const filterGroup = new Smart.FilterGroup();
const filterObject = filterGroup.createFilter('string', 'Italy', 'contains');
filterGroup.addFilter('and', filterObject);
kanban.addFilter([['Country', filterGroup]]);
```

In this example, a filter group is created. A filter is then defined to match records where the 'Country' column contains the text 'Italy'. This filter is combined into the group with a logical 'and' operator and finally applied to the Kanban board using the `addFilter` method. This approach supports combining multiple filters with logical operators for dynamic and flexible data querying.

Arguments

filtersany

Filter information. Example: kanban.addFilter([['Country', filterGroup]]);. Each array item is a sub array with two items - 'dataField' and 'filterGroup' object. The 'dataField' is any valid data field from the data source bound to the Kanban like 'dueDate', 'startDate' or custom fields like 'Country'. Filter conditions which you can use in the expressions: '=', 'EQUAL','<>', 'NOT_EQUAL', '!=', '<', 'LESS_THAN','>', 'GREATER_THAN', '<=', 'LESS_THAN_OR_EQUAL', '>=', 'GREATER_THAN_OR_EQUAL','starts with', 'STARTS_WITH','ends with', 'ENDS_WITH', '', 'EMPTY', 'CONTAINS','DOES_NOT_CONTAIN', 'NULL','NOT_NULL'

operator?string

Logical operator between the filters of different fields. Possible values are: 'and', 'or'.

const kanban = document.querySelector('smart-kanban');
kanban.addFilter("[['firstName', filterGroup]], 'and'");

addSort( dataFields: [] | string, orderBy: [] | string): void

Enables customizable sorting functionality for your kanban board data.
You can specify one or more fields to sort by, along with the desired sort order (e.g., 'ascending' or 'descending').
Example usage: kanban.addSort(['Country'], 'ascending');
This will sort the kanban items in ascending order based on the 'Country' field.
You can also pass multiple fields (e.g., kanban.addSort(['Country', 'Name'], 'descending')) to create multi-level sorting.

Arguments

dataFields[] | string

The data field(s) to sort by

orderBy[] | string

The sort direction(s) to sort the data field(s) by. Possible values are: 'ascending' and 'descending'.

const kanban = document.querySelector('smart-kanban');
kanban.addSort(["firstName","country"],"ascending");

addTask( data?: any): void

Adds a new task to a specified Kanban column. If no column or task data is provided, an empty task with default values will be created and placed in the first column of the Kanban board.

Arguments

data?any

An object containing the new task's data

const kanban = document.querySelector('smart-kanban');
kanban.addTask({"id":18,"text":"New task","status":"toDo","tags":"new, delayed"});

addColumn( data?: any): void

Adds a new column to the Kanban board. If no column data is provided, a blank column with default settings will be created and added. If column data is specified, the column will be initialized with the provided properties.

Arguments

data?any

An object containing the new column's data

const kanban = document.querySelector('smart-kanban');
kanban.addColumn({"dataField":"toDoNew","label":"New column"});

beginEdit( task: number | string | HTMLElement): void

Initiates an edit operation, allowing modifications to be made to the current data or document. This operation typically marks the start of a transaction, enabling changes to be tracked and either saved (committed) or discarded (rolled back) upon completion.

Arguments

tasknumber | string | HTMLElement

The task's id or corresponding HTMLElement

const kanban = document.querySelector('smart-kanban');
kanban.beginEdit(8);

cancelEdit(): void

Terminates the ongoing edit operation and reverts all unsaved changes, restoring the data to its previous state before the edit began.

const kanban = document.querySelector('smart-kanban');
kanban.cancelEdit();

closePanel(): void

Closes any currently open header panel dropdown, ensuring that all active dropdown menus within the header section are hidden from view.

const kanban = document.querySelector('smart-kanban');
kanban.closePanel();

collapse( column: number | string): void

Collapses a Kanban column, minimizing its contents and reducing its width to provide a more compact view of the board. This action hides the tasks within the column while keeping the column header visible, allowing users to focus on other sections of the Kanban board.

Arguments

columnnumber | string

The index or dataField of the column to collapse

const kanban = document.querySelector('smart-kanban');
kanban.collapse("done");

clearSelection(): void

Removes any currently selected items or cards within the Kanban board, ensuring that no items remain selected. This action resets the selection state of the Kanban component.

const kanban = document.querySelector('smart-kanban');
kanban.clearSelection();

hide( column: number | string): void

Conceals a specific column within a Kanban board, making its contents and tasks temporarily invisible to users without deleting any data. This action helps declutter the board or focus attention on other columns. The hidden column can typically be shown again through board settings or controls.

Arguments

columnnumber | string

The index or dataField of the column to hide

const kanban = document.querySelector('smart-kanban');
kanban.hide("done");

copyTask( task: number | string | HTMLElement): void

Creates a duplicate of an existing task within the same column, preserving all task details such as title, description, assignees, and deadlines. The copied task will appear alongside the original in the same column, allowing for easy modification without affecting the original task.

Arguments

tasknumber | string | HTMLElement

The task's id or corresponding HTMLElement

const kanban = document.querySelector('smart-kanban');
kanban.copyTask(1);

endEdit(): void

Completes the current editing session by finalizing any modifications made and persisting all changes to the underlying data source.

const kanban = document.querySelector('smart-kanban');
kanban.endEdit();

ensureVisible( task: number | string | HTMLElement): HTMLElement

Ensures that the specified task is brought into view within the scrollable container by automatically scrolling to its position. If the operation is successful, the method returns the corresponding HTML element representing the task.

Arguments

tasknumber | string | HTMLElement

The task's id or corresponding HTMLElement

ReturnsHTMLElement

const kanban = document.querySelector('smart-kanban');
const result = kanban.ensureVisible(5);

expand( column: number | string): void

Expands a Kanban board column to display all its contents, allowing users to view every card within the column in detail. This functionality makes it easier to manage, organize, and interact with all items in the selected column.

Arguments

columnnumber | string

The index or dataField of the column to expand

const kanban = document.querySelector('smart-kanban');
kanban.expand("done");

expandAll(): void

Expands every Kanban column to display all hidden or collapsed tasks, ensuring that all items within each column are fully visible.

const kanban = document.querySelector('smart-kanban');
kanban.expandAll("done");

exportData( dataFormat: string, fileName: string, callback?: Function): any

Exports all current data from the Kanban board, including task details, statuses, columns, and any associated metadata, into a structured format (such as JSON or CSV) for backup, sharing, or integration purposes.

Arguments

dataFormatstring

The file format to export to. Supported formats: 'csv', 'html', 'json', 'pdf', 'tsv', 'xlsx', 'xml'.

fileNamestring

The name of the file to export to

callback?Function

A callback function to pass the exported data to (if fileName is not provided)

Returnsany

const kanban = document.querySelector('smart-kanban');
const result = kanban.exportData("html","my-kanban");

getColumn( dataField: string): any

Retrieves detailed information about a specific column. The returned value is a JSON object containing the following fields:

- label: The display name of the column.
- dataField: The key or property name associated with the column's data.
- collapsed: A boolean indicating whether the column is currently collapsed.
- collapsible: A boolean specifying if the column can be collapsed or expanded by the user.
- allowRemove: A boolean that determines whether the column can be removed from the view.
- editable: A boolean indicating if the column's cells are editable.
- reorder: A boolean specifying whether the column can be reordered by the user.
- orientation: Describes the orientation of the column, such as "horizontal" or "vertical".

Use this object to access or modify the configuration and behavior of the column in your application interface.

Arguments

dataFieldstring

The column's data field

Returnsany

const kanban = document.querySelector('smart-kanban');
const result = kanban.getColumn("toDo");

getTask( id: number): any

Retrieves detailed information about a specific task. The returned value is a JSON object containing the following fields:

- checklist: An array of checklist items associated with the task
- id: The unique identifier for the task
- color: A string representing the task label or color code
- comments: An array of comment objects related to the task
- history: An array that records the chronological history of changes and activity for the task
- dueDate: The date and time when the task is due
- startDate: The date and time when the task is scheduled to start
- priority: The task's priority level (e.g., low, medium, high)
- progress: The percentage of task completion
- status: The current status of the task (e.g., open, in progress, completed)
- swimlane: The swimlane or category the task is assigned to
- tags: An array of tags or keywords associated with the task
- text: The task title or main summary
- description: Detailed information about the task
- userId: The identifier of the user currently assigned to the task
- createdUserId: The identifier of the user who created the task
- createdDate: The date and time when the task was created
- updatedUserId: The identifier of the user who last updated the task
- updatedDate: The date and time when the task was last updated

This structured JSON object enables developers to access all relevant attributes for rendering and managing tasks within an application.

Arguments

idnumber

The task's id

Returnsany

const kanban = document.querySelector('smart-kanban');
const result = kanban.getTask("2");

getSelectedTasks( id: number): any

Retrieves the IDs of all selected tasks.
The returned value is an array, where each element represents the unique 'id' associated with a selected task. If no tasks are selected, the array will be empty.

Arguments

idnumber

The task's id

Returnsany

const kanban = document.querySelector('smart-kanban');
const result = kanban.getSelectedTasks();

getState(): any

Retrieves the current state of the Kanban board as a comprehensive object. The returned object contains detailed information about the board's configuration and user interactions, structured as follows:

```typescript
{
collapsed: {
// Tracks which Kanban columns or swimlanes are currently collapsed.
// Keys represent the column or swimlane identifiers, and values indicate their collapsed state.
[key: string]: boolean;
},
dataSource: [
// An array of data objects representing all Kanban tasks/cards currently on the board.
// Each item typically includes task details such as id, status, title, description, etc.
],
filtering: {
filters: [
// Array of filter objects currently applied.
// Each filter describes criteria such as field, comparison operator, and value.
],
operator: string;
// Logical operator ("AND"/"OR") used to combine multiple filters.
},
selection: {
selected: [
// Array of IDs or references of currently selected tasks/cards.
],
selectionStart?: number | string;
// Optional: Identifies the first item in a selection range (useful for range selection with shift-click).
selectionInColumn: string;
// ID or name of the column where selection started or is active.
swimlane: string;
// ID or name of the currently active swimlane (if swimlanes are in use).
},
sorting: {
dataFields: [
// Array of fields currently used to sort the Kanban data (e.g., ["priority", "dueDate"]).
],
dataTypes: [
// Corresponding data types for each sorting field (e.g., ["number", "date"]).
],
orderBy: [
// Sort directions corresponding to each field ("asc" or "desc").
]
},
tabs: [
// List of tab states or identifiers, reflecting open and active views within the Kanban UI.
],
visibility: {
taskActions: boolean; // Whether task action buttons are visible.
taskComments: boolean; // Whether task comments are shown.
taskDue: boolean; // Whether due date indicators are visible.
taskPriority: boolean; // Whether task priority display is enabled.
taskProgress: boolean; // Whether task progress bars or indicators are shown.
taskTags: boolean; // Whether tags associated with tasks are visible.
taskUserIcon: boolean; // Whether user or assignee icons are visible on tasks.
}
}
```

This state object enables you to persist, inspect, or restore the Kanban board’s full interactive state, including data, UI settings, filters, sortings, selections, and visibility toggles. It is suitable for use cases such as saving the user’s workspace, synchronizing state across sessions, or debugging Kanban board behavior.

Returnsany

const kanban = document.querySelector('smart-kanban');
const result = kanban.getState();

loadState( state?: { collapsed: {}, dataSource: [], filtering: { filters: [], operator: string }, selection: { selected: [], selectionStart?: number | string, selectionInColumn: string, swimlane: string }, sorting: { dataFields: [], dataTypes: [], orderBy: [] }, tabs: [], visibility: { taskActions: boolean, taskComments: boolean, taskDue: boolean, taskPriority: boolean, taskProgress: boolean, taskTags: boolean, taskUserIcon: boolean } }): void

Retrieves and initializes the current state of the Kanban board, including all columns, tasks, and their respective statuses, to ensure the user sees the latest project information.

Arguments

state?{ collapsed: {}, dataSource: [], filtering: { filters: [], operator: string }, selection: { selected: [], selectionStart?: number | string, selectionInColumn: string, swimlane: string }, sorting: { dataFields: [], dataTypes: [], orderBy: [] }, tabs: [], visibility: { taskActions: boolean, taskComments: boolean, taskDue: boolean, taskPriority: boolean, taskProgress: boolean, taskTags: boolean, taskUserIcon: boolean } }

An object returned by one of the methods getState or saveState. If not passed, gets saved state from the browser's localStorage.

const kanban = document.querySelector('smart-kanban');
kanban.loadState();

moveTask( task: number | string | HTMLElement, newStatus: string): void

Moves a specified task from its current column to a target column within the workflow or board, updating its status and position accordingly.

Arguments

tasknumber | string | HTMLElement

The task's id or corresponding HTMLElement

newStatusstring

The new status of the task (its new column's dataField)

const kanban = document.querySelector('smart-kanban');
kanban.moveTask(11);

openCustomizePanel(): void

Displays the "Customize Tasks" header panel as a dropdown menu, allowing users to access and modify task customization options.

const kanban = document.querySelector('smart-kanban');
kanban.openCustomizePanel();

openFilterPanel(): void

Displays the "Filter" panel by opening its dropdown menu in the header section, allowing users to access and apply filtering options.

const kanban = document.querySelector('smart-kanban');
kanban.openFilterPanel();

openSortPanel(): void

Displays the "Sort" header panel as a dropdown menu, allowing users to select sorting options for the displayed data.

const kanban = document.querySelector('smart-kanban');
kanban.openSortPanel();

removeFilter(): void

Removes all applied filters, displaying the complete, unfiltered dataset.

const kanban = document.querySelector('smart-kanban');
kanban.removeFilter();

removeSort(): void

Disables any previously applied sorting, returning the data to its original, unsorted order.

const kanban = document.querySelector('smart-kanban');
kanban.removeSort();

removeTask( task: number | string | HTMLElement, prompt?: boolean): void

Deletes a specified task from the task list, permanently removing it from the data store.

Arguments

tasknumber | string | HTMLElement

The task's id or corresponding HTMLElement

prompt?boolean

Whether or not to prompt the user before removing the task

const kanban = document.querySelector('smart-kanban');
kanban.removeTask(2);

removeColumn( dataField: string): void

Removes a specified column from the data set or table, effectively deleting all data contained within that column and updating the structure to reflect its absence. This operation is irreversible and affects any processes or queries that rely on the removed column.

Arguments

dataFieldstring

The column's data field

const kanban = document.querySelector('smart-kanban');
kanban.removeColumn("toDo");

saveState(): void

Persists the current state of the Kanban board—including all columns, cards, and their order—to the browser's localStorage. This ensures that the user's board layout and content are retained and automatically restored when the page is reloaded or the browser is reopened.

const kanban = document.querySelector('smart-kanban');
kanban.saveState();

show( column: number | string): void

Displays a single Kanban column, including the column title and a list of tasks or cards assigned to that column. Ideal for use in Kanban boards to visually organize tasks by status or category within a workflow.

Arguments

columnnumber | string

The index or dataField of the column to show

const kanban = document.querySelector('smart-kanban');
kanban.show("done");

showAllColumns(): void

Displays a comprehensive list of all Kanban columns, including their names, order, and relevant metadata. This allows users or applications to view the complete structure of the Kanban board and manage workflow stages effectively.

const kanban = document.querySelector('smart-kanban');
kanban.showAllColumns();

selectTask( task: number | string): void

Selects a specific task from a list or collection, allowing the application to retrieve or highlight the chosen task's details for further actions such as viewing, editing, or managing it.

Arguments

tasknumber | string

The task's id.

const kanban = document.querySelector('smart-kanban');
kanban.selectTask(2);

unselectTask( task: number | string): void

Deselects a previously selected task, removing its active or highlighted status within the user interface.

Arguments

tasknumber | string

The task's id.

const kanban = document.querySelector('smart-kanban');
kanban.unselectTask(2);

updateTask( task: number | string | HTMLElement, newData: {}): void

Updates the details of an existing task, such as its title, description, status, due date, or assigned user.

Arguments

tasknumber | string | HTMLElement

The task's id or corresponding HTMLElement

newData{}

The new data to visualize in the task.

const kanban = document.querySelector('smart-kanban');
kanban.updateTask(2);

updateColumn( dataField: string, newData: {}): void

Updates the value of a specified column in a database table. This operation allows you to modify existing data by providing the column name and the new value to be set. Optionally, you can specify conditions to ensure that only rows matching certain criteria are updated.

Arguments

dataFieldstring

The new column's data field

newData{}

The new data to visualize in the column.

const kanban = document.querySelector('smart-kanban');
kanban.updateColumn("toDo");

CSS Variables

--smart-kanban-default-widthvar()

Default width of Kanban

--smart-kanban-default-heightvar()

Default height of Kanban

--smart-kanban-header-sizevar()

Header size of Kanban (applies to header and column headers)

--smart-kanban-task-min-widthvar()

Min width for Kanban tasks in columns with horizontal orientation

--smart-kanban-task-min-heightvar()

Kanban task min height

--smart-kanban-text-max-heightvar()

Kanban task text part max height

--smart-kanban-user-icon-sizevar()

Kanban user icon size

--smart-kanban-user-list-widthvar()

Kanban user list width

--smart-kanban-user-list-max-heightvar()

Kanban user list max height

--smart-kanban-comments-list-widthvar()

Kanban comments list width

--smart-kanban-comments-list-heightvar()

Kanban comments list height

--smart-kanban-new-comment-heightvar()

Height of new comment section

--smart-kanban-new-comment-height-expandedvar()

Expanded height of new comment section

--smart-kanban-send-button-heightvar()

Height of Send button in new comment section

--smart-kanban-color-band-widthvar()

Kanban color band width (i.e. left border of tasks)

--smart-data-view-paddingvar()

Padding of the CardView and Kanban

--smart-data-view-customize-panel-widthvar()

Width of the CardView and Kanban customize panel (drop down).

--smart-data-view-filter-panel-widthvar()

Width of the CardView and Kanban filter panel (drop down).

--smart-data-view-sort-panel-widthvar()

Width of the CardView and Kanban sort panel (drop down).

--smart-data-view-search-panel-widthvar()

Width of the CardView and Kanban search panel (drop down).

--smart-kanban-add-new-column-widthvar()

Kanban "+ New status" column width.