Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How to separate data from ListModel and pass to combobox delegate in QML tableview.
Forum Updated to NodeBB v4.3 + New Features

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

Scheduled Pinned Locked Moved QML and Qt Quick
6 Posts 2 Posters 4.1k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • G Offline
    G Offline
    gnris
    wrote on 23 May 2014, 16:21 last edited by
    #1

    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
    L2
    L3
    L4
    Button B1
    B2

    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.

    Thanks!

    1 Reply Last reply
    0
    • G Offline
      G Offline
      gnris
      wrote on 29 May 2014, 04:08 last edited by
      #2

      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?

      1 Reply Last reply
      0
      • S Offline
        S Offline
        shav
        wrote on 29 May 2014, 09:44 last edited by
        #3

        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: {
                appRoot.secondComboboxChanged.connect(updateText);
            }
        
            function updateText(text)
            {
                label.text = "Status: " + text;
            }
        }
        
        TableView {
            anchors.top: 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)
                        {
                            firstComboboxChanged(item.led);
                        }
                        else if(ledCompobox.currentIndex === 1)
                        {
                            firstComboboxChanged(item.btn);
                        }
                    }
                }
            }
        
            TableViewColumn {
                id: secondCombobox
                delegate: ComboBox {
                    id: buttonsCompobox
                    height: 30
        
                    onCurrentIndexChanged: {
                        secondComboboxChanged(buttonsCompobox.currentText);
                    }
        
                    Component.onCompleted: {
                        appRoot.firstComboboxChanged.connect(buttonsCompobox.updateModel);
                    }
        
                    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.

        Mac OS and iOS Developer

        1 Reply Last reply
        0
        • G Offline
          G Offline
          gnris
          wrote on 29 May 2014, 12:35 last edited by
          #4

          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.

          1 Reply Last reply
          0
          • S Offline
            S Offline
            shav
            wrote on 29 May 2014, 14:27 last edited by
            #5

            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.

            Mac OS and iOS Developer

            1 Reply Last reply
            0
            • G Offline
              G Offline
              gnris
              wrote on 29 May 2014, 15:55 last edited by
              #6

              Hi,shav

              Thanks for your reply!
              Here is a sample XML file "XML":http://i.imgur.com/HBdVeZI.png
              And here is the screenshot I want."view":http://i.imgur.com/QpXjDpJ.png

              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].

              1 Reply Last reply
              0

              1/6

              23 May 2014, 16:21

              • Login

              • Login or register to search.
              1 out of 6
              • First post
                1/6
                Last post
              0
              • Categories
              • Recent
              • Tags
              • Popular
              • Users
              • Groups
              • Search
              • Get Qt Extensions
              • Unsolved