Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. TableView does not show scrollbars
Forum Updated to NodeBB v4.3 + New Features

TableView does not show scrollbars

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
9 Posts 3 Posters 1.5k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • A Offline
    A Offline
    adqt
    wrote on last edited by
    #1

    How can I get scrollbars for my TableView? I can scroll using 'flick' action but I need scrollbar so that I can immediately jump to the end (or any point) of my data.

    Here is my TableView,

        TableView{
            id: tableViewOutput
            anchors.fill: parent
            columnSpacing: 1
            rowSpacing: 1
            clip: true
    
            model: DatagridTableModel {}
            delegate: Rectangle {
                border.color: "black"
                implicitHeight: datacell.implicitHeight+10
                implicitWidth: datacell.implicitWidth+30
                border.width: 1
                Rectangle {
                    anchors.fill: parent
                    anchors.bottomMargin: 1
                    anchors.rightMargin: 1
                    color: heading ? '#757575':"#EEEEEE"
                    Text {
                        id: datacell
                        text: tabledata
                        wrapMode: Text.Normal
                        anchors.fill: parent
                        anchors.margins: 10
                        color: heading ? 'white':"black"
                        font.pixelSize: 10
                        verticalAlignment: Text.AlignVCenter
                    }
                }
            }
        }
    
    1 Reply Last reply
    0
    • 6thC6 Offline
      6thC6 Offline
      6thC
      wrote on last edited by
      #2

      https://doc.qt.io/qt-5/qml-qtquick-tableview.html

      Import Statement: import QtQuick 2.14
      Since: Qt 5.12
      Inherits: Flickable

      https://doc.qt.io/qt-5/qml-qtquick-controls2-scrollbar.html#details

      A 1 Reply Last reply
      0
      • 6thC6 6thC

        https://doc.qt.io/qt-5/qml-qtquick-tableview.html

        Import Statement: import QtQuick 2.14
        Since: Qt 5.12
        Inherits: Flickable

        https://doc.qt.io/qt-5/qml-qtquick-controls2-scrollbar.html#details

        A Offline
        A Offline
        adqt
        wrote on last edited by adqt
        #3

        @6thC same import statement is already there. This did not resolve the issue.

        1 Reply Last reply
        0
        • MarkkyboyM Offline
          MarkkyboyM Offline
          Markkyboy
          wrote on last edited by Markkyboy
          #4

          @adqt

          A more complete paste of your code would be helpful (for newcomers like me) to those wanting to help you solve your problem. For me, it means I learn as I try to help others, thanks.

          Don't just sit there standing around, pick up a shovel and sweep up!

          I live by the sea, not in it.

          A 1 Reply Last reply
          0
          • MarkkyboyM Markkyboy

            @adqt

            A more complete paste of your code would be helpful (for newcomers like me) to those wanting to help you solve your problem. For me, it means I learn as I try to help others, thanks.

            A Offline
            A Offline
            adqt
            wrote on last edited by
            #5

            @Markkyboy Here is the model that is referred in the TableView

            #include "datatablemodel.h"
            
            DataTableModel::DataTableModel()
            {
                int count =60;
                for (int i = 0; i < count; ++i) {
                        table.append({"Bob", "US", "abc@xyz.com"});
                        table.append({"Mary", "UK", "xyz@asd.com"});
                        table.append({"Chan", "Japan", "rty@kkj.com"});
                }
            
            }
            
            int DataTableModel::rowCount(const QModelIndex &parent) const
            {
                Q_UNUSED(parent);
                return table.size();
            }
            
            int DataTableModel::columnCount(const QModelIndex &parent) const
            {
                Q_UNUSED(parent);
                return table.at(0).size();
            }
            
            QVariant DataTableModel::data(const QModelIndex &index, int role) const
            {
                switch (role) {
                case TableDataRole: {
                    return table.at(index.row()).at(index.column());
                }
                case HeadingRole: {
                    return index.row() == 0;
                }
                default: break;
                }
                return QVariant("Q");
            }
            
            bool DataTableModel::setData(const QModelIndex &index, const QVariant &value, int role)
            {
            
            }
            
            QVariant DataTableModel::headerData(int section, Qt::Orientation orientation, int role) const
            {
                if (role != Qt::DisplayRole) {
                    return QVariant();
                }
                if (orientation == Qt::Horizontal) {
                    switch (section) {
                    case 0 :
                        return QString("Name");
                    case 1 :
                        return QString("Country");
                    case 2:
                        return QString("Email");
                    }
                }
            }
            
            bool DataTableModel::insertRows(int row, int count, const QModelIndex &parent)
            {
                beginInsertRows(QModelIndex(), row, row+count-1);
                for (int i = 0; i < count; ++i) {
                    table.insert(row,{"John", "US", "abc@xyz.com"});
                }
                endInsertRows();
                return  true;
            }
            
            bool DataTableModel::removeRows(int row, int count, const QModelIndex &parent)
            {
                beginRemoveRows(QModelIndex(), row, row+count-1);
            
                for (int i = 0; i < count; ++i) {
                    table.removeAt(row);
                }
                endRemoveRows();
                return true;
            }
            
            Qt::ItemFlags DataTableModel::flags(const QModelIndex &index) const
            {
                if (!index.isValid()) {
                    return QAbstractItemModel::flags(index);
                }
                return QAbstractItemModel::flags(index) | Qt::ItemIsEditable;
            }
            
            QHash<int, QByteArray> DataTableModel::roleNames() const
            {
                QHash<int, QByteArray> roles;
                roles[TableDataRole] = "tabledata";
                roles[HeadingRole] = "heading";
                return roles;
            }
            
            Also, add a line in main.cpp
            

            qmlRegisterType<DataTableModel>("DataTableModel",0,1, "DatagridTableModel");

            Put my TableView in main.qml. Create header file for model code pasted above and set references. You should be good.

            1 Reply Last reply
            1
            • A Offline
              A Offline
              adqt
              wrote on last edited by
              #6

              I am not sure if this is the best way to solve this issue. All I did was pasted following 2 lines (from Qt website) just before the TableView closing curly brackets and I can now see scrollbars. If anyone has a better solution with good explanation, please post your solution.

                          ScrollBar.horizontal: ScrollBar { id: hbar; active: vbar.active }
                          ScrollBar.vertical: ScrollBar { id: vbar; active: hbar.active }
              
              6thC6 1 Reply Last reply
              0
              • MarkkyboyM Offline
                MarkkyboyM Offline
                Markkyboy
                wrote on last edited by
                #7

                Cool, thanks. As for a 'better solution', that is highly subjective, if it works, it works. If adding only those 2 lines you've shown 'fixes' the problem, then personally, I would call it 'solved' and it seems like a good solution to me, but then I am still learning about QT/QML, albeit most of my experience is through using SailfishOS which is largely QML based, mixed with java and some proprietary stuff.

                Don't just sit there standing around, pick up a shovel and sweep up!

                I live by the sea, not in it.

                1 Reply Last reply
                0
                • A adqt

                  I am not sure if this is the best way to solve this issue. All I did was pasted following 2 lines (from Qt website) just before the TableView closing curly brackets and I can now see scrollbars. If anyone has a better solution with good explanation, please post your solution.

                              ScrollBar.horizontal: ScrollBar { id: hbar; active: vbar.active }
                              ScrollBar.vertical: ScrollBar { id: vbar; active: hbar.active }
                  
                  6thC6 Offline
                  6thC6 Offline
                  6thC
                  wrote on last edited by
                  #8

                  @adqt
                  That's what I said: https://doc.qt.io/qt-5/qml-qtquick-controls2-scrollbar.html#details
                  You put it onto a flickable, which tableview is...

                  A 1 Reply Last reply
                  0
                  • 6thC6 6thC

                    @adqt
                    That's what I said: https://doc.qt.io/qt-5/qml-qtquick-controls2-scrollbar.html#details
                    You put it onto a flickable, which tableview is...

                    A Offline
                    A Offline
                    adqt
                    wrote on last edited by
                    #9

                    @6thC I didn't have to put it inside a flickable. It worked as soon as I added the scrollbars. TableView is a by default flickable. May be I am not getting what you wanted to say.

                    1 Reply Last reply
                    0

                    • Login

                    • Login or register to search.
                    • First post
                      Last post
                    0
                    • Categories
                    • Recent
                    • Tags
                    • Popular
                    • Users
                    • Groups
                    • Search
                    • Get Qt Extensions
                    • Unsolved