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
	}
}

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
	}
}

To copy to clipboard, switch view to plain text mode 

[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
}

property bool showInput

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

To copy to clipboard, switch view to plain text mode 

Cheers,
_