Combobox properties

Sagebrushwilly

I am building my first application and I want to have a combobox with certain options in it; when 1 of these options are selected, I want another combobox to be populated with certain options. Moreover if the user selects the second option in the first combobox, then the second gets populated with different options. Is this possible? I have been fooling around with it for a while and can't seem to find out how to do it.

BrunoGeorgevich

Is possible, but first you need to tell us if you are using QML or QWidgets. For both is the same process, first you need to create 2 lists of options, for both comboboxes, and implement the populate functions for them.

Sagebrushwilly

@BrunoGeorgevich I am using QWidget and my comboboxes are nested withing that.

BrunoGeorgevich

@Sagebrushwilly so, you will need to create 2 slots and connect them to the signals emmited from the combobox when a option is clicked. In the slots you will do the data treatment, using if/else or switch, and remove and insert the list of options to the combobox.The signal who observer which item was clicked in a combobox is this: http://doc.qt.io/qt-4.8/qcombobox.html#activated
This signal emmit an int who is the index of the item clicked.

Sagebrushwilly

I am editing these through my .ui file , and keep in mind I am exceptionally new to this, so I know next to nothing. I have been editing all attributes through the design tab and that seems to be the easiest for me so far.

BrunoGeorgevich

@Sagebrushwilly i propose to you, before you continue your project, to read more about signals and slots, a good link to learn more about it is: http://doc.qt.io/qt-4.8/signalsandslots.html .I don't know other way to do this without using signals and slots.

Sagebrushwilly

I'll take a look. Thank you

BrunoGeorgevich

@Sagebrushwilly you welcome. I'm glad to help.

Levis

@Sagebrushwilly said in Combobox properties:

I am building my first application and I want to have a combobox with certain options in it; when 1 of these options are selected, I want another combobox to be populated with certain options. Moreover if the user selects the second option in the first combobox, then the second gets populated with different options. Is this possible?

I am facing the same challenge but my goal is to implement it in qml, any ideas ?

jsulm

@Levis You can use this signal: http://doc.qt.io/qt-5/qml-qtquick-controls-combobox.html#activated-signal
When it is triggered fill the next one with data.

Levis

@jsulm thanks for the hint, I am trying it out...

Levis

I read about the signal but I am not able to pass the signal from one combobox to the other. Below is my code.

//main qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import QtQuick.Controls.Material 2.2

ApplicationWindow {
    id: rootWindow
    visible: true
    width: 1000
    height: 800
    title: qsTr("Hello World!")

    ComboBox{
        id: country
        model: ["USA", "India"]
        onActivated: {
            console.debug("CombBox.onActivated", index)
            console.assert(currentIndex == index, "Assertion failed: property currentIndex not equal to actual parameter index")
        }
    }
    ComboBox{
        id: state
        model: ["California", "Assam"]
        onActivated: {
            console.debug("CombBox.onActivated", index)
            console.assert(currentIndex == index, "Assertion failed: property currentIndex not equal to actual parameter index")
        }
    }
    ComboBox{
        id: city
        model: ["Los Angeles", "Dispur"]
        onActivated: {
            console.debug("CombBox.onActivated", index)
            console.assert(currentIndex == index, "Assertion failed: property currentIndex not equal to actual parameter index")
        }
    }
    ComboBox{
        id: zip
        model: ["90001", "781005"]
        onActivated: {
            console.debug("CombBox.onActivated", index)
            console.assert(currentIndex == index, "Assertion failed: property currentIndex not equal to actual parameter index")
        }
    }
}

jsulm

@Levis said in Combobox properties:

but I am not able to pass the signal from one combobox to the other

You don't pass the signal to anywhere. In the slot (in onActivated) you change the entries in the next combo box using its id (I'm not a QML expert, so I will not provide an example).

Levis

@jsulm thanks a lot for such a nice read and this code did the charm

//main qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import QtQuick.Window 2.3
import QtQuick.Controls.Material 2.2

Window {
    visible: true
    width: 640
    height: 480

    property var countryStateInfo: {
        "USA": {
            "California": {
                "Los Angeles": ["90001", "90002", "90003", "90004"],
                "San Diego": ["92093", "92101"]
            },
            "Texas": {
                "Dallas": ["75201", "75202"],
                "Austin": ["73301", "73344"]
            }
        },
        "India": {
            "Assam": {
                "Dispur": ["781005"],
                "Guwahati" : ["781030", "781030"]
            },
            "Gujarat": {
                "Vadodara" : ["390011", "390020"],
                "Surat" : ["395006", "395002"]
            }
        }
    }

    ColumnLayout {
        anchors.centerIn: parent
        ComboBox {
            id: box1
            currentIndex: -1
            model: getData(countryStateInfo)
        }
        ComboBox {
            id: box2
            model: box1.currentIndex < 0 ? [] : getData(countryStateInfo[box1.displayText])
            onModelChanged: currentIndex = -1
        }
        ComboBox {
            id: box3
            model: box2.currentIndex < 0 ? [] : getData(countryStateInfo[box1.displayText][box2.displayText])
            onModelChanged: currentIndex = -1
        }
        ComboBox {
            id: box4
            model: box3.currentIndex < 0 ? [] : countryStateInfo[box1.displayText][box2.displayText][box3.displayText]
            onModelChanged: currentIndex = -1
        }
    }

    function getData(arr)
    {
        var retval = [];
        for(var element in arr)
        {
            retval.push(element)
        }
        return retval;
    }
}