Reordering of menu items after adding a new one

[mbrode]

I want to create a new menu entry.

• to go Menues
• select the menu ("Megamenu")
• Fields
• Add item (e.g. "Page")
  the menu entry is shown on the buttom of the menu

The menu entry cannot be moved at the moment
Before it's possible to move the entry you have to:

• save the menu
• reload the page

Now the menu entry can be moved.

It should be possible to move the menu entry directly after inserting
(without saving and especially without reloading the page).

[amdad]

After edit, also issue exist.

[seanthepottingshed]

Yep, I've just come across this issue too.

[seanthepottingshed]

Update itemlist.htm as follows:

<?= $this->makePartial('toolbar') ?>
<p class="help-block before-field"><br>Drag and drop the menu items using the icons on the left. Click a menu item to edit it.</p>
<div class="form-preview">
    <div
        id="itemTreeList"
        class="control-treelist"
        data-control="treelist"
        data-handle="a.move"
        data-stripe-load-indicator>
        <ol id="reorderRecords">
            <?php
            if ($value->count()) {
                echo $this->makePartial('itemrecords', [
                    'records' => $value
                ]);
            } else {
            ?>
            <li>Go on spoilt yourself, add some menu items.</li>
            <?php
            }
            ?>
        </ol>
    </div>
</div>
<script>
    /**
     * Initialise Tree List Widget Move Handler.
     *
     * @return {void} 
     */
    function initialiseTreeListWidgetMoveHandler() {
        $('#itemTreeList').on('move.oc.treelist', function(ev, data) {
            var $el,
                $item    = data.item,
                moveData = {
                    sourceNode : $item.data('recordId'),
                    position   : 'root',
                    targetNode : 0
                };
            if (($el = $item.next()) && $el.length) {
                moveData.position = 'before'
            } else if (($el = $item.prev()) && $el.length) {
                moveData.position = 'after'
            } else if (($el = $item.parents('li:first')) && $el.length) {
                moveData.position = 'child'
            }
            if ($el.length) {
                moveData.targetNode = $el.data('recordId');
            }
            $('#itemTreeList').request('<?=$this->getEventHandler('onMove')?>', {
                data : moveData
            });
        });
    }
    /**
     * Refresh Tree List Widget.
     *
     * @return {void} 
     */
    function refreshTreeListWidget() {
        $('[data-control="treelist"]').treeListWidget();
        initialiseTreeListWidgetMoveHandler();
    }
    initialiseTreeListWidgetMoveHandler();
</script>

Then add the data-request-complete="refreshTreeListWidget();" to both createitem and updateitem to accompany data-request-success="$el.closest('.modal').modal('hide');"

[BertoMunozCabrer]

Create new partial file _treelist.htm in formwidgets/itemlist/partials, then move the list inside.

_treelist.htm

<div class="form-preview">

    <div
    id="itemTreeList"
    class="control-treelist"
    data-control="treelist"
    data-handle="a.move"
    data-stripe-load-indicator>

    <ol id="reorderRecords">
        <?php

            if ($value->count()) {

                echo $this->makePartial('item_records', [
                'records' => $value
                ]);

            } else {

            ?> <li>Go on spoilt yourself, add some menu items.</li> <?php } ?>
        </ol>

    </div>

</div>

Update itemlist.htm as follows:

<?= $this->makePartial('toolbar') ?>

	<p><br/>Drag and nest the menu items using the icons on the left. Click a menu item to edit it.</p>

	<div id="tree_list">
		<?= $this->makePartial('treelist') ?>
	</div>

<script>

	/*
	 * Post back source and target nodes IDs and the move positioning.
	 */
	$('#itemTreeList').on('move.oc.treelist', function(ev, data){
		var
			$el,
			$item = data.item,
			moveData = { sourceNode: $item.data('recordId'), position: 'root', targetNode: 0 }

		if (($el = $item.next()) && $el.length) moveData.position = 'before'
		else if (($el = $item.prev()) && $el.length) moveData.position = 'after'
		else if (($el = $item.parents('li:first')) && $el.length) moveData.position = 'child'

		if ($el.length) moveData.targetNode = $el.data('recordId')

		$('#itemTreeList').request('<?= $this->getEventHandler('onMove') ?>', {
			data: moveData
		})
	})

</script>

Then in Rw\Menu\FormWidgets\ItemList change all returns whit the new partial tree_list

old return:

return [ '#reorderRecords' => $this->makePartial('item_records', ['records' => $this->vars['value']]), ];

new return:

return [ '#tree_list' => $this->makePartial('treelist', ['records' => $this->vars['value']]), ];