Important: Please read the Qt Code of Conduct -

How to separate data from ListModel and pass to combobox delegate in QML tableview.

  • Hi,there.
    I have some questions and I hope someone can give me some suggestions or hints.Thanks!
    I want to parse the data from an XML file and the data may look like:

    component id : status
    LED L1
    Button B1

    I want the tableview has two columns and each column uses combobox to display.
    In tableview , the data model is listmodel. In tableviewcolumn ,I use combobox delegate to display listmodel.
    From the example data above , it may show two comboboxes in each column.
    The two comboboxes in the 1st column may all contain 2 options : LED and Button.
    And I want the combobox in the 2nd column may contain the data according to the component id.
    It means only L1~L4 or B1~B2.Not full status data.
    And when user click the combobox to change component id , the status may dynamic change according to the new component id.

    I have tried to use the XmlListModel to parse the XML file and use the onStatusChanged : if (status == XmlListModel.Ready) to append the data to a listmodel.
    But I don't know how to separate the status data to each combobox. All I try may contain the whole status in the cmbobox.

    Can anyone give me some idea about separate the data and the data may dynamic change according to component id.


  • Can any one gives me some suggestions?
    Or in my requirement I have another way? I am not sure the combobox can achieave my goal? Maybe I need to custom a combobox-like component?

  • Hi,

    Try this code:
    import QtQuick 2.2
    import QtQuick.Controls 1.1

    ApplicationWindow {
    id: appRoot
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    menuBar: MenuBar {
        Menu {
            title: qsTr("File")
            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit();
    property var datasObject: [{types: ["LED", "Buttons"], datas: {led:["LED1", "LED2", "LED3"], btn:["B1", "B2"]}}]
    signal firstComboboxChanged(var model)
    signal secondComboboxChanged(var status)
    Label {
        id: label
        width: parent.width
        height: 30
        text: "Status: "
        Component.onCompleted: {
        function updateText(text)
            label.text = "Status: " + text;
    TableView { label.bottom
        width: parent.width
        height: parent.height - label.height
        model: datasObject
        rowDelegate: Item {
            height: 30
        TableViewColumn {
            id: firstCombobox
            role: "types"
            delegate: ComboBox {
                id: ledCompobox
                height: 30
                model: styleData.value
                currentIndex: 0
                onCurrentIndexChanged: {
                    var item = datasObject[styleData.row].datas;
                    if(ledCompobox.currentIndex === 0)
                    else if(ledCompobox.currentIndex === 1)
        TableViewColumn {
            id: secondCombobox
            delegate: ComboBox {
                id: buttonsCompobox
                height: 30
                onCurrentIndexChanged: {
                Component.onCompleted: {
                function updateModel(model)
                    buttonsCompobox.model = model;


    In 'datasObject' you need save the XML structure. But I recommend to use JSON. And you can also use C++ plugin to create more useful code to work with datas. This code may have small issues with login to select component but I think this code can help to you to solve you problem.

  • Hi,shav.
    Thanks for your reply! But my requirement is a little different. Maybe I didn't explain my problem clear enough.My fault!
    In the example above,I have 2 device {LED and Button}. So, I totally need "4" comboboxes in the whole tableview in the initial state.Each tableview column may have 2 comboboxes. The 1st column contain 2 comboboxes and they all contain the data {LED,Button}.But currentText is different. So,the combobox in 2nd column may contain the data according to the 1st combobox's currentText.

    The data in tableview is about some device's attributes or some settings.
    Through using tableview append function to insert a new attributes
    or remove function to delete some attributes.
    So, if I have 10 device then I may have 10 comboboxes in 1st column at initial state(parse XML and Load data).Each combobox also contain 10 option in itself. And in 2nd column will also have 10 combobox contain different number status.
    At the end I need to save the selected item to another XML.
    So,My problem is to let my two or more comboboxes in 2nd tableview column contain different option(status).But they always remain the same.

  • Hm...

    Could you post example of your XML and screenshot how you want to see the result or tell me how it's must work if you have only one device?

    In any case for update your comboboxes you can use signal. How it's works you can see in my code.

  • Hi,shav

    Thanks for your reply!
    Here is a sample XML file "XML":
    And here is the screenshot I want."view":

    Different components may have different Pins and Bindings in XML.
    So,I can have 2 LED with different pins.
    The list items in [Component] list box should be generated dynamically according to Modules.Component in XML.
    [Binding] column is list box with selection items in XML, and the binding items in list box differs base on the selection of [Component].

Log in to reply