How can i get the TableView column header click. ? (QML).

Praveen kk

Code block:

        // Customizing column header
        headerDelegate:Rectangle {
            height: 30
            anchors.topMargin: -20
            anchors.rightMargin: -5

            color: control.colHeaderColor
            implicitWidth: 40
            BorderImage {
                source: control.tabTitleImage
                verticalTileMode: BorderImage.Stretch
                anchors { top: parent.top; right: parent.right; bottom: parent.bottom;  }
            }

            Text {
                id: textItem
                text: styleData.value
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: styleData.textAlignment
                elide: Text.ElideRight
                color: control.enableStatus ? control.itemTextColor : control.disableTextColor
                renderType: Text.NativeRendering
                anchors { fill: parent; leftMargin: 7; }
                font { bold: true; pointSize: 12; }
            }
           MouseArea{
           anchors.fill: parent
           onClicked: 
           {
            // this click is not called. 
            console.log("Header Clicked..")
           }
           
           }
        }

The mouse area click in the Headerdelegate Rectangle is not called. Can anyone tell me the solution. i am blocked actually.

Pilk

Hello!

In the docs it says
styleData.pressed - true when the column is being pressed

Therefore try...

                    Connections {
                        target: styleData
                        onPressedChanged: console.debug("Header Clicked..")
                    }

Cheers
Pilk

Praveen kk

That's cool ..!
Many thanks Pilk ..!
Meanwhile i observed one thing, its been called multiple time for single click (pressed and clicked are different things rite ? ). Any way i think i can go ahead with this..!! thanks again..!

Pilk

Maybe an if statement or something..
Look at the docs (press F1)!
http://doc.qt.io/qt-5/qml-qtquick-controls-tableview.html#headerDelegate-prop
Im guessing the multiple events are corresponding to each column header... so I guess you also have styleData.column to play with :)

onPressedChanged:  {
 if (syleData.Pressed === true) {
 pressed...
 }
 else {
 released...
 }
}

shell

@Praveen-kk hey i have the same problem with it.
headerDelegate:Rectangle{
width:100
height:30
Text{
id:textid
visible: !(styleData.column===0)
}
CheckBox{
id:checkid
visible: styleData.column===0
property bool mypressed: styleData.pressed
onMypressedChanged: {
if(mypressed){
console.log("onMypressedChanged")
checked=!checked
}
}
}
}
a single clicked on the checkbox will print twice onMypressedChanged.
do you konw what cause this problem ?