Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Custom QStyledItemDelegate to customize apperence of QListView with a SQLModel under the hood
Forum Updated to NodeBB v4.3 + New Features

Custom QStyledItemDelegate to customize apperence of QListView with a SQLModel under the hood

Scheduled Pinned Locked Moved Solved General and Desktop
qt c++
33 Posts 4 Posters 6.5k Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • SGaistS Offline
    SGaistS Offline
    SGaist
    Lifetime Qt Champion
    wrote on last edited by
    #7

    Can you show an example of chopped off text ?

    Interested in AI ? www.idiap.ch
    Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

    1 Reply Last reply
    0
    • A Offline
      A Offline
      Andrea_Venturelli
      wrote on last edited by
      #8

      You can see it directly from the screen-shot above where the fifth comment-box has the text “Bentley never ever got” and is missing the word “problem” as you can see in the table widget where it displays the full data for reference and debugging purposes.

      on top of that I have trouble to achieve a editor modification on the comment, displayed:

      • On double clicking the comment-box the “edit-mode is triggered
      • the edit mode, simply change the background color and should allow the user to edit the “body_text” (example.. the bantley never ever got problems” in maybe “Bentley should have A/C checked” )
        but I’m stuck trying to thinking about how can I place a QTextEdit widget to place over the body for allowing text modification..
        I tried to create a QTextEdit widget in the createEditorWidget method of the custom class that subclass QStyledItem but how I draw it over the CommentsWidget?
      Pl45m4P 1 Reply Last reply
      0
      • A Andrea_Venturelli

        You can see it directly from the screen-shot above where the fifth comment-box has the text “Bentley never ever got” and is missing the word “problem” as you can see in the table widget where it displays the full data for reference and debugging purposes.

        on top of that I have trouble to achieve a editor modification on the comment, displayed:

        • On double clicking the comment-box the “edit-mode is triggered
        • the edit mode, simply change the background color and should allow the user to edit the “body_text” (example.. the bantley never ever got problems” in maybe “Bentley should have A/C checked” )
          but I’m stuck trying to thinking about how can I place a QTextEdit widget to place over the body for allowing text modification..
          I tried to create a QTextEdit widget in the createEditorWidget method of the custom class that subclass QStyledItem but how I draw it over the CommentsWidget?
        Pl45m4P Offline
        Pl45m4P Offline
        Pl45m4
        wrote on last edited by
        #9

        @Andrea_Venturelli

        Hi, what about implementing

        QWidget* createEditor(QWidget *parent, const QStyleOptionViewItem &option, const QModelIndex &index) const override
        {
            return new QTextEdit(parent);
        }
        

        from QStyleItemDelegate?

        • https://doc.qt.io/qt-6/qstyleditemdelegate.html#createEditor

        Where is the TextEdit shown then?


        If debugging is the process of removing software bugs, then programming must be the process of putting them in.

        ~E. W. Dijkstra

        1 Reply Last reply
        0
        • A Offline
          A Offline
          Andrea_Venturelli
          wrote on last edited by
          #10

          thanks @Pl45m4 for the reply , I appreciate it so much, at the moment i don’t have access to the code in my working’s pc until Monday, but what I have in mind (theoretically speaking), after the list view receive a double-click on an item, the EditMode::edit will be passed to the widget paint event responsible for drawing the commentsWidget.
          after that i want to replace the hard-coded text of the body with a functional and editable QTextEdit that contains the body text which can be taken from the member variable m_body_comment.

          when the return key is pressed, the QStyledItem will emit the EditingFinished signal and clode the editor.

          I hope to be able to express clearly my plan, if not let me know

          1 Reply Last reply
          0
          • SGaistS Offline
            SGaistS Offline
            SGaist
            Lifetime Qt Champion
            wrote on last edited by
            #11

            It's a two step operation:

            1. createEditor
            2. setEditorData
              With the second you can set whatever is appropriate in the editor from your model.

            Interested in AI ? www.idiap.ch
            Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

            1 Reply Last reply
            0
            • A Offline
              A Offline
              Andrea_Venturelli
              wrote on last edited by
              #12

              @SGaist you are completly right, and I was confused following along the StarDelegate example that is diffrent from what I need.

              So I adjust the EditorWidget with is own UI and the QPlainTextEdit, I was trying to test it but i notice that the "QStyledItemDelegate::createEditor()" is never called. I check online and the suggestion is to check the item's flags, so I did and the result is: "QFlagsQt::ItemFlag(ItemIsSelectable|ItemIsEnabled|ItemNeverHasChildren)".

              As expected, the Items are missing the "isEditable" flags but I think there is not a direct way to modify ALL the item's flags at once from the QListView (at least from what I red).

              Is my only choise left, to subclass QListView and re-implement the ::flags() method ?

              this is my current basic setup in the main window for the default QListView:

                 // lst_vw rappresent the QListView placed in the UI file
                  ui->lst_vw->setItemDelegate( new CommentListItem );
                  ui->lst_vw->setEditTriggers(QAbstractItemView::EditTrigger::DoubleClicked);
              
                  ui->lst_vw->setModel(_m_model);
              
              I already learn that this code inside MainWindow's constructor isn't enough.. what I'm asking is: Is it possible to set the editable flags without sub-classing the QListView and re-implement flags() ?
              JonBJ 1 Reply Last reply
              0
              • SGaistS Offline
                SGaistS Offline
                SGaist
                Lifetime Qt Champion
                wrote on last edited by
                #13

                Usually this is done at the model level. Are you using one of the QSql models ?

                Interested in AI ? www.idiap.ch
                Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

                1 Reply Last reply
                0
                • A Andrea_Venturelli

                  @SGaist you are completly right, and I was confused following along the StarDelegate example that is diffrent from what I need.

                  So I adjust the EditorWidget with is own UI and the QPlainTextEdit, I was trying to test it but i notice that the "QStyledItemDelegate::createEditor()" is never called. I check online and the suggestion is to check the item's flags, so I did and the result is: "QFlagsQt::ItemFlag(ItemIsSelectable|ItemIsEnabled|ItemNeverHasChildren)".

                  As expected, the Items are missing the "isEditable" flags but I think there is not a direct way to modify ALL the item's flags at once from the QListView (at least from what I red).

                  Is my only choise left, to subclass QListView and re-implement the ::flags() method ?

                  this is my current basic setup in the main window for the default QListView:

                     // lst_vw rappresent the QListView placed in the UI file
                      ui->lst_vw->setItemDelegate( new CommentListItem );
                      ui->lst_vw->setEditTriggers(QAbstractItemView::EditTrigger::DoubleClicked);
                  
                      ui->lst_vw->setModel(_m_model);
                  
                  I already learn that this code inside MainWindow's constructor isn't enough.. what I'm asking is: Is it possible to set the editable flags without sub-classing the QListView and re-implement flags() ?
                  JonBJ Offline
                  JonBJ Offline
                  JonB
                  wrote on last edited by JonB
                  #14

                  @Andrea_Venturelli
                  Qt::ItemFlags, including Qt::ItemIsEditable and the flags() method, come from the model, not from the view. So I don't know why you are thinking of subclassing QListView, it does not store item flags or have a flags() method to override.

                  So you need to change what the model returns. Derive from QAbstractItemModel (or one of its existing derivations) and OR-in the ItemIsEditable to make the model editable. https://doc.qt.io/qt-6/qabstractitemmodel.html#subclassing

                  To enable editing in your model, you must also implement setData(), and reimplement flags() to ensure that ItemIsEditable is returned.

                  If you were using a QListWidget which has QListWidgetItems you could call QListWidgetItem::setFlags() to change an item's flags. However that is a "layer" added by QListWidget to the QListView you have. Internally it is presumably implemented by QListWidget storing values to return from its model's flags().

                  For SQL stuff you should find that QSqlQueryModel returns non-editable flags (cannot edit items returned from a query), unless you subclass it. While QSqlTableModel returns editable flags (can edit items stored in a table). You may want to subclass those, it might also be possible to interpose a (sub-classed) QAbstractProxyModel where you override flags() between your view and the SQL model.

                  All ways round the one thing you do not need to do is change the QListView :)

                  1 Reply Last reply
                  0
                  • A Offline
                    A Offline
                    Andrea_Venturelli
                    wrote on last edited by
                    #15

                    ahaha @JonB you are a legend, and I have a lot to study in order to understand very well the Model\View stuffs.

                    But bised that, you were right about the QSqlTableModel, and changing the model from QSqlQueryModel to it, "kinda worked"
                    Now (without trying to subclass anything) I got only the first item editable, and the others do not flinch.

                    screenshot showing the first item is editable:
                    image.png

                    based on yours experience, which approach do you think is better and more elegant to resolve the problem (the problem is obviously my ignorance :) )?

                    JonBJ 1 Reply Last reply
                    0
                    • SGaistS Offline
                      SGaistS Offline
                      SGaist
                      Lifetime Qt Champion
                      wrote on last edited by
                      #16

                      The Query Model Example shows how to make a QSqlQueryModel editable.

                      Interested in AI ? www.idiap.ch
                      Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

                      1 Reply Last reply
                      0
                      • A Andrea_Venturelli

                        ahaha @JonB you are a legend, and I have a lot to study in order to understand very well the Model\View stuffs.

                        But bised that, you were right about the QSqlTableModel, and changing the model from QSqlQueryModel to it, "kinda worked"
                        Now (without trying to subclass anything) I got only the first item editable, and the others do not flinch.

                        screenshot showing the first item is editable:
                        image.png

                        based on yours experience, which approach do you think is better and more elegant to resolve the problem (the problem is obviously my ignorance :) )?

                        JonBJ Offline
                        JonBJ Offline
                        JonB
                        wrote on last edited by JonB
                        #17

                        @Andrea_Venturelli said in Custom QStyledItemDelegate to customize apperence of QListView with a SQLModel under the hood:

                        it, "kinda worked"
                        Now (without trying to subclass anything) I got only the first item editable, and the others do not flinch.

                        I'm not sure what you're saying. From a QSqlTableModel you should be able to edit any/all columns, e.g. in a QTableView, provided there is nothing "special" about their definitions. Your QListView is only going to show/edit one column. Are you saying you have what you want or something else is a problem?

                        If what you want to do is edit rows/columns in a SQL table QSqlTableModel should do fine. I think you only would want an editable QSqlQueryModel instead in certain specialised circumstances.

                        Don't forget there are two possibilities for presenting a UI to edit columns in tables. In one case the user does the edits "in situ" on items in the QTableView, by clicking on them there. This may indeed be what you want. But sometimes you might want to offer a "master-detail" view, where the user clicks on a row in the table view to read whichever editable fields into their own dedicated widgets not sitting on the table view. If you want that Qt offers QDataWidgetMapper. Just so you are aware.

                        1 Reply Last reply
                        0
                        • A Offline
                          A Offline
                          Andrea_Venturelli
                          wrote on last edited by Andrea_Venturelli
                          #18

                          @JonB
                          I have a Sql model with all the informations needed to display the custom item inside a list view.

                          the normal QStyledItemDelegate draw a rectangle with 3 labels (taken from the SqlModel):

                            1. the string rappresenting the date when the message was first posted
                            1. [optional] a string rappresenting the date when the “body” last modification occured (also taken from the Sql model, a empty string is provided if the comment was never edited before)
                            1. the body containing a description about the problem or whatever (also present in the QSqlModel inside its specific column)

                          When the user double-click the comment he wants to modify, the createEditor() will provide the same data as before (post_date, post_modification_date if available, and the body text) but this time the body_text is not a label or a drawn text but it is a QPlainTextEdit.

                          I install a filterEvent on the QPlainTextEdit so when the user presses “Ctrl+Return” it emit a CommitAndCloseEditor signal to tell Qt to destroy the editor and save the data to the model (olso adding or updating the post_modified_date).

                          every rectangle rappresented inside the listView corresponds to a row of the model.

                          In the screenshot I posted, the first item , when double-clicked, work as expected and the Editor with the QPlainTextEdit. But if I try to do the same with the second, third and so on, the Editor don’t show up.

                          that’s all for the moment

                          JonBJ 1 Reply Last reply
                          0
                          • A Andrea_Venturelli

                            @JonB
                            I have a Sql model with all the informations needed to display the custom item inside a list view.

                            the normal QStyledItemDelegate draw a rectangle with 3 labels (taken from the SqlModel):

                              1. the string rappresenting the date when the message was first posted
                              1. [optional] a string rappresenting the date when the “body” last modification occured (also taken from the Sql model, a empty string is provided if the comment was never edited before)
                              1. the body containing a description about the problem or whatever (also present in the QSqlModel inside its specific column)

                            When the user double-click the comment he wants to modify, the createEditor() will provide the same data as before (post_date, post_modification_date if available, and the body text) but this time the body_text is not a label or a drawn text but it is a QPlainTextEdit.

                            I install a filterEvent on the QPlainTextEdit so when the user presses “Ctrl+Return” it emit a CommitAndCloseEditor signal to tell Qt to destroy the editor and save the data to the model (olso adding or updating the post_modified_date).

                            every rectangle rappresented inside the listView corresponds to a row of the model.

                            In the screenshot I posted, the first item , when double-clicked, work as expected and the Editor with the QPlainTextEdit. But if I try to do the same with the second, third and so on, the Editor don’t show up.

                            that’s all for the moment

                            JonBJ Offline
                            JonBJ Offline
                            JonB
                            wrote on last edited by JonB
                            #19

                            @Andrea_Venturelli
                            I guess start by verifying whether the table view is seeing the ItemIsEditable flag for items when you double click (or whatever you have set) to edit them. Since that's talking about editing in place in a QTableView I don't really see how that has anything to do with whatever you are doing with the QListView. Or maybe you don't want cells editable in the QTableView. Or maybe you want clicking in a cell in any column to invoke editing in the QListView. I really don't know.

                            In the screenshot I posted, the first item , when double-clicked, work as expected and the Editor with the QPlainTextEdit. But if I try to do the same with the second, third and so on, the Editor don’t show up.

                            First, second and third what?? What's an "item"? Are you talking about coulmns or rows or what? It would be a lot clearer if you stated this sort of thing.

                            UPDATE
                            Oh, I think your "items" are lines inside the List Item delegate, each of which corresponds to a column in the table view? So to edit columns within one row in the database. And you are having problems with which item you click and getting into the right edit. Or something like that. Quite outside of anything I have done. I just know about columns/row/cell editing, with or without delegates, of a table model in a QTableView.

                            1 Reply Last reply
                            0
                            • A Offline
                              A Offline
                              Andrea_Venturelli
                              wrote on last edited by
                              #20

                              Sorry @JonB I do not repeat an important point that I specified at the very early posts.

                              the table you see on the right is ONLY FOR DEBUG, on the final widget will only exist the “listView” with the custom delegate.
                              the table is only needed for me to troubleshoot potential errors and for the other here helping me understand what was given to the ListView!

                              all the window is a test for develop the listView. it will be a stand alone widget where under it I’ll add a lineEdit to add new comments to the ListView.
                              THE TABLE IS ONLY FOR REFERENCE!

                              Sorry if was not clear from the beginning

                              JonBJ 1 Reply Last reply
                              0
                              • A Andrea_Venturelli

                                Sorry @JonB I do not repeat an important point that I specified at the very early posts.

                                the table you see on the right is ONLY FOR DEBUG, on the final widget will only exist the “listView” with the custom delegate.
                                the table is only needed for me to troubleshoot potential errors and for the other here helping me understand what was given to the ListView!

                                all the window is a test for develop the listView. it will be a stand alone widget where under it I’ll add a lineEdit to add new comments to the ListView.
                                THE TABLE IS ONLY FOR REFERENCE!

                                Sorry if was not clear from the beginning

                                JonBJ Offline
                                JonBJ Offline
                                JonB
                                wrote on last edited by
                                #21

                                @Andrea_Venturelli
                                Yeah, that was my misunderstanding.

                                You have a delegate which shows all the "columns" in one layout at different places. So won't you have to detect where user clicked to decide which "column" to edit?

                                1 Reply Last reply
                                0
                                • A Offline
                                  A Offline
                                  Andrea_Venturelli
                                  wrote on last edited by Andrea_Venturelli
                                  #22

                                  not column , I go by row
                                  every row is a record to my custom item in the ListView

                                  id | body_text | post_date | modified_post_dt
                                  1 basic text 12/02/2024 12/03/2024

                                  displayed as:
                                  —————————-

                                  12/02/2024
                                  12/03/2024

                                  basic text

                                  ——————————

                                  JonBJ 1 Reply Last reply
                                  0
                                  • A Andrea_Venturelli

                                    not column , I go by row
                                    every row is a record to my custom item in the ListView

                                    id | body_text | post_date | modified_post_dt
                                    1 basic text 12/02/2024 12/03/2024

                                    displayed as:
                                    —————————-

                                    12/02/2024
                                    12/03/2024

                                    basic text

                                    ——————————

                                    JonBJ Offline
                                    JonBJ Offline
                                    JonB
                                    wrote on last edited by JonB
                                    #23

                                    @Andrea_Venturelli
                                    Yes I get that now. One list element shows all the columns in a database row, And you don't care where inside that user clicks because you only allow editing the comment column.

                                    So what you are saying is that the first row of the model is editable via the first item in the list view but the second is not, right? :) Then start by printing out the flags() for model index (row) 0 and 1 to verify the latter has ItemIsEditable?

                                    1 Reply Last reply
                                    0
                                    • A Offline
                                      A Offline
                                      Andrea_Venturelli
                                      wrote on last edited by
                                      #24

                                      exactly ! you get it right ahah
                                      I printed the flags and the first give me “isEditable” with all the rest usual thinks (selectable, enabled, nochild)
                                      but all the others don’t have it.. this looks strange to me. I’ll investigate deeper soon and I’ll post if I find something interesting

                                      JonBJ 1 Reply Last reply
                                      0
                                      • A Andrea_Venturelli

                                        exactly ! you get it right ahah
                                        I printed the flags and the first give me “isEditable” with all the rest usual thinks (selectable, enabled, nochild)
                                        but all the others don’t have it.. this looks strange to me. I’ll investigate deeper soon and I’ll post if I find something interesting

                                        JonBJ Offline
                                        JonBJ Offline
                                        JonB
                                        wrote on last edited by
                                        #25

                                        @Andrea_Venturelli
                                        That comes from the model's flags() implementation. Either you have done something there for row #0 but not others, or if you are saying this is directly the QSqlTableModel then I don't see why it would return different values per row.

                                        1 Reply Last reply
                                        0
                                        • A Offline
                                          A Offline
                                          Andrea_Venturelli
                                          wrote on last edited by
                                          #26

                                          @JonB , @SGaist after a little more debug this is what I noticed:

                                            1. the first item I DOUBLE-CLICK (editor trigger for modification) no matter if it was the first ListStyledItemDelegate rappresented in the ListView, the second, the third or the n_th element, became editable and remain editable. After that, all the others items flags are as default ( Selectable and Editable)

                                          as you can see, the fourth item in the list is editable, because it was the first I double clicked.
                                          If I close the application and run it again and double-clicking any other item first, it will be editable and the fourth is only selectable..
                                          021ec95d-3069-43fc-9880-0d447f3d235d-image.png

                                            1. after the body_text being changed, and the key Ctrl+Return being pressed (used for trigger CommitAndClose editor) the method "QStyledItemDelegate::setModelData( param1, param2, param3) doesn't set the new body text correctly as shown here:bitmap.png
                                          void CommentListItem::setModelData( QWidget *editor, QAbstractItemModel *model, const QModelIndex &index ) const
                                          {
                                              if ( index.siblingAtColumn(2).data().canConvert<QString>() )
                                              {
                                                  qDebug() << "\n\t[::setModelData()] being called..";  \\ print_1
                                          
                                                  CommentEditor* cm_editor = qobject_cast<CommentEditor*>(editor);
                                                  auto cmm_wdg = cm_editor->commentWidget();
                                                  auto body_txt = cmm_wdg.bodyText();
                                          
                                                  if ( cm_editor->bodyText() != body_txt )
                                                  {
                                                      qDebug() << "\t[::setModelData()--> body_text different detected] inside if call.."; \\ print_2
                                          
                                                      /* generate the edited_mess_date */
                                                      QDateTime time_now = QDateTime::currentDateTime();
                                                      auto edited_mess_date = QString("Last Modification: ");
                                                      edited_mess_date += time_now.toString("ddd, MMM dd HH:mm");
                                          
                                                      qDebug() << "\t - 'edited_mess_date' = " << edited_mess_date; \\ print_3
                                          
                                                      /* update the model */
                                                      qDebug() << "index.siblingAtColumn(4):\t" << index.siblingAtColumn(4);  \\ print_4
                                                      qDebug() << "index.siblingAtColumn(5):\t" << index.siblingAtColumn(5);  \\ print_5
                                                      model->setData( index.siblingAtColumn(4), QVariant::fromValue( body_txt ) );
                                                      model->setData( index.siblingAtColumn(5), QVariant::fromValue( edited_mess_date ) );
                                                  }
                                              }
                                          }
                                          

                                          the prints are:

                                          Ctrl + Return keys detected
                                          committing editor...
                                          [::setModelData()] being called.. <------- print_1

                                          [::setModelData()--> body_text different detected] inside if call..    <------- print_2
                                          
                                           - 'edited_mess_date' =  "Last Modification: Tue, Nov 05 09:30"  <------- print_3
                                          

                                          index.siblingAtColumn(4): QModelIndex(2,4,0x0,QSqlTableModel(0x23a1bceac10)) <------- print_4
                                          index.siblingAtColumn(5): QModelIndex(2,5,0x0,QSqlTableModel(0x23a1bceac10)) <------- print_5

                                          JonBJ 1 Reply Last reply
                                          0

                                          • Login

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Categories
                                          • Recent
                                          • Tags
                                          • Popular
                                          • Users
                                          • Groups
                                          • Search
                                          • Get Qt Extensions
                                          • Unsolved