Flickable area not working

[jfinn88]

I'm trying to implement a flickable area on my table view for touch screen scrolling... but it doesn't seem to work

Rectangle {
            width: 990
            height: 490
            anchors.centerIn: parent
            color: "transparent"
            radius: 4
            border.color: "lightsteelblue"
            border.width: 5
            visible: true
            //---Create a flickable area---//
            Flickable {
                id: tableViewFlickable
                height: tableView.height
                width: tableView.width
                contentHeight: tableView.height
                contentWidth: tableView.width
                anchors.centerIn: parent
                interactive: true
                boundsBehavior: Flickable.StopAtBounds
                TableView {
                    id: tableView
                    width: 980
                    height: 480
                    anchors.centerIn: parent
                    sortIndicatorVisible: true
                    sortIndicatorOrder: 1
                    sortIndicatorColumn: 1
                    model: UserEventLog
                    style: TableViewStyle {
                         headerDelegate: Rectangle {
                             height: textItem.implicitHeight * 1.2
                             width: textItem.implicitWidth
                             color: "lightsteelblue"
                             border.color: "black"
                             border.width: .5
                             Text {
                                  id: textItem
                                  anchors.centerIn: parent
                                  text: styleData.value
                                  color: "black"
                                  font.bold: true
                             }
                         }
                    }
                    TableViewColumn {
                            role: "id"
                            title: "id"
                            width: 100
                        }
                    TableViewColumn {
                        role: "userName"
                        title: "User Name"
                        width: 200
                    }
                    TableViewColumn {
                        role: "eventMessage"
                        title: "Event Message"
                        width: 372
                    }
                    TableViewColumn {
                        role: "dateTime"
                        title: "Date Time"
                        width: 201
                    }
                }
            }
        }

Rectangle {
            width: 990
            height: 490
            anchors.centerIn: parent
            color: "transparent"
            radius: 4
            border.color: "lightsteelblue"
            border.width: 5
            visible: true
            //---Create a flickable area---//
            Flickable {
                id: tableViewFlickable
                height: tableView.height
                width: tableView.width
                contentHeight: tableView.height
                contentWidth: tableView.width
                anchors.centerIn: parent
                interactive: true
                boundsBehavior: Flickable.StopAtBounds
                TableView {
                    id: tableView
                    width: 980
                    height: 480
                    anchors.centerIn: parent
                    sortIndicatorVisible: true
                    sortIndicatorOrder: 1
                    sortIndicatorColumn: 1
                    model: UserEventLog
                    style: TableViewStyle {
                         headerDelegate: Rectangle {
                             height: textItem.implicitHeight * 1.2
                             width: textItem.implicitWidth
                             color: "lightsteelblue"
                             border.color: "black"
                             border.width: .5
                             Text {
                                  id: textItem
                                  anchors.centerIn: parent
                                  text: styleData.value
                                  color: "black"
                                  font.bold: true
                             }
                         }
                    }
                    TableViewColumn {
                            role: "id"
                            title: "id"
                            width: 100
                        }
                    TableViewColumn {
                        role: "userName"
                        title: "User Name"
                        width: 200
                    }
                    TableViewColumn {
                        role: "eventMessage"
                        title: "Event Message"
                        width: 372
                    }
                    TableViewColumn {
                        role: "dateTime"
                        title: "Date Time"
                        width: 201
                    }
                }
            }
        }

To copy to clipboard, switch view to plain text mode 

[anda_skoa]

What do you mean with "it doesn't work"?

Are you sure you want the scrollable content to be the same size as the visible area?

Cheers,
_

[jfinn88]

from my understanding the scrollable content need to be smaller than the visible area ? mine is same size ...

I tried changing size of content:

contentHeight: tableView.height * .9
                contentWidth: tableView.width *.9

contentHeight: tableView.height * .9
                contentWidth: tableView.width *.9

To copy to clipboard, switch view to plain text mode 

I cant scroll-drag the table in the tableView by touch or by mouse drag....

I want to use the flickable area to make the tableView scrollable by touch (app will be running on touch screen)

I tried out putting some text to the log and don't get anything to out put

onFlickStarted: {
                    console.log("area flicked");
                    console.log(tableViewFlickable.dragging)
                }

onFlickStarted: {
                    console.log("area flicked");
                    console.log(tableViewFlickable.dragging)
                }

To copy to clipboard, switch view to plain text mode 

I'm starting to think it might not be possible to use flickable to scroll the tableView rows

when I wrap the tableView inside the flickable area It works kind of but the hole table moves instead of the rows scrolling in the tableView it self

I tried wrapping just the tableViewColumns in the flickable area that didn't work no data from model displays

Tried moving the flickable obj inside the tableView obj didn't seem to work either

I discovered: TableView inherits ScrollView. I don't think flickable will work with tableView it will work with listView because it is inherited by listView. TableView doesn't inherit flickable..... is this correct?

[anda_skoa]

from my understanding the scrollable content need to be smaller than the visible area ? mine is same size ...

Usually the content is larger, otherwise you wouldn't need to scroll.

You set the visible size to be the same as the content size, so your content will always be visible fully.

I want to use the flickable area to make the tableView scrollable by touch (app will be running on touch screen)

Any specific reason for using a Flickable? The TableView already scrolls its content itself, why do you also need to move the view itself?

Cheers,
_

[jfinn88]

I thought I would have to use the flickable area to make the tableView scroll by touch...

[anda_skoa]

A view that can't scroll by itself would be pretty useless IMHO.

Cheers,
_

[jfinn88]

I agree and it dose provide scroll bars by its self I get that, I'm not sure about the touch screen side though...

[anda_skoa]

I would be equally surprised if any QtQuick component would not work with touch screen, after all that's the main use case for this UI technology.

Cheers,
_

[jfinn88]

right! that’s why I chose to use it. I have found a know bug when using ScrollView will disable a flickable area in a listView. I'm wondering if there is something messing with my tableViews flickable inheritance that is similar to the listView issue. I'm making progress on my UI thanks for the help

was able to find property for enabling flickable area with ScrollView:

soln: flickableItem.interactive: true - allows flickable are in listView with ScrollView

not sure how to get tableView flickable to work now....