QML Retrieve value of a spinbox used in a TableView cell

Question

I have a TableView. The 3rd column called "OrderedAmount" contains a spinbox.

TableView {
        id: lw_order
        x: 420
        y: 63
        width: 169
        height: 253
        model: orderModelId

        TableViewColumn
        {
            id: tableorderid
            role: "OrderedID"
            title: "ID"
            width: 10
        }
        TableViewColumn
        {
            role: "OrderedItems"
            title: "Items"
            width: 100
        }
        TableViewColumn
        {
            id: tableamountid
            role: "OrderedAmount"
            title: "Amount"
            width: 50
            delegate: Item {
                        SpinBox {
                            id: tableamountspin
                            anchors.verticalCenter: parent.verticalCenter
                            minimumValue: 1
                            width: 40
                        }
            }
        }




        ListModel {
            id: orderModelId
        }

    }

How can I retrieve the actual value of the SpinBox from each line of the table?

I tried this:

for (var index = 0 ; index < lw_order.rowCount; index++)
            {
                order = order + orderModelId.get(index).OrderedID + ";" + orderModelId.get(index).OrderedAmount + ";"
            }

Unfortunately, I get only the value of the first column called "OrderedID".

qml: 1;undefined;4;undefined;

Thank you very much for your help

Answer 1

I think the problem is you need to set the SpinBox value as styleData.value which is the value for the OrderedAmount element.

If you do so, then you can get the right value in your function using:

orderModelId.get(index).OrderedAmount

Remember you will need to update the model when the SpinBox changes. Something like this:

orderModelId.setProperty(styleData.row, "OrderedAmount", value.toString())

With these ideas in mind, the code could come out something like this:

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
    visible: true
    width: 300

    Button {
        text: "click me"

        function getValues(lw_order, orderModelId) {
            for (var index = 0 ; index < lw_order.rowCount; index++)
            {
                print("row: " + index)
                print("  OrderedID: " + orderModelId.get(index).OrderedID + "; " +
                      " OrderedItems: " + orderModelId.get(index).OrderedItems + "; " +
                      " OrderedAmount: " + orderModelId.get(index).OrderedAmount)
            }
        }

        onClicked: {
            getValues(lw_order, orderModelId)
        }
    }

    ListModel {
        id: orderModelId
        ListElement {
            OrderedID: "1"
            OrderedItems: "10"
            OrderedAmount: "15"
        }

        ListElement {
            OrderedID: "2"
            OrderedItems: "20"
            OrderedAmount: "25"
        }

        ListElement {
            OrderedID: "3"
            OrderedItems: "30"
            OrderedAmount: "35"
        }
    }

    TableView {
        id: lw_order
        x: 0
        y: 50
        width: 300
        height: 300
        model: orderModelId

        TableViewColumn
        {
            id: tableorderid
            role: "OrderedID"
            title: "ID"
            width: 50
        }
        TableViewColumn
        {
            role: "OrderedItems"
            title: "Items"
            width: 100
        }
        TableViewColumn
        {
            id: tableamountid
            role: "OrderedAmount"
            title: "Amount"
            width: 70
            delegate: Item {
                SpinBox {
                    id: tableamountspin
                    anchors.verticalCenter: parent.verticalCenter
                    minimumValue: 1
                    width: 70
                    value: styleData.value

                    onValueChanged: {
                        if (focus == true) {
                            console.log("onValueChanged - row: "  + styleData.row + " column: " + styleData.column + " value: " + value)
                            orderModelId.setProperty(styleData.row, "OrderedAmount", value.toString())
                        }
                    }
                }
            }
        }
    }
}