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. I NEED A SOLUTION ASAP!!!*** Highlighting of the entire row in QML
Forum Updated to NodeBB v4.3 + New Features

I NEED A SOLUTION ASAP!!!*** Highlighting of the entire row in QML

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
3 Posts 3 Posters 748 Views 1 Watching
  • 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.
  • P Offline
    P Offline
    punisher_MZT
    wrote on last edited by VRonin
    #1

    Hi all, when the list view control is in the report view, only the first column of the selected row is highlighted. To enable highlighting of the entire row, what should i do?` Below can be seen the code and also a screenshot of output.

    Q_1-->I can highlight the selected cell with yellow. What i want is that any cell in the same row should highlight the entire row.

    Q_2-->to release highlighted cell i think i can use onExited function. or anyone has another idea?

    Image.png

    model: root.model
                delegate: DelegateChooser {
                    DelegateChoice {
                        delegate: Rectangle {
                            implicitWidth: root.width / table_model.columnCount
                            implicitHeight: root.cellHeight
                            color: root.cellColor
                            Text {
                                text: model.display
                                padding: 12
                            }
                            MouseArea {
                                anchors.fill: parent
                                onClicked: {
                                    var clicked_row =  model.row
                                    //console.log("clicked row", Object.entries(clicked_row))
                                    //deselect()
                                    //doubleClick(Object.entries(clicked_row))
                                }
                                onEntered: {
                                    parent.color = root.interactionColor // defined as property color interactionColor: 'yellow' (on top of code)
                                }
    
                            }
                        }
    
    DiracsbracketD 1 Reply Last reply
    0
    • fcarneyF Offline
      fcarneyF Offline
      fcarney
      wrote on last edited by
      #2

      Hard to tell what you are doing with the code you posted. Does not look like a listview at all. More like a tableview.
      Each delegate can only control each cell.

      Possible solution.
      Determine which cell column you are in.
      When in column 0 then create another rectangle (transparent) and mousearea that span the entire table.
      Use this to detect when you are hovering in a row. Then make the rectangle opacity be 0.0 when not hovering and something like 0.25 when hovering. This will tint the row, but still show everything through. Make sure to set events of the mousearea to pass through if you need them in the cells.

      C++ is a perfectly valid school of magic.

      1 Reply Last reply
      0
      • P punisher_MZT

        Hi all, when the list view control is in the report view, only the first column of the selected row is highlighted. To enable highlighting of the entire row, what should i do?` Below can be seen the code and also a screenshot of output.

        Q_1-->I can highlight the selected cell with yellow. What i want is that any cell in the same row should highlight the entire row.

        Q_2-->to release highlighted cell i think i can use onExited function. or anyone has another idea?

        Image.png

        model: root.model
                    delegate: DelegateChooser {
                        DelegateChoice {
                            delegate: Rectangle {
                                implicitWidth: root.width / table_model.columnCount
                                implicitHeight: root.cellHeight
                                color: root.cellColor
                                Text {
                                    text: model.display
                                    padding: 12
                                }
                                MouseArea {
                                    anchors.fill: parent
                                    onClicked: {
                                        var clicked_row =  model.row
                                        //console.log("clicked row", Object.entries(clicked_row))
                                        //deselect()
                                        //doubleClick(Object.entries(clicked_row))
                                    }
                                    onEntered: {
                                        parent.color = root.interactionColor // defined as property color interactionColor: 'yellow' (on top of code)
                                    }
        
                                }
                            }
        
        DiracsbracketD Offline
        DiracsbracketD Offline
        Diracsbracket
        wrote on last edited by
        #3

        @punisher_MZT
        Have a look at https://forum.qt.io/topic/58111/solved-how-to-highlight-a-row-in-tableview-written-in-qml

        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