QML TableView control add MouseArea Mouse click on the item can not be selected

[dnybz]

Customize the QML TableView style, add the MouseArea event to the rowDelegate, Mouse click on the item can not be selected.

Thanks soo much to everyone :-)

import QtQuick 2.6
import QtQuick.Controls 2.2 as Control2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.1
import QtQuick.Controls.Private 1.0


ApplicationWindow {
    id: mainWindow
    width: 1080
    height: 676
    color: "#00000000"
    title: "QML TableView Sample"
    visible: true

    ListModel {
        id: fileListModel
        ListElement {
            fileName: "test.txt"
            modifyTime: "2017-10-19"
            fileType: "txt file"
            fileSize: "45627K"
        }
        ListElement {
            fileName: "test.txt"
            modifyTime: "2017-10-19"
            fileType: "txt file"
            fileSize: "45627K"
        }
        ListElement {
            fileName: "test.txt"
            modifyTime: "2017-10-19"
            fileType: "txt file"
            fileSize: "45627K"
        }
    }

    TableView {
        id: tableView
        anchors.fill: parent
        sortIndicatorVisible: true//sortEnabled
        selectionMode: SelectionMode.ExtendedSelection
        alternatingRowColors: false
        Keys.enabled: true
        enabled: true
        model: fileListModel

        /*! The background color. */
        property color backgroundColor: tableView.backgroundVisible ? "#FFFFFF" : "transparent"

        /*! The alternate background color. */
        property color alternateBackgroundColor: "#FFFFFF"


        style: TableViewStyle {

            rowDelegate: Rectangle {
                id: delegateRect
                height: 30
                property color selectedColor: styleData.hasActiveFocus ? "#07c" : "#4DA6FF"
                color: styleData.selected ? selectedColor :
                                            !styleData.alternate ? tableView.alternateBackgroundColor : tableView.backgroundColor

                Rectangle {
                    id: hoverRect
                    anchors.fill: parent
                    color: "#00000000"

                    MouseArea {
                        anchors.fill: parent
                        hoverEnabled: true
                        propagateComposedEvents: true

                        onClicked: {
                            //hoverRect.color = "#4DA6FF"
                            //hoverRect.opacity = 0.5
                            mouse.accepted = false
                        }

                        onEntered: {
                            hoverRect.color = "#4DA6FF"
                            hoverRect.opacity = 0.1
                            //mouse.accepted = false
                        }

                        onExited: {
                            hoverRect.color = "#00000000"
                            hoverRect.opacity = 1.0
                            //mouse.accepted = false
                        }

                    }

                }
            }

            itemDelegate: Item {
                id: delegateItem
                height: Math.max(30, label.implicitHeight * 1.2)
                property int implicitWidth: label.implicitWidth + 20

                Text {
                    id: label
                    objectName: "label"
                    width: parent.width
                    anchors.leftMargin: 26
                    anchors.left: parent.left
                    anchors.right: parent.right
                    horizontalAlignment: styleData.textAlignment
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.verticalCenterOffset: 1
                    elide: styleData.elideMode
                    text: styleData.value !== undefined ? styleData.value : ""
                    color: styleData.textColor
                    renderType: Text.NativeRendering
                    visible: true

                }
            }

        }

        TableViewColumn {
            title: qsTr("Name")
            role: "fileName"
            width: 275
        }

        TableViewColumn {
            title: qsTr("Modify time")
            role: "modifyTime"
            width: 140
        }

        TableViewColumn {
            title: qsTr("Type")
            role: "fileType"
            width: 140
        }

        TableViewColumn {
            title: qsTr("Size")
            role: "fileSize"
            width: 80
        }

    }

}

0_1508724478214_2.png

[MTOLANI]

Hi, any solution to this one?