TableView: the highlight of the selected row is displayed only after scrolling

woodpecker

Hello!
I wrote this code :

  import QtQuick
  import QtQuick.Window
  import QtQuick.Controls
  import QtQuick.Layouts
    ...
    HorizontalHeaderView {
        id: horizontalHeader
        anchors.left: tableView.left
        anchors.top: parent.top
        syncView: tableView
        clip: true
        delegate: Label {
                    text: if(column === 0)
                             return model.name
                          else if(column === 1)
                             return model.weight
                          else if(column === 2)
                             return model.price
                          else
                             return model.cnt

                    Rectangle {
                        anchors.fill: parent
                        color: "#efefef"
                        z: -1
                    }
                }
    }

    TableView {
        id: tableView
        anchors.left: parent.left
        anchors.margins: 5
        anchors.top: horizontalHeader.bottom
        anchors.right: parent.right
        anchors.bottom: parent.bottom

        columnSpacing: 1
        rowSpacing: 1
        boundsBehavior: Flickable.StopAtBounds

        model:  myModel

        selectionModel: ItemSelectionModel {
                    model: tableView.model
                    onCurrentChanged: {
                        console.log("Selected row changed to:", currentIndex);
                    }
                }
        selectionMode: TableView.SingleSelection
        selectionBehavior: TableView.SelectRows

        delegate:
            Rectangle{
            implicitWidth: 100
            implicitHeight: 50
            border.width: 1
            color: {

                console.log("Color changing - "+tableView.selectionModel.isSelected(tableView.index(row, 0)))

                if(tableView.selectionModel.isSelected(tableView.index(row, 0)))
                    "#F1F8E0";
                  else
                    "#ffffff";
            }

            Text {
                   text: if(column === 0)
                           model.name
                         else if(column === 1)
                           model.weight
                         else if(column === 2)
                           model.price
                         else
                           model.cnt

                    width: parent.width
                    padding: 12
                }

                MouseArea {
                    id: btnMouse
                    anchors.fill: parent
                    acceptedButtons: Qt.RightButton | Qt.LeftButton
                    onClicked: {
                        tableView.selectionModel.select(tableView.index(row, 0), ItemSelectionModel.Select);
                    }
                }
        }
   }
   ...

The myModel is an object of the class derived QAbstractTableModel.

But when the mouse button is clicked, the color of the line does not change.
The line "Color change - ..." is not displayed in the log, as well.
This line appears in the log only when I scroll the selected line out of the visible area and back.
This also causes the highlighting to appear.

The Qt version is 6.8.2.
Has anyone come across this?
Thanks in advance!

Bob64

Your delegate logic is more complicated than it needs to be when it references the selection model and so on. You should be able simply to access the selected property in the delegate.

In fact, unless you do something like this, QML will not know that the color property needs to update.

color: selected ? "#F1F8E0" : "#ffffff"

The basic QML paradigm is that you react to property changes using logic like this. It is possible to use other approaches but this is the starting point for most things. QML tracks the declared dependencies between properties and updates any property that depends on another property that has changed.

If you wanted to add logging in like you have in your current code, I think you can do it like this:

    color: {
        console.log("Color changing - selected = ", selected);
        selected ?  "#F1F8E0" : "#ffffff"
    }

woodpecker

@Bob64 Thank you very much!

@Bob64 said in TableView: the highlight of the selected row is displayed only after scrolling:

QML tracks the declared dependencies between properties and updates any property that depends on another property that has changed.

I'm stupid!
Really, how is QML has to know it needs to change the color?

woodpecker

@Bob64

@Bob64 said in TableView: the highlight of the selected row is displayed only after scrolling:

color: {
    console.log("Color changing - selected = ", selected);
    selected ?  "#F1F8E0" : "#ffffff"
}

It's working fine!
Also, to select the entire line, I had to replace::

@woodpecker said in TableView: the highlight of the selected row is displayed only after scrolling:

tableView.selectionModel.select(tableView.index(row, 0), ItemSelectionModel.Select);

with:

tableView.selectionModel.select(tableView.index(row, 0), ItemSelectionModel.Select **| ItemSelectionModel.Rows**);

.