Results 1 to 3 of 3

Thread: How to add table headers via delegate with rectangle?

  1. #1
    Join Date
    Apr 2021
    Posts
    6
    Qt products
    Qt5

    Default How to add table headers via delegate with rectangle?

    I have a TableView

    Qt Code:
    1. import QtQuick 2.12
    2. import QtQuick.Controls 2.12
    3.  
    4. import credentials 1.0
    5.  
    6. TableView {
    7. id: credentialsTableView
    8. property alias credentialsTableView: credentialsTableView
    9. anchors.fill: parent
    10. columnSpacing: 2
    11. rowSpacing: 2
    12. clip: true
    13.  
    14. model: SqlCredentialsModel{}
    15. delegate: Rectangle {
    16. color: "lightblue"
    17. implicitWidth: lbl_tableCell.width
    18. implicitHeight: lbl_tableCell.height
    19. Label {
    20. id: lbl_tableCell
    21. text: display
    22. }
    23. }
    24. }
    To copy to clipboard, switch view to plain text mode 


    How can I add column headers?

    Code is available in https://github.com/hstig/qt/tree/add...iteCredentials

    Thanks

  2. #2
    Join Date
    Apr 2021
    Posts
    6
    Qt products
    Qt5

    Post Re: How to add table headers via delegate with rectangle?

    More description to help understand the case.

    I want to populate a tableview with user data stored inside a SQLite DB. In the main.c I connect to DB and register the CredentialsModel as a Type:

    Qt Code:
    1. #include <QGuiApplication>
    2. #include <QQmlApplicationEngine>
    3. #include <QQmlContext>
    4. #include <QStandardPaths>
    5. #include <QSqlDatabase>
    6. #include <QSqlError>
    7. #include <QtQml>
    8.  
    9. #include "sqlcredentialsmodel.h"
    10.  
    11. static void connectToDatabase()
    12. {
    13. QSqlDatabase database = QSqlDatabase::database();
    14. if (!database.isValid()) {
    15. database = QSqlDatabase::addDatabase("QSQLITE");
    16. if (!database.isValid())
    17. qFatal("Cannot add database: %s", qPrintable(database.lastError().text()));
    18. }
    19.  
    20. const QDir writeDir = QStandardPaths::writableLocation(QStandardPaths::AppDataLocation);
    21. if (!writeDir.mkpath("."))
    22. qFatal("Failed to create writable directory at %s", qPrintable(writeDir.absolutePath()));
    23.  
    24. // Ensure that we have a writable location on all devices.
    25. const QString fileName = writeDir.absolutePath() + "/chat-database.sqlite3";
    26. qDebug()<< "file: "<<fileName;
    27. // When using the SQLite driver, open() will create the SQLite database if it doesn't exist.
    28. database.setDatabaseName(fileName);
    29. if (!database.open()) {
    30. qFatal("Cannot open database: %s", qPrintable(database.lastError().text()));
    31. QFile::remove(fileName);
    32. }
    33. }
    34.  
    35. int main(int argc, char *argv[])
    36. {
    37. QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    38.  
    39. QGuiApplication app(argc, argv);
    40.  
    41. connectToDatabase();
    42.  
    43. QQmlApplicationEngine engine;
    44. qmlRegisterType<SqlCredentialsModel>("credentials", 1, 0, "SqlCredentialsModel");
    45.  
    46. const QUrl url(QStringLiteral("qrc:/main.qml"));
    47. QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
    48. &app, [url](QObject *obj, const QUrl &objUrl) {
    49. if (!obj && url == objUrl)
    50. QCoreApplication::exit(-1);
    51. }, Qt::QueuedConnection);
    52. engine.load(url);
    53.  
    54. return app.exec();
    55. }
    To copy to clipboard, switch view to plain text mode 

    The model is implemented as following:

    sqlcredentialsmodel.h


    Qt Code:
    1. #ifndef SQLCREDENTIALSMODEL_H
    2. #define SQLCREDENTIALSMODEL_H
    3.  
    4. #include <QSqlQueryModel>
    5.  
    6. class SqlCredentialsModel : public QSqlQueryModel
    7. {
    8. public:
    9. SqlCredentialsModel(QObject *parent = 0);
    10. };
    11.  
    12. #endif // SQLCREDENTIALSMODEL_H
    To copy to clipboard, switch view to plain text mode 


    sqlcredentialsmodel.cpp


    Qt Code:
    1. #include "sqlcredentialsmodel.h"
    2.  
    3. #include <QDebug>
    4. #include <QSqlError>
    5. #include <QSqlQuery>
    6.  
    7. static void createTable()
    8. {
    9. for (auto table: QSqlDatabase::database().tables()){
    10. qDebug()<<"table "<<table;
    11. }
    12.  
    13. if (QSqlDatabase::database().tables().contains(QStringLiteral("Credentials"))) {
    14. // The table already exists; we don't need to do anything.
    15. return;
    16. }
    17.  
    18. QSqlQuery query;
    19. if (!query.exec(
    20. "CREATE TABLE IF NOT EXISTS 'Credentials' ("
    21. " 'username', 'password' TEXT NOT NULL,"
    22. " PRIMARY KEY(username)"
    23. ")")) {
    24. qFatal("Failed to query database: %s", qPrintable(query.lastError().text()));
    25. }
    26.  
    27. query.exec("INSERT INTO Credentials VALUES('bert', 'b&c' )");
    28. query.exec("INSERT INTO Credentials VALUES('emmy', 'e&c' )");
    29. query.exec("INSERT INTO Credentials VALUES('hans', 'h&c' )");
    30. }
    31.  
    32. SqlCredentialsModel::SqlCredentialsModel(QObject *parent) :
    33. {
    34. createTable();
    35.  
    36. QSqlQuery query;
    37.  
    38. if (!query.exec("SELECT * FROM Credentials"))
    39. qFatal("Contacts SELECT query failed: %s", qPrintable(query.lastError().text()));
    40.  
    41. setQuery(query);
    42. if (lastError().isValid())
    43. qFatal("Cannot set query on SqlCredentialsModel: %s", qPrintable(lastError().text()));
    44. }
    To copy to clipboard, switch view to plain text mode 

    QML is implemented as following:

    main.qml


    Qt Code:
    1. import QtQuick 2.12
    2. import QtQuick.Controls 2.5
    3.  
    4. ApplicationWindow {
    5. visible: true
    6. width: 100
    7. height: 120
    8. title: qsTr("Credentials")
    9.  
    10. SwipeView {
    11. id: swipeView
    12. anchors.fill: parent
    13.  
    14. CredentialsView{
    15. id: credentialsView
    16. }
    17. }
    18. }
    To copy to clipboard, switch view to plain text mode 


    CredentialsView.ui.qml


    Qt Code:
    1. import QtQuick 2.9
    2. import QtQuick.Controls 2.2
    3. import QtQuick.Layouts 1.3
    4.  
    5. import credentials 1.0
    6.  
    7. Page {
    8. id: page_Credentials
    9. header: Label {
    10. text: qsTr("Credentials")
    11. font.pixelSize: Qt.application.font.pixelSize
    12. padding: 10
    13. }
    14.  
    15. CredentialsTableView{
    16. anchors.fill: parent
    17. }
    18.  
    19. }
    To copy to clipboard, switch view to plain text mode 

    CredentialsTableView.ui.qml

    Qt Code:
    1. import QtQuick 2.12
    2. import QtQuick.Controls 2.12
    3.  
    4. import credentials 1.0
    5.  
    6. TableView {
    7. id: credentialsTableView
    8. property alias credentialsTableView: credentialsTableView
    9. anchors.fill: parent
    10. columnSpacing: 2
    11. rowSpacing: 2
    12. clip: true
    13.  
    14. model: SqlCredentialsModel{}
    15. delegate: Rectangle {
    16. color: "lightblue"
    17. implicitWidth: lbl_tableCell.width
    18. implicitHeight: lbl_tableCell.height
    19. Label {
    20. id: lbl_tableCell
    21. text: display
    22. }
    23. }
    24. }
    To copy to clipboard, switch view to plain text mode 

    Thanks in advance

  3. #3
    Join Date
    Apr 2021
    Posts
    6
    Qt products
    Qt5

    Default Re: How to add table headers via delegate with rectangle?

    This adds the missing headers

    CredentialsView.ui.qml

    Qt Code:
    1. import QtQuick 2.9
    2. import QtQuick.Controls 2.2
    3. import QtQuick.Layouts 1.3
    4.  
    5. import credentials 1.0
    6.  
    7. Page {
    8. id: page_Credentials
    9. header: Label {
    10. text: qsTr("Credentials")
    11. font.pixelSize: Qt.application.font.pixelSize
    12. padding: 10
    13. }
    14.  
    15. ColumnLayout{
    16. RowLayout{
    17. Rectangle{
    18. color: "lightgray"
    19.  
    20. implicitWidth: page_Credentials.width/2
    21. implicitHeight: lbl_cell_user.implicitHeight
    22. Label{
    23. id: lbl_cell_user
    24. text: "user"
    25. anchors.centerIn: parent
    26. }
    27. }
    28. Rectangle{
    29. color: "lightgray"
    30.  
    31. implicitWidth: page_Credentials.width/2
    32. implicitHeight: lbl_cell_password.height
    33. Label{
    34. id: lbl_cell_password
    35. text: "pass"
    36. anchors.centerIn: parent
    37. }
    38. }
    39. }
    40. RowLayout{
    41. CredentialsTableView{
    42. model: SqlCredentialsModel{}
    43.  
    44. implicitWidth: page_Credentials.width
    45. implicitHeight: page_Credentials.height
    46. }
    47. }
    48. }
    49. }
    To copy to clipboard, switch view to plain text mode 

    CredentialsTableView.ui.qml

    Qt Code:
    1. import QtQuick 2.12
    2. import QtQuick.Controls 2.12
    3.  
    4. import credentials 1.0
    5.  
    6. TableView {
    7. id: dbTableView
    8. columnSpacing: 5
    9. rowSpacing: 1
    10. clip: true
    11.  
    12. delegate: Rectangle{
    13. implicitWidth: dbTableView.width/2;
    14. implicitHeight: lb_cell.height;
    15. color: "lightblue"
    16. Label {
    17. id: lb_cell
    18. text: display
    19. anchors.centerIn: parent
    20. }
    21. }
    22. }
    To copy to clipboard, switch view to plain text mode 


    main.qml

    Qt Code:
    1. import QtQuick 2.12
    2. import QtQuick.Controls 2.5
    3.  
    4. ApplicationWindow {
    5. visible: true
    6. width: 100
    7. height: 120
    8. title: qsTr("Credentials")
    9.  
    10. SwipeView {
    11. id: swipeView
    12.  
    13. CredentialsView{
    14. id: credentialsView
    15. }
    16. }
    17. }
    To copy to clipboard, switch view to plain text mode 

    Code is available in https://github.com/hstig/qt/tree/add...iteCredentials

    How to get rid of following binding loops?
    qrc:/main.qml:13:9: QML Page: Binding loop detected for property "implicitWidth"
    qrc:/main.qml:13:9: QML Page: Binding loop detected for property "implicitWidth"
    qrc:/main.qml:13:9: QML Page: Binding loop detected for property "implicitHeight"
    qrc:/main.qml:13:9: QML Page: Binding loop detected for property "implicitWidth"
    qrc:/main.qml:13:9: QML Page: Binding loop detected for property "implicitWidth"
    qrc:/main.qml:13:9: QML Page: Binding loop detected for property "implicitHeight"

Similar Threads

  1. QSqlQueryModel shows empty table with correct headers
    By Charlie42 in forum Qt Programming
    Replies: 1
    Last Post: 3rd May 2021, 08:07
  2. Multiple table delegates or a single table delegate?
    By karankumar1609 in forum Qt Programming
    Replies: 2
    Last Post: 22nd August 2014, 22:28
  3. Creating diagonal table headers
    By kubark42 in forum Qt Programming
    Replies: 1
    Last Post: 11th September 2013, 14:19
  4. Replies: 0
    Last Post: 4th May 2011, 13:33
  5. How to make table headers with custom background?
    By kremuwa in forum Qt Programming
    Replies: 1
    Last Post: 14th March 2010, 17:51

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.