Hi,
in a kanban I can use a custom popup editor to change cards data.
Is it possible to use an “inline” field editor directly on card without opening a popup?
Hello, @mauro
Editing Kanban card via popup window is the default behavior.
There is a way to enable the Kanban card to be edited via an “inline” field.
Since the Kanban card is a specifically modified list, to make it editable, it’s necessary to extend it with the EditAbility.
The next step is to attain such a card behavior, that when you are clicking on a card element intended to be edited, opens just that element, but not the whole card. In order to do that, desired card element should be customized via type. It’s enough just to add a tag to templateBody with CSS class so that you can reach an element later. After that, it’s possible to call edit only by clicking on the element with the class from templateBody (please, pay attention, the defaults contain editaction: "custom", which means that, editing is started only through the API)
Each Kanban list has two events attached - one at the beginning of the edit, the second in the end.
At the beginning of editing (a delay has been added to give time to set the selection and redraw the node - we need the actual one), the code is called to position and resize the editor.
On completion of editing, the correct data update in kanban is called: since inline editing is not provided in kanban, the data is updated only through the kanban API, while the lists only reflect all changes. In this code, an update from the list causes an update at the proper level.
Please, check the snippet here: Code Snippet
Editing is closed only by escape/enter /external click and therefore you need to be careful with the situation when the dnd of any card begins.
In the example above, added code that goes through all lists and closes (cancels) editing if it is open
kanban.attachEvent("onListBeforeDrag", (context, e, list) => {
kanban.queryView("kanbanlist_edit", "all").forEach((view) => {
if (view.getEditor()) view.editCancel()
})
})