TableView Multiple rows selection

davidesalvetti

Hi all,

I'm trying to introduce a multiple selection on my QML TableView but with no success. I managed to select only one row, setting the background color of the row.
This is my current code:

        TableView {
            id: tableViewid
            columnWidthProvider: function (column) {
                if (column === 0)
                    return 0;

                return headerItems.itemAt(column).implicitWidth + 10
            }
            rowHeightProvider: function (column) { /*return 60;*/ }
            topMargin: columnsHeader.implicitHeight

            model: masterController.ui_databaseController.ui_tableModel
            clip: true

            property int selectedRow: -1
            property var deletingRow: []
            delegate: Rectangle {
                id: modelrect
                implicitWidth: textId.implicitWidth + 50
                implicitHeight: textId.implicitHeight + 10

                Text {
                    id: textId
                    text: display
                    anchors.fill: parent
                    color: row == tableViewid.selectedRow ? 'white' : 'black'
                    font.bold: row == tableViewid.selectedRow
                    font.pixelSize: Style.tables.valuePointSize
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                }
                color: setRowColor()
                function setRowColor() {
                    console.log("Entering func")
                    if (flickableItemId.state == "base") {
                        console.log("State is this one")
                        if (row == tableViewid.selectedRow)
                            return Style.tables.selectedColor
                    } else if (flickableItemId.state == "deleting") {
                        console.log("Index ")
                        for (let i = 0; i < tableViewid.deletingRow.length; i++) {
                            if (tableViewid.deletingRow[i] == row)
                                return "red"
                        }
                    }

                    return Style.tables.tableColor
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        if (flickableItemId.state == "base") {
                            if (tableViewid.selectedRow == row)
                                tableViewid.selectedRow = -1
                            else
                                tableViewid.selectedRow = row
                        } else if (flickableItemId.state == "deleting") {
                            let idx = tableViewid.deletingRow.indexOf(row)
                            if (idx > -1) {
                                tableViewid.deletingRow.splice(idx, 1)
                            } else {
                                tableViewid.deletingRow.push(row)
                            }
                            console.log(tableViewid.deletingRow)
                        }
                    }
                }

Basically, depending on the state of a component, I want to have a single selection or a multiple selection of the rows. To select a row I set a color of the Rectangle element.
The problem I am facing is that when I am selecting only one row the color of the rectangles refresh correctly and I can see the row selected. When I want a multiple selection, when I click on the row, I can see that the row is inserted inside the array deletingRow, but the function setRowColor is not called, while it is called when I am in the single selection method.

Anyone can help me understand why it is behaving like that?
I am on windows, Qt 5.15.2 MinGw and I am using QtQuick.controls 2.
Thanks in advance.