Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How highlight TableView row when using DelegateChooser
Forum Updated to NodeBB v4.3 + New Features

How highlight TableView row when using DelegateChooser

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
1 Posts 1 Posters 450 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • B Offline
    B Offline
    Botta
    wrote on last edited by
    #1

    I have a TableView in QML. I am using a DelegateChooser similar to the qps example. I am able to perform onEntered, onExited events on the individual delegates.
    I want to do it on the entire row. I have checked the post [Solved]How to highlight a row in TableView written in QML.
    However, I am unable to use this in the DelegateChooser

    color: styleData.row===selectedRow ? "yellow" : "white"
    

    My sample code

    import QtQuick 2.15
    import QtQuick.Window 2.15
    import QtQuick.Controls 2.15
    import CustomTableModel 1.0
    import Qt.labs.qmlmodels 1.0
    
    Window {
        width: 640
        height: 480
        visible: true
        title: qsTr("Hello World")
    
        CustomTableModel {
            id: customModel
        }
    
        TableView {
            anchors.fill: parent
            anchors.margins: 20
            columnSpacing: 1
            rowSpacing: 1
            clip: true
            model: customModel
            delegate: chooserDelegate
        }
    
        DelegateChooser {
            id: chooserDelegate
            role: "type"
            //color: styleData.row===selectedRow ? "yellow" : "white" // This line says invalid attribute for color (M16)
    
            DelegateChoice {
                roleValue: "number"
                Rectangle {
                    implicitWidth: 100
                    implicitHeight: 50
                    Text {
                        text: model.number
                    }
                }
            }
            DelegateChoice {
                roleValue: "text"
                Rectangle {
                    implicitWidth: 100
                    implicitHeight: 50
                    Text {
                        text: model.display
                    }
    
                //This works but the highlight is restricted to the cell
                MouseArea {
                          anchors.fill: parent
                          onEntered: parent.color = "yellow"
                          onExited: parent.color = "red"
                          onClicked: console.log(model.type)
                      }
                }
            }
            //default delegate
            DelegateChoice {
                Rectangle {
                    implicitWidth: 100
                    implicitHeight: 50
                    Text {
                        text: model.display
                    }
                }
            }
        }
    }
    
    

    How can I highlight the row in this case? Thanks

    1 Reply Last reply
    0

    • Login

    • Login or register to search.
    • First post
      Last post
    0
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Get Qt Extensions
    • Unsolved