TableView with inline edit

[PhTe]

Im trying to create a table where the user can edit the values in one column. The idea was that if the user double clicks ( or press and hold the mouse button) the value of one column turns into an edit field, where the value can be changed. If editing is finished (enter pressed or focus lost) the edit field should be hidden and the new value be shown. Also the new value should be sent to c++ by a signal.

But i have problems how to realise this and where to start with it. I know how to handle the signals, doubleclick, pressAndHold events and all these stuff, but i have know idea how to combine it to get a table with the described behaviour :(

Does anyone knows an example for this? Something that is near to my table.

[hpollak]

@PhTe Have you tried to work with edit-Triggers?

QAbstractItemView.setEditTriggers

EditTriggers-Enum

[PhTe]

Oh, i missed to mention that i use QML.
It seems edittriggers can only be used for qtwidgets and not in QML.

[p3c0]

Hi @PhTe,

Im trying to create a table where the user can edit the values in one column. The idea was that if the user double clicks ( or press and hold the mouse button) the value of one column turns into an edit field, where the value can be changed. If editing is finished (enter pressed or focus lost) the edit field should be hidden and the new value be shown.

Create a custom delegate comprising of TextInput or TextArea. For press and hold or mouse operations you will need to define MouseArea for it. Then assign this to the itemDelegate of TableView. Use onAccepted event handler for enter key press detection.

Also the new value should be sent to c++ by a signal.

Create a C++ class and set it as a setContextProperty so as to expose C++ class to QML. An example can be found here. Define some Q_INVOKABLE functions in C++ which can then be invoked from QML. You can invoke this function with required parameters in onAccepted event handler of delegate created earlier.

Hope this helps. Try it out and come back for more questions.

[PhTe]

Ok, i created a table which worked nearly as expected yesterday.
My problem is currently how to show the TextInput, lets say in column 4, even if the user double clicks on column 1 and hide it if the user clicks outside the TextInput field or on another row.

[p3c0]

@PhTe I guess that wont work. itemDelegate will set delegate to all fields. May be try changing readOnly property to true when clicked to make it appear that it is in edit mode.

[PhTe]

I now use a MouseArea in my item delegate which triggers a Loader, if the item is in column 3, to overlay the text with an input field.
This works so far. My next step is to hide the input field if the user clicks on an other cell, but if have not idea to get this.
Does anyone have a solution for it?

itemDelegate: Rectangle {

    Text {
        id: textItem
        text: styleData.value
    }

    Loader {
        id: editLoader
    }

    MouseArea {
        anchors.fill: parent

        onPressAndHold:  {
            if(styleData.column === 3) 
                 editLoader.sourceComponent = textInputComponent
        }
    }

    Component {
        id: textInputComponent

        Component.onCompleted: {
            textinput.forceActiveFocus();
        }

         TextField {
               id: textinput
              anchors.fill: textItem
              text: styleData.value
         }
    }
}

[p3c0]

@PhTe Use activeFocus signal. Check it in onActiveFocusChanged handler.