Unsolved 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 setcontentY
property of your view or useflick
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?