How to use QTableView & Model



  • I have a simple requirement, I need to use QTableView to display a clickable table(grid) with some displays on it. Roughly how it looks like. I want to display a grid like table with dotted lines marking the border, and I want to fill the center area with some numbers which are fixed(hardcoded) during compile time. The table also has to be clickable as I want the user to be able to click and mark cells of their choice. My code are shown below, I am not sure how to continue from there.

    class mygrid_widget : public QAbstractTableModel
    {
    Q_OBJECT;
    public:
    mygrid_widget(QWidget *parent = 0);
    ~mygrid_widget();
    int columnCount(const QModelIndex &parent = QModelIndex()) const;
    int rowCount(const QModelIndex &parent = QModelIndex()) const;
    QVariant data(const QModelIndex & idx, int role = Qt::DisplayRole) const;
    };

    mygrid_widget::mygrid_widget(QWidget *parent) : QAbstractTableModel (parent)
    {
    int width = 780;
    int height = 799;
    int rowCount = height / 20; //each cell's height = 20pixel
    int colCount = width / 20;

    beginInsertRows(QModelIndex(),0,rowCount-1);
    endInsertRows();
    beginInsertColumns(QModelIndex(),0,colCount-1);
    endInsertColumns();
    int num=22;
    QModelIndex index= QAbstractItemModel::createIndex(2,2);
    setData(index, num); //I am not exactly sure what am I doing here. I'm just trying to see if I can add something to the table.
    }

    =================================================================
    The above is my model.
    Now my view.

    void initGrid()
    {
    int height = 799; int width = 780;

    QTableView *table = new QTableView(this);
    table->setModel(mygrid);

    table->setGridStyle(Qt::DotLine);
    table->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
    table->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
    table->horizontalHeader()->hide();
    table->verticalHeader()->hide();
    table->setSelectionMode(QAbstractItemView::MultiSelection);
    table->setSelectionBehavior(QAbstractItemView::SelectItems);

    table->resize(width, height);

    int rowCount = height / 20;
    int colCount = width / 20;

    for(int x=0; x<rowCount; ++x)
    table->setRowHeight(x,20);
    for(int x=0; x<colCount; ++x)
    table->setColumnWIdth(x,20);
    }

    ============================================================
    To summarize my problem:

    • I don't know how to add text to the table as shown in the linked image, I want to add those numbers in but in my case, it isn't showing.
    • Why isn't the dotted lines showing? This piece of code that I wrote, when I run my program, it displays an empty panel.

    Can someone guide me on this? The samples I found online all uses the .ui form which I don't think I need it. Could someone modify my code or add stuff to my code that I pasted so I know what I am missing or did wrongly.

    Thank you so much!



  • @cherple said:

    class mygrid_widget : public QAbstractTableModel

    Do not confuse yourself mygrid_widget has nothing to do with widget.
    It is supposed to be a subclass of QAbstractTableModel. And as such should
    implement certain methods which you either did not implement (why in this case it even compiles?) or did not show its implementation.

    " When subclassing QAbstractTableModel, you must implement rowCount(), columnCount(), and data(). " see
    http://doc.qt.io/qt-5/qabstracttablemodel.html#details

    If you did not implement setData do not use it.
    QTableView you create is not within any layout and is not even shown.

    I suggest;

    • create a widget which which will show table view. Go through Qt examples if you have problem with it.
    • Subclass QAbstractTableModel implement columnCount(...) and rowCount (...) and data(...).

    You do not need setData if you do not have editable model all you need to to implement data that it returns proper value with displayRole,
    Again there are enough examples In Qt.



  • Hi, thanks for the prompt reply. Yes I have row and column count as well as data inplemented. I managed to display the table.

    But I have another question. So how do I set the values in the cell? Is there some function I can use that I do not know of, or do I have to create my own 2D array and store the values inside, then return the values within the data() function?



  • data(..) function you have to implement supposed to return values as QVariant . Take them from your array, add member array or compute on the fly depending on your needs.

    QVariant MyModel::data(const QModelIndex &index, int role) const
    {
    if (!index.isValid())
    return QVariant();

    if (role == Qt::DisplayRole )
    {
    if ( (row/2)*2 == row )
    return QVariant( row );
    else
    return QVariant( 5);
    }

    return QVariant();
    }



  • I'd also like to confirm one point. When is data() called? Only on startup and when the cells are modified? My issue now is performance issue. I put a debug statement within my data() function, and I see that everytime I mouse over or out of my tableview, all the cells will call the data function and generates a lag.. Everytime I click on a single cell all the cells also updates..



  • Is it also possible to have two different select colors? And how do I do that? You know when you select a cell, the selected color can be set using a style sheet, but since I'm using table view, I was wondering if my view can query my model. For example I have a variable that stores the selection. If user selects a value "1", when he select a cell it will be red color, when he select "2" form the drop down list, when he selects the cell it will be blue. Is that possible?(my table will display two different selected cell colors at the same time, because the different colors are supposed to have a different meaning)



  • Before going too far down the path of a custom model you might try QStandardItemModel as it provides all the capability you have described using an existing Qt model that is designed to hold user data and attributes of that data such as font, background and foreground brushes, ...

    The key point being that if you do not need a complex underlying data storage or generation model for your model data then QStandardItemModel saves a lot of complexity.



  • What about the refresh rate of the tableview? Meaning when is data() called? Why is it that everytime I mouse over or out, or clicking on a cell, data() will be called for all of the cells? This is extremely crucial as it seriously affects performance.. I need it to be realtime



  • @cherple

    data(...) is called every time cell has to be re-drawn.
    Even though it is always a good idea to keep your code robust it may be as fast as simple returning array value at specified index and is not going to cause any visible delay cause drawing cell will be always slower.

    Remove your debug statements from there and you will see no delays there if you do not do complex computation within it.

    Mentioned by bsomervi QStandardItemModel to my mind is too heavy if you want simply display predefined data. But most of the time , especially if your code would run only on desktops with relatively small number of rows/columns you will not notice any difference.



  • Oh wow! I didn't know the debug statement uses so much resource.. Speed wise is all good now, still a little slower with the widget but definitely a lot faster as compared to previously. Thanks! :))

    But how would u suggest I do this then? I will have a variable to store a users selection from a drop down list, then based on this variable's value, when a user selects a cell it should appear as a different color, probably from a predefined set of colors.

    For example: 0=red,1=blue,2=green
    So when user picked 1, and select a cell, the cell within be blue, then the user proceed with choosing 2, then select the cell next to it, and that cell should be green. So you should see the two boxes side by side one being blue and one being green.



  • @alex_malyu What is so heavyweight?

    #include <QApplication>
    #include <QString>
    #include <QStandardItemModel>
    #include <QtWidgets>
    #include <QDebug>
    
    int main (int argc, char * argv[]) {
      QApplication app {argc, argv};
      QStandardItemModel model;
      model.appendRow (QList<QStandardItem *> {
          new QStandardItem {QStringLiteral ("item 1")}
          , new QStandardItem {QStringLiteral ("item 2")}
          , new QStandardItem {QStringLiteral ("item 3")}});
      auto yellow_item = new QStandardItem {QStringLiteral ("item 4")};
      yellow_item->setBackground (Qt::yellow);
      model.appendRow (QList<QStandardItem *> {
          yellow_item
          , new QStandardItem {QStringLiteral ("item 5")}
          , new QStandardItem {QStringLiteral ("item 6")}});
      model.connect (&model, &QStandardItemModel::itemChanged, [] (QStandardItem *item) {
          qDebug () << QStringLiteral ("item(%1, %2) value[%3]")
    	.arg (item->row ())
    	.arg (item->column ())
    	.arg (item->text ());
        });
      QTableView view;
      view.setModel (&model);
      view.connect (&view, &QTableView::clicked, [&model] (QModelIndex const& index) {
          auto * item = model.itemFromIndex (index);
          qDebug () << QStringLiteral ("item(%1, %2) value[%3] clicked")
    	.arg (item->row ())
    	.arg (item->column ())
    	.arg (item->text ());
        });
      view.show ();
      QObject::connect (&app, &QApplication::lastWindowClosed, &app, &QApplication::quit);
      return app.exec ();
    }
    


  • @bsomervi said:

    new QStandardItem {QStringLiteral ("item 1")}

    Simplicity of usage has nothing to do with complexity of implementation or memory used and efficiency in general.
    When you have values already stored somewhere and all you need is to return the specific value does not make any sense create an additional array or do any additional memory allocation etc.
    Functionality provided by QStandardItemModel is not needed for such trivial tasks.
    All you need is to return value.
    With the same results you could suggest to use QTableWidget.
    Or better example - you are not using stl vector when using one variable is sufficient.
    Do not take it as an offence.



  • @cherple said:

    But how would u suggest I do this then? I will have a variable to store a users selection from a drop down list, then based on this variable's value, when a user selects a cell it should appear as a different color, probably from a predefined set of colors.

    For example: 0=red,1=blue,2=green
    So when user picked 1, and select a cell, the cell within be blue, then the user proceed with choosing 2, then select the cell next to it, and that cell should be green. So you should see the two boxes side by side one being blue and one being green.

    To specify color you need in the in the same data(... ) handle Qt::DecorationRole
    I will assume you already know value (v) below:

    int v =....
    if (role == Qt::DecorationRole)
    {
    if ( v == 0 )
    return QVariant(QColor(Qt::red));
    else if( .... )
    ....
    else
    ,,, ;
    }

    .........



  • Well I tried the decoration role, but all the cells are now red. I want only cells to become red when I select them. Also, all the boxes have a checkbox inside them now.



  • @cherple

    You had to return color you wanted depending on a row, column or value.
    I returned red as an example.

    As for check status you probably handle more than Qt::DisplayRole and Qt::DecorationRole.
    From the top of my head it might be Qt::CheckStateRole

    Post code of your data(...) function.



  • This is my data:

    if (role == Qt::DisplayRole)
    {
    Return data[row][col];
    }
    Else if (role = Qt::DecorationRole)
    {
    //if ( selectionVar == 0 )
    return QVariant(QColor(Qt::red));
    //else if( .... )
    }

    For now I just wanted to test the functionality so I just set it as red irregardless of my selection mode. I wanted to see if only my selected cell will be red.. But all the cells become a checkbox with red back ground.. I tried the checkstaterole before and it's the same.. The cells become a check box with the colored background.. I will try to take a screenshot later



  • @cherple

    I am a bit surprised handling decoration role has such effect (checkbox),
    bu t I believe overriding
    virtual Qt::ItemFlags flags ( const QModelIndex & index ) const
    should solve it. Something like :

    Qt::ItemFlags myClass::flags ( const QModelIndex & index ) const
    {
    return Qt::ItemIsSelectable|Qt::ItemIsEnabled; // make sure not to return Qt::ItemIsUserCheckable
    }

    As for color, model can define cell color, but it does not have any idea what is selected in specific view.

    So, if you want to change color of only selected cell you need to do it on QTableView level.
    Or at least you can let model know that this cell is selected and need custom color every time
    selection is changed. For example add array or map which will keep color per cell and set values there, use this container in data to define cell color.
    In this case it had to be used with a single view, but I do not think it is a problem for you.



  • I'm unable to link the image at the moment. I've reimplemented the flags function as u suggested but it remains the same. In my cell, there will be a check box on the left and the whole cell will be painted red.

    Just to confirm, all I had to do was to include the flags function in my model's header file and the flags function in the cpp right? I'm not sure why this is happening :/



  • This is what i see, and what i typed. I have also included the Flags function as u mentioned(not shown).

    Code
    Result



  • Sorry that was my fault - DecorationRole displays icon/picmap.
    So these are not checkboxes.

    Replace Qt::DecorationRole with role == Qt::BackgroundColorRole.
    Something like:

    QVariant MyModel::data ( const QModelIndex & index, int role )  const
    {
    	if ( index.isValid() )
    	{
    		if( role == Qt::DisplayRole )
    		{
    			QString str = QString("%1:%2").arg (index.row()).arg (index.column());
    			return QVariant( str );
    		}
    		else if( role == Qt::BackgroundColorRole )
    		{
    			if( index.row() == index.column() )
    				return QVariant(QColor(Qt::red));
    			else if( index.row() < index.column() )
    				return QVariant(QColor(Qt::yellow));
    			else 
    				return QVariant(QColor(Qt::green));
    		}
    
    	}
    	return QVariant();
    }
    

    And you do not need flags anymore.



  • No worries, it isn't your fault, because I tried backgroundcolorrole and it returned the same results before.

    After entering ur code, this is what it looks like:
    http://img.photobucket.com/albums/v483/dragonlancer/D6781CF8-2598-46CA-9290-167CB12FF98C.jpg
    The code:
    http://img.photobucket.com/albums/v483/dragonlancer/64707ED7-6081-466D-AE35-48263E2A959D.jpg
    My table view settings:
    http://img.photobucket.com/albums/v483/dragonlancer/74A8A89E-97ED-4A1F-8E68-92AF0101CFA9.jpg



  • Could you post all code for whole model class and may be table view subclass?

    As for now I can only see one potential problem -
    you do not check that index passed to data is valid,
    which you should do,

    Code I posted works for me when my model subclass is set to QTableView.
    Check if it works for you,

    cpp:

    #include "mymodel.h"
    #include<QColor>
    #include<QVariant>
    
    
    MyModel::MyModel(QObject *parent)
    	: QAbstractTableModel(parent)
    {
    
    }
    
    MyModel::~MyModel()
    {
    
    }
    
    int MyModel::rowCount ( const QModelIndex & parent ) const
    {
    	return 5;
    }
    
    int MyModel::columnCount ( const QModelIndex & parent ) const
    {
    	return 7;
    }
    
    QVariant MyModel::data ( const QModelIndex & index, int role )  const
    {
    	if ( index.isValid() )
    	{
    		if( role == Qt::DisplayRole )
    		{
    			QString str = QString("%1:%2").arg (index.row()).arg (index.column());
    			return QVariant( str );
    		}
    		else if( role == Qt::BackgroundColorRole )
    		{
    			if( index.row() == index.column() )
    				return QVariant(QColor(Qt::red));
    			else if( index.row() < index.column() )
    				return QVariant(QColor(Qt::yellow));
    			else 
    				return QVariant(QColor(Qt::green));
    		}
    
    	}
    	return QVariant();
    }
    

    .h:

    #pragma once
    
    #ifndef MYMODEL_H
    #define MYMODEL_H
    
    #include <QAbstractTableModel>
    
    class MyModel : public QAbstractTableModel
    {
    	Q_OBJECT
    
    public:;
    	MyModel(QObject *parent=NULL);
    	~MyModel();
    
    	int rowCount ( const QModelIndex & parent = QModelIndex() ) const;
    	int columnCount ( const QModelIndex & parent = QModelIndex() ) const;
    	QVariant data ( const QModelIndex & index, int role = Qt::DisplayRole ) const;
    
    private:
    
    };
    
    #endif // MYMODEL_H


  • The only difference between our code is the number of row and column returned, as well as this:

    MyModel::MyModel(QObject *parent)
    : QAbstractTableModel(parent)
    {

    My code uses QWidget instead of QObject. My constructor only sets data into gridNum[r][c] which is being returned in data(). Other than that I don't see any difference.. Damn this is frustrating..



    1. Try to replace your data() , rowCount, columnCount with mine.
    2. Did you override QTableView? If yes try to see what happens if you use QTableView class instead of your view with default options set.


  • I copied your code exactly and it's the same. Could the difference I. at version be the problem? I'm using Qt 4.8.1



  • @cherple It works with Qt 4.8.6. I do not have earlier version to check .
    It might be a Qt problem. But I doubt it.
    Have you tried my suggestion to use my model as it is together with QTableView?
    All you need on top of code above is main like:

    #include "mymodel.h"
    #include <QtGui/QApplication>
    #include <QTableView>
    
    int main(int argc, char *argv[])
    {
    	QApplication a(argc, argv);
    	QTableView w;
        MyModel* model = new MyModel();
     	w.setModel( model );
    
    	w.show();
    	return a.exec();
    }

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.