Build your web apps using Smart UI
Smart.Kanban - configuration and usage
Kanban Editing and Customization
Smart.Kanban has multiple ways of customizing the kanban board and editing the data it displays.
Editing
To be able to edit a task, the Kanban's property editable has to be enabled. Moreover, if a current user is set, the user would have to have editing privileges (allowEdit not set to false).
Editing a task can be initiated the following ways:
- Double-clicking a task.
- Highlighting a task with the keyboard and pressing F2.
- Opening the Actions list and selecting "Edit"
These will open the edit dialog with editors for all task data fields, regardless of whether they are currently visualized in the task.

Once the necessary changes are made and the "OK" button is clicked, they are applied to the task.

Customization, Filtering, Sorting, and Searching Through the Header
When the Kanban header is enabled (headerPosition is set to 'top' or 'bottom'), four buttons for task customization become available:
-
"Customize tasks" - each of the options sets a property related to task appearance:
- Actions icon - taskActions
- Comments icon - taskComments
- Due date - taskDue
- Priority icon - taskPriority
- Progress - taskProgress
- Tags - taskTags
- User icon - taskUserIcon
-
"Filter" - allows filtering the Kanban data by multiple data fields and criteria.
-
"Sort" - allows sorting the kanban data by multiple data fields.
-
Search icon - allows searching and highlighting items that contain specified keywords in their text or tags.
Task Templates
To display custom content in the task text part, a template can be applied by setting the textTemplate property, which can be set to a function or the id of a template element on the page (or a combination of both to achieve conditional effects).
In the following example, tasks with high priority have additional labels in red in their text section.
<script type="text/javascript"> Smart('#kanban', class { get properties() { return { collapsible: true, dataSource: getKanbanData(), editable: true, columns: [ { label: 'To do', dataField: 'toDo' }, { label: 'In progress', dataField: 'inProgress' }, { label: 'Testing', dataField: 'testing' }, { label: 'Done', dataField: 'done' } ], textTemplate: function (settings) { const data = settings.data, task = settings.task, text = settings.text; if (data.priority === 'high') { settings.template = '#kanbanTemplateHighPriority'; // references a template element in the DOM } } }; } }); </script> </head> <body> <smart-kanban id="kanban"></smart-kanban> <template id="kanbanTemplateHighPriority"> <span class="attention">Task with HIGH priority. Please begin work as soon as possible.</span> <br /> <br /> {{text}} </template> </body> </html>
In the textTemplate callback function, the template of tasks with high priority is made to be the HTML template element with id kanbanTemplateHighPriority on the page. When applying this template, {{text}}
is replaced with the task's text from the data source. The same applies to {{id}}
.
