[SOLVED]How to display two icons in a row in QTreeView

psbhardwaj09gmail.com

Hi,

I want to display two icons in tree view one left side of text & other one in right side of icon in a row. So can anyone suggest me(any example) how to do so?

andre

Create a custom delegate to do the rendering of your cells.

psbhardwaj09gmail.com

Can please give me some more information how to use custom delegate with QTreeView , because i am newbie in qt. one more thing i am using Christophe Dumez blog("http://cdumez.blogspot.in/2010/11/how-to-use-c-list-model-in-qml.html") as my model.

andre

-Let me move this to the Quick forum. QML is very different in this respect than Qt/Widgets.-

Actually, let's keep it here. The problem is, the blog you mention is about QML, so I figured you're using QML too. But, you are talking about QTreeView, and that is a Qt/Widgets class of which there is no QML equivalent.

So please tell us: which technology are you using?

psbhardwaj09gmail.com

I am developing my application in qt 4.7 & MY MODEL IS QAbstractmodel.

andre

Ok, so forget about that blog you referenced. It is about using QML, which you are not using.

In that case, refer back to my first answer: you are going to need a custom delegate to manually do your rendering. There is no easy, pre-defined way to put multiple images in a single cell.

giesbert

There could be another way:

If you have a custom model, you can combine the icons into one there and return the combined one by data...

andre

[quote author="Gerolf" date="1360063388"]There could be another way:

If you have a custom model, you can combine the icons into one there and return the combined one by data...[/quote]

Might be difficult if you want one on the left side, and one on the right side, I think?

psbhardwaj09gmail.com

Can you provide me some code for custom delegate please

andre

I could, but I won't. I'm willing to give you pointers in the right direction, but not give you ready-made code that you won't learn a thing from. I'd look at [[doc:QItemDelegate]] or [[doc:QStyledItemDelegate]] as your starting point.

psbhardwaj09gmail.com

Thank you for your guidance. i have started to learn "QItemDelegate"

psbhardwaj09gmail.com

I am not getting any idea about two icons in row, because when i try to find some example there is only for editor e.g.(http://qt-project.org/doc/qt-4.8/itemviews-stardelegate.html".
Can i see the default delegate implementaion for QTreeView

psbhardwaj09gmail.com

Hi,
i am using QItemDelegates paint method for custom delegate. My code is as following

.h file
@#include <QItemDelegate>
#include <QModelIndex>
#include <QObject>
#include <QSize>
#include <QSpinBox>

class TreeViewItemDelegate : public QItemDelegate
{
Q_OBJECT

public:
TreeViewItemDelegate(QObject *parent = 0);

void paint( QPainter * painter,
            const QStyleOptionViewItem & option,
            const QModelIndex & index ) const;

};
@

.cpp file
@TreeViewItemDelegate::TreeViewItemDelegate(QObject *parent)
: QItemDelegate(parent)
{
}

void TreeViewItemDelegate ::paint( QPainter * painter,
const QStyleOptionViewItem & option,
const QModelIndex & index ) const
{
QString contactURI = index.model()->data(index, Qt::DisplayRole).toString();
QIcon icon = qvariant_cast<QIcon>(index.model()->data(index, Qt::DecorationRole));
QIcon icon2 = qvariant_cast<QIcon>(index.model()->data(index, Qt::UserRole+5));

QPixmap iconPixmap = icon.pixmap(option.decorationSize);
QPixmap iconPixmap2 = icon2.pixmap(option.decorationSize);

QStyleOptionViewItem myoption = option;
QStyleOptionViewItem myoption2 = option;
QStyleOptionViewItem myoption3 = option;
myoption.displayAlignment = Qt::AlignCenter;
myoption2.decorationAlignment = Qt::AlignLeft;
myoption3.decorationAlignment = Qt::AlignRight;

drawBackground(painter, myoption, index);
drawDecoration(painter, myoption, myoption2.rect, iconPixmap);
drawDisplay(painter,myoption, myoption.rect, contactURI);
drawDecoration(painter, myoption, myoption3.rect, iconPixmap2);
drawFocus(painter, myoption,myoption.rect);

}
@

There is on problem that only one icon is displaying. I know i am doing something wrong, so can anyone help me to correct this code to display both icon??

psbhardwaj09gmail.com

There is full code to display two icons in a row

addressBookItemDelegate.h

@class TreeViewItemDelegate : public QItemDelegate
{
Q_OBJECT

public:
TreeViewItemDelegate(QObject *parent = 0);

void paint( QPainter * painter,
            const QStyleOptionViewItem & option,
            const QModelIndex & index ) const;
QRect calcDecorationRect(QRect rect, int horizontalAlignment, int verticalAlignment ) const;
QRect calcDisplayRect(QRect rect, int horizontalAlignment) const;

};
@

addressBookItemDelegate.cpp
@
#include "addressBookItemDelegate.h"
#include <QDebug>
#include <QDecoration>
#include <QPainter>

TreeViewItemDelegate::TreeViewItemDelegate(QObject *parent)
: QItemDelegate(parent)
{
}

void TreeViewItemDelegate ::paint( QPainter * painter,
const QStyleOptionViewItem & option,
const QModelIndex & index ) const
{
QString contactURI = index.model()->data(index, Qt::DisplayRole).toString();
QIcon icon = qvariant_cast<QIcon>(index.model()->data(index, Qt::DecorationRole));
QIcon icon2 = qvariant_cast<QIcon>(index.model()->data(index, Qt::UserRole+5));
QIcon icon3 = qvariant_cast<QIcon>(index.model()->data(index, Qt::UserRole+6));
QString freeText = index.model()->data(index, Qt::UserRole+2).toString();

QPixmap iconPixmap = icon.pixmap(option.decorationSize);
QPixmap iconPixmap2 = icon2.pixmap((option.decorationSize/3)*2);
QPixmap iconPixmap3 = icon3.pixmap((option.decorationSize/3)*2);

QStyleOptionViewItem myoption =  option;


QRect rect1 = this->calcDecorationRect(option.rect, Qt::AlignLeft, Qt::AlignTop);
QRect rect2 = this->calcDecorationRect(option.rect, Qt::AlignRight, Qt::AlignTop);

// QRect rect3 = this->calcDecorationRect(option.rect, Qt::AlignLeft, Qt::AlignBottom);
QRect rect4 = this->calcDecorationRect(option.rect, Qt::AlignRight, Qt::AlignBottom);

QRect displayRect = this->calcDisplayRect(option.rect, Qt::AlignTop);
QRect freeTextRect = this->calcDisplayRect(option.rect, Qt::AlignBottom);

drawBackground(painter, myoption, index);
drawDecoration(painter, myoption, rect1, iconPixmap);
drawDisplay(painter,myoption, displayRect, contactURI);
drawDisplay(painter,myoption, freeTextRect, freeText);
drawDecoration(painter, myoption, rect2, iconPixmap2);
//drawDecoration(painter, myoption, rect3, iconPixmap2);
drawDecoration(painter, myoption, rect4, iconPixmap3);
drawFocus(painter, myoption,option.rect);

}
QRect TreeViewItemDelegate :: calcDecorationRect(QRect mainRect, int horizontalAlignment, int verticalAlignment) const
{
QRect rect;

if(horizontalAlignment == Qt::AlignLeft)
{
    if(verticalAlignment == Qt::AlignTop)
    {
        rect.setX(mainRect.x()+2);
        rect.setY(mainRect.y()+2);
        rect.setWidth(mainRect.width()/8);
        rect.setHeight((mainRect.height()/3)*2);
    }

// else if(verticalAlignment == Qt::AlignBottom)
// {
// rect.setX(mainRect.x()+ 2);
// rect.setY(mainRect.y()+ (mainRect.height()/3)*2 - 2);
// rect.setWidth(mainRect.width()/8);
// rect.setHeight(mainRect.height()/3);
// }
}
if(horizontalAlignment == Qt::AlignRight)
{
if(verticalAlignment == Qt::AlignTop)
{
rect.setX(mainRect.x() + (mainRect.width()/8)*7 - 2);
rect.setY(mainRect.y() + 2);
rect.setWidth(mainRect.width()/8);
rect.setHeight(mainRect.height()/3);
}
else if(verticalAlignment == Qt::AlignBottom)
{
rect.setX(mainRect.x() + (mainRect.width()/8)*7 - 2);
rect.setY(mainRect.y()+ (mainRect.height()/3)*2 - 2);
rect.setWidth(mainRect.width()/8);
rect.setHeight(mainRect.height()/3);
}
}
return rect;
}
QRect TreeViewItemDelegate :: calcDisplayRect(QRect mainRect, int verticalAlignment) const
{

QRect rect;
if(verticalAlignment == Qt::AlignTop)
{
    rect.setX(mainRect.x() + mainRect.width()/8 + 3 );
    rect.setY(mainRect.y() + 2);
    rect.setHeight(mainRect.height()/2 - 2);
    rect.setWidth(mainRect.width() - 2*(mainRect.width()/8));
}
else if(verticalAlignment == Qt::AlignBottom)
{
    rect.setX(mainRect.x() + mainRect.width()/8 + 3 );
    rect.setY(mainRect.y() + 2 + mainRect.height()/2);
    rect.setHeight(mainRect.height()/2 - 2);
    rect.setWidth(mainRect.width() - 2*(mainRect.width()/8));
}


return rect;

}
@