Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How to scroll tableview in qtquick to the bottom ?



  • 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
                }


  • @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?



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



  • 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
                        }
                    }
    
                }
    


  • @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.



  • 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.



  • @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?


Log in to reply