MultiSelect Combobox?



  • 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



  • 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)
            }
        }
    }


  • 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!



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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.