How to scroll tableview in qtquick to the bottom ?

shebin

I want to add new items and scroll to the last item in the table. I am not getting how to use the position property of the scrollbar. I tried setting to 1 but it doesn't work.

  ScrollBar.vertical: ScrollBar {
                id: tableVerticalBar;
                active: true
                policy:ScrollBar.AlwaysOn
            }

Yunus

@shebin What kind of a table did you create? Did you use "Scrollview" or "Flickable"? I think you need to share more codes or maybe pics?

IntruderExcluder

If we are speaking about TableView from Quick.Controls 2 then you can set contentY property of your view or use flick method.

shebin

I am using a TableView from Quick.Controls 2. It is inherited from the Flickable.


  TableView {
                id: table
                width: table.contentWidth
                anchors.margins: 0
                anchors.top: header.bottom
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                anchors.left: parent.left

                columnSpacing: 1; rowSpacing: 1
                interactive: true

                clip: true
                ScrollBar.vertical: ScrollBar {
                    id: tableVerticalBar;
                    active: tableHorizontalBar.active
                    policy:ScrollBar.AlwaysOn
                }
                ScrollBar.horizontal: ScrollBar {
                    id: tableHorizontalBar;
                    active:  tableVerticalBar.active
                }

                model: TableModel {
                    id: tableModel
                }


                delegate: Rectangle {
                    id : bn
                    implicitHeight: 30
                    }

                    Text {
                        id: text1
                        text: tabledata
                        width: parent.width
                        leftPadding: 3
                        elide: Text.ElideRight
                        anchors.centerIn: parent
                    }
                }

            }

shebin

@IntruderExcluder how do I use contentY property can you give me an example? I tried playing with flick and contentY property didn't get the needed behaviour.

I tried setting tableVerticalBar.position = 1. When adding new table rows, table is hidden until I clicked the table. When I click the table, the last row is shown. Don't know why I need to click the table for the needed behaviour. Also if I add lots of rows only one table row is shown until I click the table.

I tried setting tableVerticalBar.position = 1 - table.visibleArea.heightRatio. The table is shown but the scrollbar doesn't go to the end of the table. The scrollbar goes to one result from the end. Then I need to scroll one more result to view the end result.

arkceajin

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("TableView scroll control demo")
    Column {
        anchors.centerIn: parent
        Button {
            text: "scroll to bottom"
            onClicked: {
                // You can directly use the id
                // tableVerticalBar.setPosition(1 - tableVerticalBar.size)
                // But this way is better
                table.tableVerticalBar.setPosition(1 - tableVerticalBar.size)
            }
        }
        TableView {
            id: table
            width: 100
            height: 100
            columnSpacing: 1; rowSpacing: 1
            interactive: true
            clip: true
            property alias tableVerticalBar: tableVerticalBar
            ScrollBar.vertical: ScrollBar {
                id: tableVerticalBar;
                policy:ScrollBar.AlwaysOn
            }
            model: [...Array(20).keys()]
            delegate: Rectangle{
                implicitWidth: 30
                implicitHeight: 30
                border.color: "black"
                Text {
                    text: modelData
                    elide: Text.ElideRight
                }
            }
        }
    }
}

Take a look https://doc.qt.io/qt-5/qml-qtquick-controls2-scrollbar.html#position-prop shall help understand.

shebin

@arkceajin Thanks for the example. I figured out my issue isn't setting the position property.

I am adding new rows to the table and calling the setposition on the tableVerticalBar. I think tableVerticalBar doesn't know about the newly added row (maybe the size of the verticalbar doesn't get updated) and it scrolls to one row before the last result.

   Button {
            text: "Add new row"
            onClicked: {
                tableModel.addNewRow(); //This is done in c++
                table.tableVerticalBar.setPosition(1 - tableVerticalBar.size)
            }
        }

// adding new row in table model c++
  beginInsertRows(QModelIndex(), rowCount(), rowCount());
  table.append(newRow);
  endInsertRows();

How do I know when the size of the scrollbar is updated to call the setposition? I have tried adding two buttons one inserting the table row, another to set the position of the scrollbar. Using two buttons puts the scrollbar to the last result. But how do I do it in one button press?