Customization of user editable checkboxes implemented via QAbstractItemModel in QTreeView - c++

Question

I have QTreeView with QAbstractItemModel. Some particular columns are supposed to have user defined checkboxes. I have done so by overriding QAbstractItemModel::data() function and by sending check state for Qt::CheckStateRole role as shown in the code.
I am getting checkboxes and am able to check and uncheck them successfully.
But the requirement is to customize some of these checkboxes. Basically I need to differentiate some checkboxes from the others by any method for eg: fill the checkbox with blue, make the boundary of the checkbox blue or any other method. But I am not sure how to change checkbox styling as I am creating checkbox via model.
QVariant MyModel::data(const QModelIndex &index, int role) const
{
if (!index.isValid())
return QVariant();
if (role == Qt::CheckStateRole && index.column() == COLUMN_WITH_CHECKBOX)
{
//return Qt::Checked or Qt::Unchecked here
}
//...
}
bool MyModel::setData(const QModelIndex &index, const QVariant &value, int role)
{
if (!index.isValid())
return false;
if (role == Qt::CheckStateRole)
{
if ((Qt::CheckState)value.toInt() == Qt::Checked)
{
//user has checked item
return true;
}
else
{
//user has unchecked item
return true;
}
}
return false;
}

Answer 1

First you need is implement your own ItemDelegate
class CheckedDelegate : public QStyledItemDelegate
{
Q_OBJECT
public:
CheckedDelegate(QObject *parent = nullptr);
~CheckedDelegate();
QWidget* createEditor(QWidget *parent, const QStyleOptionViewItem &option, const QModelIndex &index) const;
void setEditorData(QWidget *editor, const QModelIndex& index) const;
void setModelData(QWidget *editor, QAbstractItemModel *model, const QModelIndex& index) const;
void updateEditorGeometry(QWidget *editor, const QStyleOptionViewItem &option, const QModelIndex& index) const;
void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex& index) const;
};
In this delegate you must implement custom editor and custom item painting. To create custom editor:
QWidget *CheckedDelegate::createEditor(QWidget *parent, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
QCheckBox *chBox = new QCheckBox(parent);
//customize editor checkbox
QString strQss = "QCheckBox::indicator:checked { image: url(:/icons/pic/checkboxChecked.png); } ";
strQss.append("QCheckBox::indicator:unchecked { image: url(:/icons/pic/checkboxUnchecked.png); }");
chBox->setStyleSheet(strQss);
return chBox;
}
void CheckedDelegate::setEditorData(QWidget *editor, const QModelIndex &index) const
{
QCheckBox *chBox = dynamic_cast<QCheckBox*> (editor);
if (index.data(Qt::CheckStateRole).toInt() == Qt::Checked)
{
chBox->setChecked(true);
}
else
{
chBox->setChecked(false);
}
}
void CheckedDelegate::setModelData(QWidget *editor, QAbstractItemModel *model, const QModelIndex &index) const
{
QCheckBox *chBox = dynamic_cast<QCheckBox*> (editor);
model->setData(index, chBox->isChecked() ? Qt::Checked : Qt::Unchecked, Qt::CheckStateRole);
}
void CheckedDelegate::updateEditorGeometry(QWidget *editor, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
editor->setGeometry(GetCheckboxRect(option));
}
To calculate checkbox geometry use
QRect GetCheckboxRect(const QStyleOptionViewItem &option)
{
QStyleOptionButton opt_button;
opt_button.QStyleOption::operator=(option);
QRect sz = QApplication::style()->subElementRect(QStyle::SE_ViewItemCheckIndicator, &opt_button);
QRect r = option.rect;
// center 'sz' within 'r'
double dx = (r.width() - sz.width()) / 2;
double dy = (r.height()- sz.height()) / 2;
r.setTopLeft(r.topLeft() + QPoint(qRound(dx),qRound(dy)));
r.setWidth(sz.width());
r.setHeight(sz.height());
return r;
}
Then implement custom painting. In this example I use pixmaps to customize checkbox so I also paint only pixmaps.
void CheckedDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
QStyleOptionViewItem opt = option;
QApplication::style()->drawControl(QStyle::CE_ItemViewItem, &opt, painter);
if (index.data(Qt::CheckStateRole).toInt() == Qt::Checked) {
QApplication::style()->drawItemPixmap(painter, GetCheckboxRect(option), Qt::AlignLeft | Qt::AlignVCenter, QPixmap(":/icons/pic/checkboxChecked.png"));
} else {
QApplication::style()->drawItemPixmap(painter, GetCheckboxRect(option), Qt::AlignLeft | Qt::AlignVCenter, QPixmap(":/icons/pic/checkboxUnchecked.png"));
}
}
And set your delegate (in my example I have TableTiew not TreeView)
CheckedDelegate *chDel = new CheckedDelegate(this);
ui->tableView->setItemDelegateForColumn(1, chDel);