MultiSelect Combobox?

scotryder

Hi there,

Is there Multi-select dropdown in QML or any third party library? If not can you please advise how can i create a custom control such is that? what approach should i follow?
https://www.google.com/search?q=multiselect+dropdown&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjvvrT63v_YAhUQ66QKHSnrDmIQ_AUICigB&biw=1440&bih=695&dpr=2

Thanks

jpnurmi

This is something ComboBox probably should support out of the box, but with a little bit of trickery, it's already doable today. Here's an example how it can be implemented with help of a custom delegate and key handlers:

import QtQuick 2.9
import QtQuick.Controls 2.2

ApplicationWindow {
    id: window
    width: 300
    height: 300
    visible: true

    ComboBox {
        id: comboBox
        anchors.centerIn: parent

        displayText: "Select"

        model: ListModel {
            ListElement { name: "One"; selected: false }
            ListElement { name: "Two"; selected: false }
            ListElement { name: "Three"; selected: false }
        }

        // ComboBox closes the popup when its items (anything AbstractButton derivative) are
        //  activated. Wrapping the delegate into a plain Item prevents that.
        delegate: Item {
            width: parent.width
            height: checkDelegate.height

            function toggle() { checkDelegate.toggle() }

            CheckDelegate {
                id: checkDelegate
                anchors.fill: parent
                text: model.name
                highlighted: comboBox.highlightedIndex == index
                checked: model.selected
                onCheckedChanged: model.selected = checked
            }
        }

        // override space key handling to toggle items when the popup is visible
        Keys.onSpacePressed: {
            if (comboBox.popup.visible) {
                var currentItem = comboBox.popup.contentItem.currentItem
                if (currentItem) {
                    currentItem.toggle()
                    event.accepted = true
                }
            }
        }

        Keys.onReleased: {
            if (comboBox.popup.visible)
                event.accepted = (event.key === Qt.Key_Space)
        }
    }
}

JonB

With the proviso that I know nothing about QML/Qt Quick....

A combobox/dropdown is supposed inherently to be single-select, e.g. QComboBox. For multi-selects you are supposed to use one of QListView or QListWidget widgets ...

For QML/QtQuick 2.7, do I not see: http://doc.qt.io/qt-5/qml-qtquick-listview.html ?

Oh --- I did say I knew nothing about QML! --- am I beginning to see that its ListViews are not multiselectable...? Does https://www.snip2code.com/Snippet/296202/QML-component-showing-simple-multi-selec help? Or @jpnurmi's suggestion, of course!

scotryder

Thank you guys
@jpnurmi ill try it and let you know.