Custom editable TableView

[KeineAhnung]

Hi,

I am facing several issues with a tableView that I am not able to solve. I hope there is someone here who can show me that what I need is the simplest thing.

What do I want to achieve?
For a GUI I want to have a table. The first column shall hold the title of the row. The second and third column shall have a spin box with custom max and min values. The fourth column shall hold the sum of the second and third column.

What do I have?


import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.2
import QtQuick.XmlListModel 2.0

Item {
id: secondPage
anchors.fill: parent

property int propValueSum: 96
property int propValueCost: 480

ListModel {
id: propertyModel

ListElement {
name: qsTr("Curage")
value: 12
bonus: 0
current: 12
}
ListElement {
name: qsTr("Cunning")
value: 12
bonus: 0
current: 12
}
}

TableView {
id: propertyTable
width: parent.width
height: rowDelegate.height*9 // <- this is not working

model: propertyModel

TableViewColumn {
role: "name"
title: qsTr("Property")
}
TableViewColumn {
role: "value"
title: qsTr("Value")

delegate: SpinBox{
id: propValue
value: styleData.value
minimumValue: 8
maximumValue: secondPage.propValueSum > 99 ? propValue.value:14
selectByMouse: false // <- this is not working still editable

property int lastValue: 12

onValueChanged: {
var newValue = propValue.value + propertyModel.get(propertyTable.currentRow).bonus
var delta = propValue.value - lastValue
secondPage.propValueSum += delta
lastValue = propValue.value
propertyModel.setProperty(propertyTable.currentRow , "value", propValue.value)
propertyModel.setProperty(propertyTable.currentRow , "current", newValue)
}
}
}
TableViewColumn {
role: "bonus"
title: qsTr("Bonus")

delegate: SpinBox{
id: propBonus
value: styleData.value
selectByMouse: false

onValueChanged: {
var newValue = propBonus.value + propertyModel.get(propertyTable.currentRow).value
propertyModel.setProperty(propertyTable.currentRow , "bonus", propBonus.value)
propertyModel.setProperty(propertyTable.currentRow , "current", newValue)
}
}
}
TableViewColumn {
role: "current"
title: qsTr("Actual")
}
rowDelegate: Rectangle{ // <- I needed to add this because the spinBox was larger than the row height.
id: rowDelegate
height: 25
color: styleData.alternate? "#d9e5ea" : "white"
}
}
}


What is missing?

If I hover over a spinbox and use the mouse wheel the value of the active and the value of the "hovered" spinBox is changed. How can I prevent changes via mouse wheel?
How can I set the table height to its content height?
How can I dynamically adjust the row height to its content (in my case the spinBox)
How can I adjust the width of the column to its content? I did not find an example explaining resizeColumnsToContents() in detail. Where do I have to put this?
If I hardcode the width will I run into problems on different devices?


With this custom tableView I see a lot of warnings. Do I need to do anything about them?


qrc:/pages/SecondPage.qml:113: TypeError: Cannot read property 'bonus' of undefined // <- both int in my opinion and it works
SpinBox_QMLTYPE_91_QML_98 QVariant(Invalid) QRect(0,0 0x0)
SpinBox_QMLTYPE_91_QML_98 QVariant(Invalid) QRect(0,0 0x0)

And when I hover over the scrollbar


2016-03-06 21:54:27.342 MyApp[4759:51929] inOptions: {
"is.flipped" = 1;
kCUIOrientationKey = kCUIOrientVertical;
kCUIPartMaskKey = 768;
kCUIThumbProportionKey = "0.665";
state = normal;
value = 0;
widget = scrollbar;
}