TableView with TableStyle ScrollBar

[rhb327]

Ok, I have most functionality but no touch or touch and drag. I can customize my scroll bar, I can click in it with a mouse or grab the handle with a mouse and all is well. I can flick the tableview area and the scrollbar handle will move along. But for the life of me I can't get the touch on scrollbar (analogous to mouse click) to make any change and I can't touch (click with finger) the handle and drag it. Any ideas?

Thanks,
Rich


TableView {
id: eventLogView
anchors{left: parent.left; leftMargin: 30;
top: filterInputFields.bottom; topMargin: 10
right: parent.right; rightMargin: 60;
bottom: footerSeparator.top;
}
frameVisible: false
headerVisible: true
alternatingRowColors: false
horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
verticalScrollBarPolicy: Qt.ScrollBarAlwaysOn
clip: true
sortIndicatorColumn: 0
sortIndicatorOrder: Qt.DescendingOrder
model: sqlELmodel


style: TableViewStyle {
id: tvStyle
scrollToClickedPosition: true
frame: Rectangle {
width: 12
anchors.fill: parent
radius: width/2
}
scrollBarBackground: Rectangle {
implicitWidth: 12
color: "#DBDDDD"
radius: width/2
}
handle: Rectangle {
id: sbHandle
color: "#2EA2EC"
implicitWidth: 12
radius: width/2
anchors.top: parent.top
}
minimumHandleLength: 40
handleOverlap: 0

decrementControl: Rectangle{
visible: false
}
incrementControl: Rectangle {
visible: false
}

headerDelegate: Rectangle {
width: txtHdr.width*1.4
height: txtHdr.height*1.2
clip: true

Row {
anchors.fill: parent
spacing: 10

Image {
id: imgHdr
anchors.verticalCenter: txtHdr.verticalCenter
source: ((eventLogView.sortIndicatorOrder === Qt.DescendingOrder) ? "qrc:/assets/Images/Icon_Scroll_DownChevron.png" : "qrc:/assets/Images/Icon_Scroll_UpChevron.png")
visible: ((eventLogView.sortIndicatorColumn === styleData.column) ? true : false)
width: sourceSize.width*0.6
height: sourceSize.height*0.6

MouseArea {
anchors.fill: parent
onClicked: {
eventLogView.sortIndicatorColumn = eventLogView.getColumn(index)
}
}
}
Text {
id: txtHdr
leftPadding: 5
text: styleData.value
font.pixelSize: 19
font.family: "NotoSans"
elide: Text.ElideRight
}
}
}

rowDelegate: Rectangle {
id: tvRowDelegate
height: 65
width: parent.width

state: ((sqlELmodel.getExpanded(styleData.row)) ? "expanded" : "collapsed")
states:
[
State {
name: "collapsed"
PropertyChanges { target: tvRowDelegate; height: 65; }
},
State {
name: "expanded"
PropertyChanges { target: tvRowDelegate; height: (sqlELmodel.getExpandedSL(styleData.row) === 0) ? 100 : (33*(sqlELmodel.getExpandedSL(styleData.row)/30) < 100) ? 100 : 33*(sqlELmodel.getExpandedSL(styleData.row)/30); }
}
]
MouseArea {
anchors.fill: parent
onClicked: {
sqlELmodel.setExpanded(styleData.row, !sqlELmodel.getExpanded(styleData.row))
timerRow = styleData.row
sqlELmodel.refresh()
timerPos.start();
}
}
}

itemDelegate: Rectangle {
id: eventItem
width: parent.width
height: 65
color: "#ECEEEE"

Image {
id: imgExp
anchors.verticalCenter: txtItm.verticalCenter
anchors{left: parent.left}
source: ((sqlELmodel.getExpanded(styleData.row) ? "qrc:/assets/Images/Icon_Scroll_UpChevron.png" : "qrc:/assets/Images/Icon_Scroll_DownChevron.png"))
visible: ((styleData.column === 2) ? true : false)
width: sourceSize.width*0.6
height: sourceSize.height*0.6
}
Text {
id: txtItm
leftPadding: 35
anchors.verticalCenter: parent.verticalCenter
text: ((styleData.row === -1) ? "" : getText(styleData.row, styleData.column, styleData.value))
font.pixelSize: 19
font.family: "NotoSans"
width: ((styleData.column === 0) ? col1.width : ((styleData.column === 1) ? col2.width : col3.width - imgExp.width))
elide: Text.ElideRight
wrapMode: ((styleData.column > 1) ? TextEdit.WrapAnywhere : TextEdit.NoWrap)
}
Rectangle {
width: parent.width
height: 3
color: "#FFFFFF"
}
}

function getText(row, col, txt) {
if (txt.length < 1) {
return ""
}
else {
if (col === 0) {
// This is UTC time created from milliseconds!
var dt = new Date(txt)
return formatDT(dt.toLocaleString(Qt.locale(), "MM/dd/yyyy hh:mm:ss AP"))
}
else if (col === 1) {
return txt
}
else if (col === 2) {
var cTxt
cTxt = sqlELmodel.combineColumns(row, 2, 3)
sqlELmodel.setExpandedSL(row, cTxt.length)
if (!sqlELmodel.getExpanded(row)) {
return txt
}
else {
return cTxt
}
}
else {
return ""
}
}
}
}

TableViewColumn {
id: col1
title: qsTrId("Date/Time")
role: "CreatedDateTime"
movable: false
resizable: false
width: eventLogView.viewport.width * 0.30
}

TableViewColumn {
id: col2
title: qsTrId("User")
role: "UserName"
movable: false
resizable: false
width: eventLogView.viewport.width * 0.20
}

TableViewColumn {
id: col3
title: qsTrId("Event")
role: "EventName"
movable: false
resizable: false
// Leave some pad to scroll bar
width: eventLogView.viewport.width * 0.45
}

TableViewColumn {
id: col4
title: qsTrId("Event Detail")
role: "EventDetail"
movable: false
resizable: false
visible: false
}

onSortIndicatorColumnChanged: {
// Default sort descending on column change
sortIndicatorOrder = Qt.DescendingOrder
sqlELmodel.sortNewCol(sortIndicatorColumn)
}

onSortIndicatorOrderChanged: {
// Toggle sorting
sqlELmodel.sortToggle(sortIndicatorOrder, sortIndicatorColumn)
}

flickableItem.onContentYChanged: {
if (getLastVisibleRow() <= currRow) {
currRow = getLastVisibleRow()
return;
}
currRow = getLastVisibleRow()
if (currRow > (0.8 * rowCount)) {
timerRow = currRow - 2
if (sqlELmodel.fetch(false)) {
timerPos.start()
}
}
}

function getLastVisibleRow() {
var height = 0;
while (height < eventLogView.viewport.height) {
height += 15;
}
return eventLogView.rowAt(parent.width/2, height)
}
}

Added after 22 minutes:

I think I need to somehow set the interactive property since mouse works and touch does not but not sure where to do so.