TableView, use of delegate to edit an item

[voilier92]

Hello,
I'am learning QML. I try to move a QT C++ application to a qml/C++ application. I write a tableview with for model a class derivated from QAbstractTableModel. The item are correctly show, no problem. I wan't to edit item : so when I click on a integer item, I want to show a SpinBox to change the value (I don't want to show the spinBox when I dont edit the Item). I try to find example, but found nothing.
If you can help me in my code or give me an exemple, thank in advance.

import QtQuick 2.4
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.0

Item {
id: item1
width: 600
height: 400
Component {
id : spinBoxDelegate1
Item {
id : spinBoxDelegateItem1
SpinBox {
id: spinBoxDelegateSpin1
anchors.fill: parent
value: styleData.value+1
visible: false
onEditingFinished: {
onClicked: recipe.state = 'Standard';
spinBoxDelegateLabel1.text=value;
}
}
Label {
id: spinBoxDelegateLabel1
text: styleData.value
}
MouseArea {
anchors.fill: parent
propagateComposedEvents: true
onDoubleClicked: {
print("(onEntered) "+styleData.role)
if (styleData.role=="item1") {
spinBoxDelegateItem1.state = 'Details';
}
}
}
states: [
State {
name: "Details"
PropertyChanges { target: spinBoxDelegateSpin1; visible: true }
PropertyChanges { target: spinBoxDelegateLabel1; visible: false }
},
State {
name: "Standard"
PropertyChanges { target: spinBoxDelegateSpin1; visible: false }
PropertyChanges { target: spinBoxDelegateLabel1; visible: true }
}
]
}
}
TableView {
id: tableView0
width: 500
height: 200
model: modelOption14at0
TableViewColumn {
title: "name"
movable: false
role: "item0"
delegate:textInputDelegate
}
TableViewColumn {
title: "integer"
movable: false
role: "item1"
delegate:spinBoxDelegate1
}
anchors.left:parent.left
anchors.leftMargin: 0
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
anchors.right: colon1.left
anchors.rightMargin: 0
anchors.top: parent.top
anchors.topMargin: 0
}
}

[anda_skoa]

That looks already quite good.
What you might want to do is move the MouseArea into the Label, so that it is also "invisible" when the label is.

Instead of states it might be easier to just have a bool property in spinBoxDelegateItem1 and bind the spinbox and label visible properties to it, so that one is visble when the property is true and the other when it is not.

Something like


property bool showInput

SpinBox {
visible: parent.showInput
}
Label {
visible: !parent.showInput
}


Cheers,
_