How to use QTableView & Model

cherple

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!

alex_malyu

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

cherple

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?

alex_malyu

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();
}

cherple

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

cherple

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)

bsomervi

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.

cherple

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

alex_malyu

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

cherple

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.

bsomervi

@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 ();
}

alex_malyu

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

alex_malyu

@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
,,, ;
}

.........

cherple

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.

alex_malyu

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

cherple

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

alex_malyu

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

cherple

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 :/

cherple

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

Code
Result

alex_malyu

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.