TableView with inline edit
-
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.
-
@PhTe Have you tried to work with edit-Triggers?
-
Oh, i missed to mention that i use QML.
It seems edittriggers can only be used for qtwidgets and not in QML. -
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 ofTableView
. UseonAccepted
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 inonAccepted
event handler of delegate created earlier.Hope this helps. Try it out and come back for more questions.
-
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. -
@PhTe I guess that wont work.
itemDelegate
will set delegate to all fields. May be try changingreadOnly
property totrue
when clicked to make it appear that it is in edit mode. -
I now use a
MouseArea
in my item delegate which triggers aLoader
, 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 } } }
-
@PhTe Use
activeFocus
signal. Check it inonActiveFocusChanged
handler.