how solve writing back value to backend tableview issue in qml? - qt

Question

In tableview i used a textfield as a delegate component in that i edited a value in second row its shown in red color but after scrolling down same color its showing in 20 row . why ?
check a following code and images
TableView {
id: tableView
clip: true
visible: true
anchors.fill: parent
flickableDirection: Flickable.VerticalFlick
anchors.rightMargin:0
anchors.topMargin: 50
anchors.leftMargin: 5
onWidthChanged: forceLayout()
onHeightChanged: forceLayout()
property var columnWidths: [40,150,150,150]
columnWidthProvider: function (column) { return columnWidths[column] }
rowHeightProvider: function () { return 40 }
columnSpacing: 4
model: TableModel {
TableModelColumn { display: "checked" }
TableModelColumn { display: "fruitType" }
TableModelColumn { display: "fruitName" }
TableModelColumn { display: "fruitPrice" }
rows: [
{
// Each property is one cell/column.
checked: 1,
fruitType: "Apple",
fruitName: "Granny Smith",
fruitPrice: 1.50
},
{
checked: 2,
fruitType: "Orange",
fruitName: "Navel",
fruitPrice: 2.50
},
{
checked: 3,
fruitType: "Banana",
fruitName: "Cavendish",
fruitPrice: 3.50
},
{
// Each property is one cell/column.
checked: 4,
fruitType: "Apple",
fruitName: "Granny Smith",
fruitPrice: 1.50
},
{
checked: 5,
fruitType: "Orange",
fruitName: "Navel",
fruitPrice: 2.50
},
{
checked: 6,
fruitType: "Banana",
fruitName: "Cavendish",
fruitPrice: 3.50
},
{
// Each property is one cell/column.
checked: 7,
fruitType: "Apple",
fruitName: "Granny Smith",
fruitPrice: 1.50
},
{
checked: 8,
fruitType: "Orange",
fruitName: "Navel",
fruitPrice: 2.50
},
{
checked: 9,
fruitType: "Banana",
fruitName: "Cavendish",
fruitPrice: 3.50
},
{
// Each property is one cell/column.
checked: 10,
fruitType: "Apple",
fruitName: "Granny Smith",
fruitPrice: 1.50
},
{
checked: 11,
fruitType: "Orange",
fruitName: "Navel",
fruitPrice: 2.50
},
{
checked: 12,
fruitType: "Banana",
fruitName: "Cavendish",
fruitPrice: 3.50
},
{
// Each property is one cell/column.
checked: 13,
fruitType: "Apple",
fruitName: "Granny Smith",
fruitPrice: 1.50
},
{
checked: 14,
fruitType: "Orange",
fruitName: "Navel",
fruitPrice: 2.50
},
{
checked: 15,
fruitType: "Banana",
fruitName: "Cavendish",
fruitPrice: 3.50
},
{
// Each property is one cell/column.
checked: 16,
fruitType: "Apple",
fruitName: "Granny Smith",
fruitPrice: 1.50
},
{
checked: 17,
fruitType: "Orange",
fruitName: "Navel",
fruitPrice: 2.50
},
{
checked: 18,
fruitType: "Banana",
fruitName: "Cavendish",
fruitPrice: 3.50
},
{
// Each property is one cell/column.
checked: 19,
fruitType: "Apple",
fruitName: "Granny Smith",
fruitPrice: 1.50
},
{
checked: 20,
fruitType: "Orange",
fruitName: "Navel",
fruitPrice: 2.50
},
{
checked: 21,
fruitType: "Banana",
fruitName: "Cavendish",
fruitPrice: 3.50
},
{
// Each property is one cell/column.
checked: 22,
fruitType: "Apple",
fruitName: "Granny Smith",
fruitPrice: 1.50
},
{
checked: 23,
fruitType: "Orange",
fruitName: "Navel",
fruitPrice: 2.50
},
{
checked: 24,
fruitType: "Banana",
fruitName: "Cavendish",
fruitPrice: 3.50
},
{
// Each property is one cell/column.
checked: 25,
fruitType: "Apple",
fruitName: "Granny Smith",
fruitPrice: 1.50
},
{
checked: 26,
fruitType: "Orange",
fruitName: "Navel",
fruitPrice: 2.50
},
{
checked: 27,
fruitType: "Banana",
fruitName: "Cavendish",
fruitPrice: 3.50
},
{
// Each property is one cell/column.
checked: 28,
fruitType: "Apple",
fruitName: "Granny Smith",
fruitPrice: 1.50
},
{
checked: 29,
fruitType: "Orange",
fruitName: "Navel",
fruitPrice: 2.50
},
{
checked: 30,
fruitType: "Banana",
fruitName: "Cavendish",
fruitPrice: 3.50
},
{
// Each property is one cell/column.
checked: 31,
fruitType: "Apple",
fruitName: "Granny Smith",
fruitPrice: 1.50
},
{
checked: 32,
fruitType: "Orange",
fruitName: "Navel",
fruitPrice: 2.50
},
{
checked: 33,
fruitType: "Banana",
fruitName: "Cavendish",
fruitPrice: 3.50
},
{
// Each property is one cell/column.
checked: 34,
fruitType: "Apple",
fruitName: "Granny Smith",
fruitPrice: 1.50
},
{
checked: 35,
fruitType: "Orange",
fruitName: "Navel",
fruitPrice: 2.50
},
{
checked: 36,
fruitType: "Banana",
fruitName: "Cavendish",
fruitPrice: 3.50
},
]
}
delegate: DelegateChooser {
DelegateChoice {
column: 0
delegate: Text {
text: model.display
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
DelegateChoice {
delegate: TextField {
id : textss
property bool edited : false
text: model.display
color:edited ?"red" : "#000000"
font.family: "Helvetica"
font.pixelSize: 12
selectByMouse: true
clip: true
background: Rectangle {
color: "lightgray"
border.width: 2
anchors.fill: parent
}
onAccepted: {
model.display = textss.text
edited = true
console.log( model.display)
}
}
}
}
[i edited a value in second row its shown in red color but after scrolling down same its color showing in 20 row ]
(https://i.stack.imgur.com/8MIJD.png)
[check a 20 line ]
(https://i.stack.imgur.com/7R4N3.png)
how to resolve this issue in tableview ? In qt 6.2.4 version

Answer 1

As I said in the comments, you should not save state on delegates:
Delegates are instantiated as needed and may be destroyed at any time. As such, state should never be stored in a delegate.
The usuall way to do this is with another role on the model, which in TableModel case is not feasible, so I advice you to create a C++ QAbstractTableModel.
Having said that here is an ugly example on how to make this work without an aditional role on the model. You should never use this in production.
import QtQuick
import QtQuick.Controls
import Qt.labs.qmlmodels
TableView {
id: tableView
clip: true
visible: true
anchors.fill: parent
flickableDirection: Flickable.VerticalFlick
anchors.rightMargin:0
anchors.topMargin: 50
anchors.leftMargin: 5
onWidthChanged: forceLayout()
onHeightChanged: forceLayout()
property var columnWidths: [40,150,150,150]
columnWidthProvider: function (column) { return columnWidths[column] }
property var data_: [
{
// Each property is one cell/column.
checked: true,
fruitType: "Apple",
fruitName: "Granny Smith",
fruitPrice: 1.50
},
{
fruitType: "Orange",
fruitName: "Navel",
fruitPrice: 2.50
},
{
fruitType: "Banana",
fruitName: "Cavendish",
fruitPrice: 3.50
},
{
// Each property is one cell/column.
fruitType: "Apple",
fruitName: "Granny Smith",
fruitPrice: 1.50
},
{
fruitType: "Orange",
fruitName: "Navel",
fruitPrice: 2.50
},
{
fruitType: "Banana",
fruitName: "Cavendish",
fruitPrice: 3.50
},
{
fruitType: "Apple",
fruitName: "Granny Smith",
fruitPrice: 1.50
},
{
fruitType: "Orange",
fruitName: "Navel",
fruitPrice: 2.50
},
{
fruitType: "Banana",
fruitName: "Cavendish",
fruitPrice: 3.50
},
{
// Each property is one cell/column.
fruitType: "Apple",
fruitName: "Granny Smith",
fruitPrice: 1.50
},
{
fruitType: "Orange",
fruitName: "Navel",
fruitPrice: 2.50
},
{
fruitType: "Banana",
fruitName: "Cavendish",
fruitPrice: 3.50
},
{
// Each property is one cell/column.
fruitType: "Apple",
fruitName: "Granny Smith",
fruitPrice: 1.50
},
{
fruitType: "Orange",
fruitName: "Navel",
fruitPrice: 2.50
},
{
fruitType: "Banana",
fruitName: "Cavendish",
fruitPrice: 3.50
},
{
// Each property is one cell/column.
fruitType: "Apple",
fruitName: "Granny Smith",
fruitPrice: 1.50
},
{
fruitType: "Orange",
fruitName: "Navel",
fruitPrice: 2.50
},
{
fruitType: "Banana",
fruitName: "Cavendish",
fruitPrice: 3.50
},
{
// Each property is one cell/column.
fruitType: "Apple",
fruitName: "Granny Smith",
fruitPrice: 1.50
},
{
fruitType: "Orange",
fruitName: "Navel",
fruitPrice: 2.50
},
{
fruitType: "Banana",
fruitName: "Cavendish",
fruitPrice: 3.50
},
{
// Each property is one cell/column.
fruitType: "Apple",
fruitName: "Granny Smith",
fruitPrice: 1.50
},
{
fruitType: "Orange",
fruitName: "Navel",
fruitPrice: 2.50
},
{
fruitType: "Banana",
fruitName: "Cavendish",
fruitPrice: 3.50
},
{
// Each property is one cell/column.
fruitType: "Apple",
fruitName: "Granny Smith",
fruitPrice: 1.50
},
{
fruitType: "Orange",
fruitName: "Navel",
fruitPrice: 2.50
},
{
fruitType: "Banana",
fruitName: "Cavendish",
fruitPrice: 3.50
},
{
// Each property is one cell/column.
fruitType: "Apple",
fruitName: "Granny Smith",
fruitPrice: 1.50
},
{
fruitType: "Orange",
fruitName: "Navel",
fruitPrice: 2.50
},
{
fruitType: "Banana",
fruitName: "Cavendish",
fruitPrice: 3.50
},
{
// Each property is one cell/column.
fruitType: "Apple",
fruitName: "Granny Smith",
fruitPrice: 1.50
},
{
fruitType: "Orange",
fruitName: "Navel",
fruitPrice: 2.50
},
{
fruitType: "Banana",
fruitName: "Cavendish",
fruitPrice: 3.50
},
{
// Each property is one cell/column.
fruitType: "Apple",
fruitName: "Granny Smith",
fruitPrice: 1.50
},
{
fruitType: "Orange",
fruitName: "Navel",
fruitPrice: 2.50
},
{
fruitType: "Banana",
fruitName: "Cavendish",
fruitPrice: 3.50
},
]
rowHeightProvider: function () { return 40 }
columnSpacing: 4
model: TableModel {
TableModelColumn { display: "checked" }
TableModelColumn { display: "fruitType" }
TableModelColumn { display: "fruitName" }
TableModelColumn { display: "fruitPrice" }
rows: data_
}
delegate: DelegateChooser {
DelegateChoice {
column: 0
delegate: Text {
text: model.index + 1
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
DelegateChoice {
delegate:
Rectangle{
id: rect
color: "lightgray"
border.width: 2
required property var model
TextInput {
id : textss
text: model.display
property bool fooNotify: false
color: "#000000"
font.family: "Helvetica"
font.pixelSize: 12
selectByMouse: true
clip: true
anchors.fill: parent
onTextEdited: {
model.display = textss.text
tableView.data_[rect.model.index] = true
color=Qt.binding(
function() { if (tableView.data_[rect.model.index]){ return "red"} return "black"}
)
console.log( model.display)
}
}
}
}
}
}

Answer 2

Generally, I have found that ListView + ListModel is superior to TableView + TableModel. This is because (1) TableModel is a lab's feature, (2) there are challenges having updates to TableModel seen in TableView, and (3) there are customization issues with TableView. With ListView, you know what you're going to get and it has been around for a lot longer than TableView.
I had a look at your data and found it was really 3 records repeated, and you were not using the checked property as intended, so, I replaced it with the built-in index. I also added support to supply different editing between string vs floating point input.
Also, there were issues with the "write back concept" and your use of editing. Since there is no way to track editing for every cell value unless you declared it in the model itself. Instead, I declared a modified property that applies to the entire row. You can see the moment any cell is modified, it triggers the entire row to be flagged as modified.
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
ListView {
clip: true
width: 540
anchors.left: parent.left
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.rightMargin:0
anchors.topMargin: 50
anchors.leftMargin: 5
model: MyListModel { }
delegate: RowLayout {
Label {
Layout.preferredWidth: 40
text: (index+1)
color: modified ? "red" : "black"
}
MyTextField { role: "fruitName" }
MyTextField { role: "fruitType" }
MyFloatField { role: "fruitPrice" }
}
ScrollBar.vertical: ScrollBar { width: 20; policy: ScrollBar.AlwaysOn }
}
}
// MyTextField.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
TextField {
Layout.preferredWidth: 150
property string role: "fruitName"
property string roleType: "string"
text: model[role]
color: modified ? "red" : "black"
onAccepted: {
model[role] = text;
modified = true;
}
}
// MyFloatField.qml
import QtQuick
import QtQuick.Controls
MyTextField {
role: "fruitPrice"
roleType: "float"
property int precision: 2
text: model[role].toFixed(precision)
onAccepted: {
model[role] = parseFloat(text);
modified = true;
}
}
// MyListModel.qml
import QtQuick
import QtQuick.Controls
ListModel {
function appendFruit(fruitType, fruitName, fruitPrice) {
append( { fruitType, fruitName, fruitPrice, modified: false } );
}
Component.onCompleted: {
for (let i = 0; i < 10; i++) {
appendFruit( "Apple", "Granny Smith", 1.50 );
appendFruit( "Orange", "Navel", 2.50 );
appendFruit( "Banana", "Cavendish", 3.50 );
}
}
}
You can Try it Online!