How to make a cell editable in qt tableview - qt

Question

I try to make a cell editable using a tableview in qt. I have found a few examples and came up with the following:
TableView {
id: tableView
objectName: "tableView"
horizontalScrollBarPolicy: -1
selectionMode: SelectionMode.SingleSelection
Layout.minimumWidth: 300
Layout.fillHeight: true
Layout.fillWidth: true
model: trackableInfoModel
itemDelegate: Rectangle {
Text {
anchors.verticalCenter: parent.verticalCenter
text: styleData.value
}
MouseArea {
id: cellMouseArea
anchors.fill: parent
onClicked: {
if(styleData.column === 2){
//do something
}
}
}
}
From what I found it looks like I need an itemDelegate to paint each cell. Then I add a MouseArea to the cell and check which cell was selected. In my case I only need to react on the cells in column 2.
The thing is when I use the code shown above I get the error that:
JavaScipt blocks are not supported in a QT Quick UI form. (M223)
Because of that I tried to register a property alias for cellMouseArea like this:
property alias cellMouseArea : cellMouseArea
However that leads to this error:
qrc:/EditPageForm.ui.qml:24 Invalid alias reference. Unable to find id "cellMouseArea"

Answer 1

Overlay cell with TextInput on click.
import QtQuick 2.7
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.0
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
TableView {
id: tableView
objectName: "tableView"
horizontalScrollBarPolicy: -1
selectionMode: SelectionMode.SingleSelection
anchors.fill: parent
TableViewColumn {
id: titleColumn
title: "Title"
role: "title"
movable: false
resizable: false
width: tableView.viewport.width - authorColumn.width
}
TableViewColumn {
id: authorColumn
title: "Author"
role: "author"
movable: false
resizable: false
width: tableView.viewport.width / 3
}
model: ListModel {
id: libraryModel
ListElement {
title: "A Masterpiece"
author: "Gabriel"
}
ListElement {
title: "Brilliance"
author: "Jens"
}
ListElement {
title: "Outstanding"
author: "Frederik"
}
}
itemDelegate: Rectangle {
Text {
anchors { verticalCenter: parent.verticalCenter; left: parent.left }
color: "black"
text: styleData.value
}
MouseArea {
id: cellMouseArea
anchors.fill: parent
onClicked: {
// Column index are zero based
if(styleData.column === 1){
loader.visible = true
loader.item.forceActiveFocus()
}
}
}
Loader {
id: loader
anchors { verticalCenter: parent.verticalCenter; left: parent.left}
height: parent.height
width: parent.width
visible: false
sourceComponent: visible ? input : undefined
Component {
id: input
TextField {
anchors { fill: parent }
text: ""
onAccepted:{
// DO STUFF
loader.visible = false
}
onActiveFocusChanged: {
if (!activeFocus) {
loader.visible = false
}
}
}
}
}
}
}
}