How to make a cell editable in qt tableview

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"

I don't think there is a straight forward way to do it since `TableView` inherits from `ScrollView` and doesn't add that much in terms of functionality. I think you should use the `selectionChanged()` signal and edit the data model that is used by the view. This should cover both mouse **and** keyboard interaction (`TableView` does support key press events!). — rbaleksandar, Apr 07 '17 at 08:39
What I'm aiming for it to show/overlay the cell that is editable with a text input field that shows the original value and can then be changed. Sorry if that wasn't clear in the question. — Thor_Bux, Apr 07 '17 at 08:41
Ah, I didn't see any `TextInput` item in your code so I missed what you meant by editable element in the view. Can you check [this](http://stackoverflow.com/q/23856114/1559401)? It seems that it's exactly what you are looking for and without the need to hunt down pixels and place `TextInput` items. — rbaleksandar, Apr 07 '17 at 12:39
IMO using Qt Quick UI forms (i.e. .ui.qml files) are more of a headache than useful. Try using a normal .qml file — Tony Clifton, Apr 07 '17 at 13:19

score 3 · Answer 1 · answered Apr 07 '17 at 14:21

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

Yeah, that is the thing that does not work because I cannot embed java script code into .ui.qml code. — Thor_Bux, Apr 10 '17 at 02:50
Well, I just started with QT and that is the way QT guides the user to implement a QT QUICK2 application. So I thought there would be a simple solution. — Thor_Bux, Apr 11 '17 at 03:02
Ironically enough,besides the "Qt Quick Forms" section in the documentation I've never seen a .ui.qml file anywhere else. By all means, use a .ui.qml files if you wish, but you'll still have to write javascript in another qml file by exposing your Qt Quick form components to it. — Tony Clifton, Apr 11 '17 at 13:32

How to make a cell editable in qt tableview

1 Answers1