How to enable "move" on Joomla subform (repeatable) fields Topic is solved

[david0058]

I'm probably missing something obvious here, but I have a set of items in a subform and need to re-order them using drag and drop. I'm familiar with this in normal views when building my own tables using

Code: Select all

JHtml::_('sortablelist.sortable', ....

Code: Select all

JHtml::_('searchtools.sort', '', ...

but I don't know how to get this working with a subform when everything is done by renderField(). (First timer here ).

The move tabs appear correctly (see below), but they're not draggable - it's like there's some missing JHtml() statement?

Thanks for any help

David

Screenshot 2023-02-13 at 14.33.15.png

[david0058]

I've got a bit closer: I found that the Fields component uses sortable subform, so at least I know that this is somehow possible to do

I dissected the page source, and I can see that the subform wrapper has an attribute "ui-sortable":

Code: Select all

<div class="subform-repeatable ui-sortable" data-bt-add="a.group-add-sr-0" data-bt-remove="a.group-remove-sr-0" data-bt-move="a.group-move-sr-0" data-repeatable-element="div.subform-repeatable-group-sr-0" data-minimum="0" data-maximum="1000">

which is missing in my subform:

Code: Select all

<div class="subform-repeatable" data-bt-add="a.group-add-sr-1" data-bt-remove="a.group-remove-sr-1" data-bt-move="a.group-move-sr-1" data-repeatable-element="div.subform-repeatable-group-sr-1" data-minimum="0" data-maximum="1000">

So there's some 'magic' that adds this to the code.

Also, I don't think this subform uses jQuery Sortable: I'd usually expect to see entries in the web server log as the list item dragging and dropping fires the sort order saving Ajax calls, but this seems to be just a UI feature in the subform case.

I'll keep investigating - if anyone has managed to work out how to use this you could save me lots of grey hairs

David

[david0058]

[SOLVED]

The subform works as documented, but I discovered a few things that might help others in future:

1. It doesn't appear to use/need the jQuery Sortable (JHtml::_('sortablelist.sortable', ....) API, it's just (very impressive) draggable UI javascript, and re-sorting rows in the subform doesn't trigger any Ajax callback like Sortable does;
2. This means that the rows are not sorted auto-magically, you just get them back in the submitted data in the order that the user arranged them on the screen. That's fine: just include a hidden ordering column in the rows and write the logic in your model::save() function to update your database records, or (as I did) delete all the subrows for the header record from your database, then add new ones in the order they were received;
3. The reason drag-and-drop wasn't working on my form was due to a conflict with something in a different library I was using for a different part of the form that displays a JointJS diagram with draggable elements. I didn't investigate because it was easier to separate out the functionality in my component, but no surprise that two draggable libraries are going to fight over the same events