Display several roles in one column of TableView

Question

I have a SQLite 3 database with 4 columns and QML code with TableView that displays it:

TableView {
    id: table
    ...

    TableViewColumn {
        role: "name"            
        width: 275
    }
    TableViewColumn {
        role: "surname"
        width: 300
    }
    TableViewColumn {
        role: "phone"
        width: 575
    }
    TableViewColumn {
        role: "ip_address"
        width: 525
    }
    model: abonents
}

It works fine, but I need to display the first two roles, name and surname, as a unique column in TableView.

Here is the code for my model and the main.

abonentstable.h:

#ifndef ABONENTSTABLE
#define ABONENTSTABLE

#include <QObject>
#include <QSqlQueryModel>

class AbonentsSqlModel : public QSqlQueryModel
{
    Q_OBJECT

public:
    explicit AbonentsSqlModel(QObject *parent = 0);

    void setQuery(const QString &query, const QSqlDatabase &db = QSqlDatabase());
    void setQuery(const QSqlQuery &query);
    QVariant data(const QModelIndex &index, int role) const;
    QHash<int, QByteArray> roleNames() const { return m_roleNames; }

signals:

public slots:

private:
    void generateRoleNames();
    QHash<int, QByteArray> m_roleNames;
};

#endif // ABONENTSTABLE

dbconnection.cpp:

#include "abonentstable.h"

#include <QSqlRecord>
#include <QSqlField>

AbonentsSqlModel::AbonentsSqlModel(QObject *parent) :
    QSqlQueryModel(parent)
{
    QSqlDatabase db = QSqlDatabase::addDatabase("QSQLITE");
    db.setDatabaseName("data_base.sqlite");
    db.open();
}

void AbonentsSqlModel::setQuery(const QString &query, const QSqlDatabase &db)
{
    QSqlQueryModel::setQuery(query, db);
    generateRoleNames();
}

void AbonentsSqlModel::setQuery(const QSqlQuery & query)
{
    QSqlQueryModel::setQuery(query);
    generateRoleNames();
}

void AbonentsSqlModel::generateRoleNames()
{
    m_roleNames.clear();
    for( int i = 0; i < record().count(); i ++) {
        m_roleNames.insert(Qt::UserRole + i + 1, record().fieldName(i).toUtf8());
    }
}

QVariant AbonentsSqlModel::data(const QModelIndex &index, int role) const
{
    QVariant value;

    if(role < Qt::UserRole) {
        value = QSqlQueryModel::data(index, role);
    }

    else {
        int columnIdx = role - Qt::UserRole - 1;
        QModelIndex modelIndex = this->index(index.row(), columnIdx);
        value = QSqlQueryModel::data(modelIndex, Qt::DisplayRole);
    }

    return value;
}

main.cpp:

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include <QVariant>
#include <QSql>
#include <QSqlQueryModel>
#include <QObject>
#include "abonentstable.h"


int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;

    AbonentsSqlModel *abonentsSqlModel = new AbonentsSqlModel(0);
    abonentsSqlModel->setQuery("SELECT * FROM abonents");

    QQmlContext *context = engine.rootContext();
    context->setContextProperty("abonents", abonentsSqlModel);
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}

Answer 1

I think you could join both values using the delegate component.

In your case:

TableView {
    id: table
    ...

    TableViewColumn {           
        width: 575
        delegate: Text { text: model.name + " "  + model.surname }
    }       
    TableViewColumn {
        role: "phone"
        width: 575
    }
    TableViewColumn {
        role: "ip_address"
        width: 525
    }
    model: abonents
}

Here you have another example, just for testing if you want to work with it. The example is based on this Qt example.

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}

main.qml

import QtQuick 2.2
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

ApplicationWindow {
    id: window
    visible: true
    title: "Table View Example"

    TableView {
        TableViewColumn {
            role: "title"
            title: "Title"
            width: 100
        }
        TableViewColumn {
            role: "author"
            title: "Author"
            width: 100
        }

        TableViewColumn{
            width: 300
            delegate: Text { text: model.title + " "  + model.author }
        }

        TableViewColumn{
            width: 300
            delegate: Text {
                text: model.title + " "  + model.author
                font.family: "Courier New"
                font.pixelSize: 18
                color: "red"
            }
        }

        model: libraryModel

        ListModel {
            id: libraryModel
            ListElement {
                title: "A Masterpiece"
                author: "Gabriel"
            }
            ListElement {
                title: "Brilliance"
                author: "Jens"
            }
            ListElement {
                title: "Outstanding"
                author: "Frederik"
            }
        }
    }

}