Kanban Javascript API

Example

Set the allowColumnReorder property.

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

Set the allowColumnReorder property by using the HTML Element's instance.

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

 kanban.allowColumnReorder = false;

Get the allowColumnReorder property.

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

 let allowColumnReorder = kanban.allowColumnReorder;

Example

Set the allowColumnEdit property.

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

Set the allowColumnEdit property by using the HTML Element's instance.

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

 kanban.allowColumnEdit = false;

Get the allowColumnEdit property.

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

 let allowColumnEdit = kanban.allowColumnEdit;

Example

Set the allowColumnRemove property.

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

Set the allowColumnRemove property by using the HTML Element's instance.

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

 kanban.allowColumnRemove = false;

Get the allowColumnRemove property.

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

 let allowColumnRemove = kanban.allowColumnRemove;

Example

Set the allowColumnHide property.

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

Set the allowColumnHide property by using the HTML Element's instance.

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

 kanban.allowColumnHide = false;

Get the allowColumnHide property.

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

 let allowColumnHide = kanban.allowColumnHide;

Example

Set the addNewButton property.

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

Set the addNewButton property by using the HTML Element's instance.

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

 kanban.addNewButton = false;

Get the addNewButton property.

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

 let addNewButton = kanban.addNewButton;

Example

Set the addNewButtonDisplayMode property.

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

Set the addNewButtonDisplayMode property by using the HTML Element's instance.

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

 kanban.addNewButtonDisplayMode = 'top';

Get the addNewButtonDisplayMode property.

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

 let addNewButtonDisplayMode = kanban.addNewButtonDisplayMode;

Example

Set the addNewColumn property.

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

Set the addNewColumn property by using the HTML Element's instance.

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

 kanban.addNewColumn = false;

Get the addNewColumn property.

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

 let addNewColumn = kanban.addNewColumn;

Example

Set the addNewColumnWidth property.

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

Set the addNewColumnWidth property by using the HTML Element's instance.

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

 kanban.addNewColumnWidth = 300;

Get the addNewColumnWidth property.

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

 let addNewColumnWidth = kanban.addNewColumnWidth;

Example

Set the allowDrag property.

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

Set the allowDrag property by using the HTML Element's instance.

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

 kanban.allowDrag = false;

Get the allowDrag property.

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

 let allowDrag = kanban.allowDrag;

Example

Set the allowDrop property.

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

Set the allowDrop property by using the HTML Element's instance.

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

 kanban.allowDrop = false;

Get the allowDrop property.

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

 let allowDrop = kanban.allowDrop;

Example

Set the allowDropPlaceholder property.

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

Set the allowDropPlaceholder property by using the HTML Element's instance.

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

 kanban.allowDropPlaceholder = false;

Get the allowDropPlaceholder property.

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

 let allowDropPlaceholder = kanban.allowDropPlaceholder;

Example

Set the applyColumnColorToTasks property.

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

Set the applyColumnColorToTasks property by using the HTML Element's instance.

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

 kanban.applyColumnColorToTasks = false;

Get the applyColumnColorToTasks property.

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

 let applyColumnColorToTasks = kanban.applyColumnColorToTasks;

Example

Set the autoLoadState property.

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

Set the autoLoadState property by using the HTML Element's instance.

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

 kanban.autoLoadState = false;

Get the autoLoadState property.

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

 let autoLoadState = kanban.autoLoadState;

Example

Set the autoSaveState property.

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

Set the autoSaveState property by using the HTML Element's instance.

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

 kanban.autoSaveState = false;

Get the autoSaveState property.

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

 let autoSaveState = kanban.autoSaveState;

Example

Set the autoColumnHeight property.

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

Set the autoColumnHeight property by using the HTML Element's instance.

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

 kanban.autoColumnHeight = false;

Get the autoColumnHeight property.

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

 let autoColumnHeight = kanban.autoColumnHeight;

Example

Set the collapsible property.

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

Set the collapsible property by using the HTML Element's instance.

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

 kanban.collapsible = false;

Get the collapsible property.

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

 let collapsible = kanban.collapsible;

Example

Set the columnColors property.

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

Set the columnColors property by using the HTML Element's instance.

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

 kanban.columnColors = false;

Get the columnColors property.

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

 let columnColors = kanban.columnColors;

Example

Set the columnWidth property.

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

Set the columnWidth property by using the HTML Element's instance.

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

 kanban.columnWidth = 300;

Get the columnWidth property.

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

 let columnWidth = kanban.columnWidth;

Example

Set the columnColorEntireSurface property.

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

Set the columnColorEntireSurface property by using the HTML Element's instance.

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

 kanban.columnColorEntireSurface = false;

Get the columnColorEntireSurface property.

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

 let columnColorEntireSurface = kanban.columnColorEntireSurface;

Example

Set the columnFooter property.

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

Set the columnFooter property by using the HTML Element's instance.

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

 kanban.columnFooter = false;

Get the columnFooter property.

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

 let columnFooter = kanban.columnFooter;

Example

Set the columnActions property.

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

Set the columnActions property by using the HTML Element's instance.

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

 kanban.columnActions = false;

Get the columnActions property.

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

 let columnActions = kanban.columnActions;

Example

Set the columnSummary property.

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

Set the columnSummary property by using the HTML Element's instance.

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

 kanban.columnSummary = false;

Get the columnSummary property.

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

 let columnSummary = kanban.columnSummary;

Example

Set the columnHeaderTemplate property.

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

Set the columnHeaderTemplate property by using the HTML Element's instance.

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

 kanban.columnHeaderTemplate = #headerCustomTemplate;

Get the columnHeaderTemplate property.

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

 let columnHeaderTemplate = kanban.columnHeaderTemplate;

Example

Set the columnEditMode property.

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

Set the columnEditMode property by using the HTML Element's instance.

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

 kanban.columnEditMode = 'false';

Get the columnEditMode property.

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

 let columnEditMode = kanban.columnEditMode;

Example

Set the currentUser property.

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

Set the currentUser property by using the HTML Element's instance.

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

 kanban.currentUser = 2;

Get the currentUser property.

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

 let currentUser = kanban.currentUser;

Example

Set the disableDialog property.

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

Set the disableDialog property by using the HTML Element's instance.

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

 kanban.disableDialog = false;

Get the disableDialog property.

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

 let disableDialog = kanban.disableDialog;

Example

Set the dataSourceMap property.

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

Set the dataSourceMap property by using the HTML Element's instance.

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

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

Get the dataSourceMap property.

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

 let dataSourceMap = kanban.dataSourceMap;

Example

Set the dragOffset property.

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

Set the dragOffset property by using the HTML Element's instance.

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

 kanban.dragOffset = auto;

Get the dragOffset property.

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

 let dragOffset = kanban.dragOffset;

Example

Set the editable property.

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

Set the editable property by using the HTML Element's instance.

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

 kanban.editable = false;

Get the editable property.

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

 let editable = kanban.editable;

Example

Set the editMode property.

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

Set the editMode property by using the HTML Element's instance.

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

 kanban.editMode = 'singleClick';

Get the editMode property.

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

 let editMode = kanban.editMode;

Example

Set the formatStringDate property.

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

Set the formatStringDate property by using the HTML Element's instance.

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

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

Get the formatStringDate property.

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

 let formatStringDate = kanban.formatStringDate;

Example

Set the formatStringTime property.

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

Set the formatStringTime property by using the HTML Element's instance.

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

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

Get the formatStringTime property.

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

 let formatStringTime = kanban.formatStringTime;

Example

Set the headerPosition property.

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

Set the headerPosition property by using the HTML Element's instance.

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

 kanban.headerPosition = 'bottom';

Get the headerPosition property.

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

 let headerPosition = kanban.headerPosition;

Example

Set the hierarchy property.

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

Set the hierarchy property by using the HTML Element's instance.

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

 kanban.hierarchy = 'columns';

Get the hierarchy property.

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

 let hierarchy = kanban.hierarchy;

Example

Set the locale property.

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

Set the locale property by using the HTML Element's instance.

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

 kanban.locale = 'fr';

Get the locale property.

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

 let locale = kanban.locale;

Example

Set the messages property.

 <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>

Set the messages property by using the HTML Element's instance.

 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' } };

Get the messages property.

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

 let messages = kanban.messages;

Example

Set the selectionMode property.

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

Set the selectionMode property by using the HTML Element's instance.

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

 kanban.selectionMode = 'zeroOrOne';

Get the selectionMode property.

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

 let selectionMode = kanban.selectionMode;

Example

Set the storeHistory property.

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

Set the storeHistory property by using the HTML Element's instance.

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

 kanban.storeHistory = true;

Get the storeHistory property.

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

 let storeHistory = kanban.storeHistory;

Example

Set the storeHistoryItems property.

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

Set the storeHistoryItems property by using the HTML Element's instance.

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

 kanban.storeHistoryItems = 30;

Get the storeHistoryItems property.

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

 let storeHistoryItems = kanban.storeHistoryItems;

Example

Set the rightToLeft property.

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

Set the rightToLeft property by using the HTML Element's instance.

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

 kanban.rightToLeft = true;

Get the rightToLeft property.

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

 let rightToLeft = kanban.rightToLeft;

Example

Set the readonly property.

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

Set the readonly property by using the HTML Element's instance.

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

 kanban.readonly = true;

Get the readonly property.

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

 let readonly = kanban.readonly;

Example

Set the swimlanesFrom property.

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

Set the swimlanesFrom property by using the HTML Element's instance.

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

 kanban.swimlanesFrom = 3;

Get the swimlanesFrom property.

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

 let swimlanesFrom = kanban.swimlanesFrom;

Example

Set the swimlanesTo property.

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

Set the swimlanesTo property by using the HTML Element's instance.

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

 kanban.swimlanesTo = 3;

Get the swimlanesTo property.

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

 let swimlanesTo = kanban.swimlanesTo;

Example

Set the tags property.

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

Set the tags property by using the HTML Element's instance.

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

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

Get the tags property.

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

 let tags = kanban.tags;

Example

Set the taskActions property.

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

Set the taskActions property by using the HTML Element's instance.

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

 kanban.taskActions = false;

Get the taskActions property.

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

 let taskActions = kanban.taskActions;

Example

Set the taskComments property.

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

Set the taskComments property by using the HTML Element's instance.

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

 kanban.taskComments = false;

Get the taskComments property.

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

 let taskComments = kanban.taskComments;

Example

Set the taskDue property.

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

Set the taskDue property by using the HTML Element's instance.

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

 kanban.taskDue = false;

Get the taskDue property.

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

 let taskDue = kanban.taskDue;

Example

Set the taskPosition property.

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

Set the taskPosition property by using the HTML Element's instance.

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

 kanban.taskPosition = 'all';

Get the taskPosition property.

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

 let taskPosition = kanban.taskPosition;

Example

Set the taskPriority property.

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

Set the taskPriority property by using the HTML Element's instance.

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

 kanban.taskPriority = false;

Get the taskPriority property.

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

 let taskPriority = kanban.taskPriority;

Example

Set the taskProgress property.

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

Set the taskProgress property by using the HTML Element's instance.

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

 kanban.taskProgress = false;

Get the taskProgress property.

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

 let taskProgress = kanban.taskProgress;

Example

Set the taskColorEntireSurface property.

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

Set the taskColorEntireSurface property by using the HTML Element's instance.

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

 kanban.taskColorEntireSurface = false;

Get the taskColorEntireSurface property.

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

 let taskColorEntireSurface = kanban.taskColorEntireSurface;

Example

Set the taskSubTasksInput property.

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

Set the taskSubTasksInput property by using the HTML Element's instance.

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

 kanban.taskSubTasksInput = false;

Get the taskSubTasksInput property.

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

 let taskSubTasksInput = kanban.taskSubTasksInput;

Example

Set the taskSubTasks property.

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

Set the taskSubTasks property by using the HTML Element's instance.

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

 kanban.taskSubTasks = 'onlyUnfinished';

Get the taskSubTasks property.

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

 let taskSubTasks = kanban.taskSubTasks;

Example

Set the taskTags property.

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

Set the taskTags property by using the HTML Element's instance.

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

 kanban.taskTags = false;

Get the taskTags property.

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

 let taskTags = kanban.taskTags;

Example

Set the taskUserIcon property.

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

Set the taskUserIcon property by using the HTML Element's instance.

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

 kanban.taskUserIcon = false;

Get the taskUserIcon property.

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

 let taskUserIcon = kanban.taskUserIcon;

Example

Set the textTemplate property.

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

Set the textTemplate property by using the HTML Element's instance.

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

 kanban.textTemplate = false;

Get the textTemplate property.

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

 let textTemplate = kanban.textTemplate;

Example

Set the theme property.

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

Set the theme property by using the HTML Element's instance.

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

 kanban.theme = 'red';

Get the theme property.

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

 let theme = kanban.theme;

Example

Set the priorityList property.

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

Set the priorityList property by using the HTML Element's instance.

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

 kanban.priorityList = false;

Get the priorityList property.

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

 let priorityList = kanban.priorityList;

Example

Set the userList property.

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

Set the userList property by using the HTML Element's instance.

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

 kanban.userList = false;

Get the userList property.

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

 let userList = kanban.userList;

Example

Set up the event handler of change event.

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.
})

Example

Set up the event handler of close event.

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

Example

Set up the event handler of closing event.

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

Example

Set up the event handler of columnAdd event.

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.
})

Example

Set up the event handler of columnRemove event.

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.
})

Example

Set up the event handler of columnReorder event.

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.
})

Example

Set up the event handler of columnUpdate event.

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.
})

Example

Set up the event handler of columnClick event.

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.
})

Example

Set up the event handler of columnDoubleClick event.

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.
})

Example

Set up the event handler of columnShow event.

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.
})

Example

Set up the event handler of columnHide event.

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.
})

Example

Set up the event handler of columnCollapse event.

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.
})

Example

Set up the event handler of columnExpand event.

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.
})

Example

Set up the event handler of commentAdd event.

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.
})

Example

Set up the event handler of commentRemove event.

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.
})

Example

Set up the event handler of commentUpdate event.

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.
})

Example

Set up the event handler of dragEnd event.

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.
})

Example

Set up the event handler of dragging event.

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.
})

Example

Set up the event handler of dragStart event.

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.
})

Example

Set up the event handler of filter event.

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

Example

Set up the event handler of open event.

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

Example

Set up the event handler of opening event.

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.
})

Example

Set up the event handler of sort event.

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

Example

Set up the event handler of taskBeforeAdd event.

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.
})

Example

Set up the event handler of taskAdd event.

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.
})

Example

Set up the event handler of taskRemove event.

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.
})

Example

Set up the event handler of taskUpdate event.

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.
})

Example

Set up the event handler of taskClick event.

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.
})

Example

Set up the event handler of taskDoubleClick event.

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.
})

Invoke the addFilter method.

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

Invoke the addSort method.

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

Invoke the addTask method.

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

Invoke the addColumn method.

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

Invoke the beginEdit method.

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

Invoke the cancelEdit method.

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

Invoke the closePanel method.

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

Invoke the collapse method.

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

Invoke the clearSelection method.

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

Invoke the hide method.

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

Invoke the copyTask method.

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

Invoke the endEdit method.

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

Invoke the ensureVisible method.

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

Invoke the expand method.

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

Invoke the expandAll method.

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

Invoke the exportData method.

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

Invoke the getColumn method.

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

Invoke the getTask method.

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

Invoke the getSelectedTasks method.

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

Invoke the getState method.

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

Invoke the loadState method.

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

Invoke the moveTask method.

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

Invoke the openCustomizePanel method.

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

Invoke the openFilterPanel method.

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

Invoke the openSortPanel method.

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

Invoke the removeFilter method.

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

Invoke the removeSort method.

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

Invoke the removeTask method.

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

Invoke the removeColumn method.

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

Invoke the saveState method.

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

Invoke the show method.

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

Invoke the showAllColumns method.

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

Invoke the selectTask method.

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

Invoke the unselectTask method.

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

Invoke the updateTask method.

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

Invoke the updateColumn method.

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