QML and comboBox inside TableView

Question

I'm trying to design a mobile application with comboBox inside TableView.

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import QtQuick.Controls 1.2
import QtQuick.Window 2.0
import QtLocation 5.6
import QtPositioning 5.6
import QtQuick.Controls.Styles 1.2

ApplicationWindow {

    visible: true
    width: 640
    height: 480
    title: qsTr("Scroll")

    Component.onCompleted: {
        var i=0;
        for(;i<50;i++)
        {
            console.log("ApplicationWindow.onCompleted");

            var myBoject = {"text":"Banana"};
            idListModelForFlightToExport.append(myBoject);
        }

    }

    ListModel {
        id: idListModelForFlightToExport
    }

    Component  {
        id: checkBoxDelegate
        ComboBox {
            anchors.fill: parent;
            model: [ {"text":"Banana"}, {"text":"Apple"}, {"text":"Coconut"} ]
            textRole: "text";
            Component.onCompleted: {
                console.log("checkBoxDelegate.onCompleted");
            }
        }
    }

    TableView {
        id: idTableViewFlightsToExport

        sortIndicatorVisible: false

        model: idListModelForFlightToExport
        anchors.fill: parent
        TableViewColumn {
            id: isExportedColumn
            title: qsTr("Column")
            movable: false
            resizable: false
            delegate:checkBoxDelegate
        }
    }
}

But when I change the value of a comboBox, and then I scroll down, some others comboBox change their value.

ie if I change the first combo, and I scroll, the value of the first combo will be display on another combo (which seems randomly choosen) and the first combo seems to be reset. If I scroll once again, another combo change value.

Answer 1

Depending on which platform you are using there are two po

#2 EDIT

according to the documentation it may also be due to the standard behavior of TableView in your version of Qt

When an item is flicked out, it moves to the reuse pool, which is an internal cache of unused items. When this happens, the TableView::pooled signal is emitted to inform the item about it. Likewise, when the item is moved back from the pool, the TableView::reused signal is emitted.

Any item properties that come from the model are updated when the item is reused. This includes index, row, and column, but also any model roles.

Note: Avoid storing any state inside a delegate. If you do, reset it manually on receiving the TableView::reused signal.

Setting reuseItems to false on the TableView will fix the issue.

  TableView {
        id: idTableViewFlightsToExport
        reuseItems: false
        sortIndicatorVisible: false

        model: idListModelForFlightToExport
        anchors.fill: parent
        TableViewColumn {
          id: isExportedColumn
          title: qsTr("Column")
          movable: false
          resizable: false
          delegate:checkBoxDelegate
        }
    }

Answer 2

This is because when you scroll, the TableView recycles delegates instead of destroying the delegates that go out of view and recreate the ones that are going to be displayed. This helps the performance. In your case the state of your is kept when the delegate is shuffled around by the TableView.

You should not store state in the delegate, you should store it outside.

You can read more about it here :https://doc.qt.io/qt-5/qml-qtquick-tableview.html#reusing-items

Answer 3

I all,

Thanks to the answers on QT forum, I solved my issue. Here is the solution I implemented : forum.qt.io/topic/110624/qml-and-combobox-inside-tableview

Hope it will be helpfull.