Multiselect with selected nodes always open (vue)

[elbywan]

Multiselect with selected nodes always open (vue)

[elbywan]

Hi @jago86,

I need to open multiple folder nodes (multiselection ), but with only one file item selected at the same time.

Do you mean being able to select multiple folders, plus with a maximum of one file selected inside each folder?

If so, I think that you try to use the neighbours arguments in the selection strategy to achieve what you want:

strategies: {
    selection: [
        'multiple',
        (item, selection, neighbours) => {
            // If deselected
            if(!selection.includes(item)) {
                return selection
            }
            if (!item.children && neighbours) {
                return [
                    // Exclude file siblings
                    ...selection.filter(
                        node => node.children || !(neighbours.includes(node))
                    ),
                    item
                ]
            }
            return [
                ...selection,
                item
            ]

        }
    ],
    click: ['select'],
    fold: ['no-child-selection'],
}

I made a little fiddle to demonstrate. Hope that will help!

[jago86]

Thanks @elbywan !! Is more or less what I want. I added some changes to adjust to my needs:

strategies() {
    return {
        selection: [
            'multiple',
            (item, selection, neighbours, ancestors) => {
                // If deselected
                if(!selection.includes(item)) {
                    return [
                        ...selection,
                        ...ancestors,
                    ];
                }

                return [
                    // Exclude file siblings
                    ...selection.filter(
                        node => node.children || !(neighbours.includes(node))
                    ),
                    // Include item itself
                    item,
                    // Include the ancestors
                    ...ancestors
                ];

          },

          (item, selection, neighbours, ancestors) => {
            // If deselected
            if(!selection.includes(item)) {
                // If deselected item is a file, don't allow deselection
                if(!item.children) {
                    return [
                        ...selection,
                        item,
                    ];
                }

                // If deselected item is a folder, exclude their children
                if (item.children) {

                    return [
                        ...selection.filter((node) => {
                            return !item.children.includes( node );
                        }),
                    ];
                }
            }

            return selection;
          },

        ],
        click: ['select'],
        fold: [
            // 'not-selected',
            'no-child-selection',
        ]
    };
}

Thanks a lot