Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Howto set property for delegate
QtWS25 Last Chance

Howto set property for delegate

Scheduled Pinned Locked Moved Solved QML and Qt Quick
8 Posts 2 Posters 3.6k Views
  • 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.
  • A Offline
    A Offline
    Asperamanca
    wrote on last edited by
    #1

    I'm a Qt (C++) vet, but new to QML. I'm displaying a simple model in a TableView. Some of my columns use custom delegates, and I'd like to set some properties on them:

    Delegate:

        Component
        {
            id: buttonDelegate
            Item
            {
                anchors.fill: parent
                Button
                {
                    id: actionButton
                    anchors.centerIn: parent
                    width: parent.width * 0.9
                    height: parent.height - 2
                }
            }
        }
    

    Use of delegate:

            TableViewColumn
            {
                id: startButtonColumn
                title: "someTitle"
                movable: false
                resizable: false
                width: tableView.width * 0.15
                delegate: buttonDelegate
                // I would like to set the text to the delegate
            }
    

    As per the comment, I'd like to set the text for the button within the delegate from the TableViewColumn, because I use the same delegate for multiple columns (and the button needs different texts).
    Preferably, I'd like to set the text as a top-level property of the delegate, something like:

    buttonDelegate
    {
        buttonText: "SomeText"
    }
    

    I have found a couple of posts on similar topics (e.g. on stackoverflow), but frankly, without the necessary background, I don't understand them, and they don't simply work for me through copy-paste.

    J.HilkJ 1 Reply Last reply
    0
    • A Asperamanca

      I'm a Qt (C++) vet, but new to QML. I'm displaying a simple model in a TableView. Some of my columns use custom delegates, and I'd like to set some properties on them:

      Delegate:

          Component
          {
              id: buttonDelegate
              Item
              {
                  anchors.fill: parent
                  Button
                  {
                      id: actionButton
                      anchors.centerIn: parent
                      width: parent.width * 0.9
                      height: parent.height - 2
                  }
              }
          }
      

      Use of delegate:

              TableViewColumn
              {
                  id: startButtonColumn
                  title: "someTitle"
                  movable: false
                  resizable: false
                  width: tableView.width * 0.15
                  delegate: buttonDelegate
                  // I would like to set the text to the delegate
              }
      

      As per the comment, I'd like to set the text for the button within the delegate from the TableViewColumn, because I use the same delegate for multiple columns (and the button needs different texts).
      Preferably, I'd like to set the text as a top-level property of the delegate, something like:

      buttonDelegate
      {
          buttonText: "SomeText"
      }
      

      I have found a couple of posts on similar topics (e.g. on stackoverflow), but frankly, without the necessary background, I don't understand them, and they don't simply work for me through copy-paste.

      J.HilkJ Offline
      J.HilkJ Offline
      J.Hilk
      Moderators
      wrote on last edited by
      #2

      hi, @Asperamanca

      I haven't jet touch a TableView myself, but I try to explain the principles, as I understand them, on a very simply ListView

      lets asume an array/List of strings as your model:

      ListView{
          model: ["Item1", "Item2", "Item3"]
      }
      

      and a custom delegate that as a text-property you want to set to the correlating item: You can access the current model-item via modelData

      ListView{
          model: ["Item1", "Item2", "Item3"]
      
          delegate: FancyViewItem{
               text:modelData
         }
      }
      

      A bit more complex example:
      Lets asume you create a QList<QObjects> in a cpp BackEnd and you want to create a Listview based on that List. Also let's asume QObject is a QObject derived class with the Q_PROPERTYs filePath, fileName and createdAt

      ListView{
          model: cppBackEnd.fileModel//fileModel == Q_PROPERTY(QVariant fileModel READ .... WRITE.... NOTIFY....)
      
          delegate: FancyViewItem{
               textPath: modelData.filePath
               textFileName: modelData.fileName 
               timeStamp: modelData.createdAt
         }
      }
      

      Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


      Q: What's that?
      A: It's blue light.
      Q: What does it do?
      A: It turns blue.

      A 1 Reply Last reply
      0
      • J.HilkJ J.Hilk

        hi, @Asperamanca

        I haven't jet touch a TableView myself, but I try to explain the principles, as I understand them, on a very simply ListView

        lets asume an array/List of strings as your model:

        ListView{
            model: ["Item1", "Item2", "Item3"]
        }
        

        and a custom delegate that as a text-property you want to set to the correlating item: You can access the current model-item via modelData

        ListView{
            model: ["Item1", "Item2", "Item3"]
        
            delegate: FancyViewItem{
                 text:modelData
           }
        }
        

        A bit more complex example:
        Lets asume you create a QList<QObjects> in a cpp BackEnd and you want to create a Listview based on that List. Also let's asume QObject is a QObject derived class with the Q_PROPERTYs filePath, fileName and createdAt

        ListView{
            model: cppBackEnd.fileModel//fileModel == Q_PROPERTY(QVariant fileModel READ .... WRITE.... NOTIFY....)
        
            delegate: FancyViewItem{
                 textPath: modelData.filePath
                 textFileName: modelData.fileName 
                 timeStamp: modelData.createdAt
           }
        }
        
        A Offline
        A Offline
        Asperamanca
        wrote on last edited by
        #3

        @J.Hilk said in Howto set property for delegate:

        FancyViewItem

        Thanks for your reply.
        Could I re-use FancyViewItem in multiple columns? I want to avoid defining a lengthy delegate multiple times, with 90 % identical definition, and only one or two properties that differ by column.

        J.HilkJ 1 Reply Last reply
        0
        • A Asperamanca

          @J.Hilk said in Howto set property for delegate:

          FancyViewItem

          Thanks for your reply.
          Could I re-use FancyViewItem in multiple columns? I want to avoid defining a lengthy delegate multiple times, with 90 % identical definition, and only one or two properties that differ by column.

          J.HilkJ Offline
          J.HilkJ Offline
          J.Hilk
          Moderators
          wrote on last edited by
          #4

          @Asperamanca said in Howto set property for delegate:

          Could I re-use FancyViewItem in multiple columns? I want to avoid defining a lengthy delegate multiple times, with 90 % identical definition, and only one or two properties that differ by column.

          sure, thats what I usually do.

          I create an "external" .qml file with the name FancyViewItem

          //FancyViewItem.qml
          import QtQuick 2.9
          
          Item{
               property text: "This is a text property"
               .....
          }
          

          as long as your qml file is in the same directory as the main file you can simply write

          FancyViewItem{
          
          }
          

          to create a new "instance" of that item

          if its in a different directory, you'll have to import that directory

          import "qrc:/qml/FancyViewItemDir"
          

          make sure you use a Capital letter in the beginning of your *.qml file!!!!


          Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


          Q: What's that?
          A: It's blue light.
          Q: What does it do?
          A: It turns blue.

          1 Reply Last reply
          0
          • A Offline
            A Offline
            Asperamanca
            wrote on last edited by
            #5

            Thanks again.
            Does the filename have to match the item name? Because that runs counter to the naming conventions I follow. Or is there a way I define the the name 'FancyViewItem' somewhere within the file, and still import and use it?

            J.HilkJ 1 Reply Last reply
            0
            • A Asperamanca

              Thanks again.
              Does the filename have to match the item name? Because that runs counter to the naming conventions I follow. Or is there a way I define the the name 'FancyViewItem' somewhere within the file, and still import and use it?

              J.HilkJ Offline
              J.HilkJ Offline
              J.Hilk
              Moderators
              wrote on last edited by J.Hilk
              #6

              @Asperamanca said in Howto set property for delegate:

              Thanks again.
              Does the filename have to match the item name? Because that runs counter to the naming conventions I follow. Or is there a way I define the the name 'FancyViewItem' somewhere within the file, and still import and use it?

              Ok, here's where my knowledge ends x)

              But, as far as I know:

              • Filename = Itemname (-.qml)

              and

              • you would have to copy&past the definition everytime if you do it inside a single file.

              Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


              Q: What's that?
              A: It's blue light.
              Q: What does it do?
              A: It turns blue.

              1 Reply Last reply
              0
              • A Offline
                A Offline
                Asperamanca
                wrote on last edited by Asperamanca
                #7

                So I solved the initial problem:

                Delegate in separate file lpad_buttondelegate.qml:

                Item
                {
                    anchors.fill: parent
                    Button
                    {
                        id: actionButton
                        anchors.centerIn: parent
                        width: parent.width * 0.9
                        text: buttonText
                    }
                }
                

                Use of delegate:

                        TableViewColumn
                        {
                            id: startButtonColumn
                            title: "SomeTitle"
                            movable: false
                            resizable: false
                            width: tableView.width * 0.15
                            delegate: Loader
                            {
                                property string buttonText: "Start"
                                source: "lpad_buttondelegate.qml"
                            }
                        }
                

                New problems abound...but not in this thread.

                J.HilkJ 1 Reply Last reply
                0
                • A Asperamanca

                  So I solved the initial problem:

                  Delegate in separate file lpad_buttondelegate.qml:

                  Item
                  {
                      anchors.fill: parent
                      Button
                      {
                          id: actionButton
                          anchors.centerIn: parent
                          width: parent.width * 0.9
                          text: buttonText
                      }
                  }
                  

                  Use of delegate:

                          TableViewColumn
                          {
                              id: startButtonColumn
                              title: "SomeTitle"
                              movable: false
                              resizable: false
                              width: tableView.width * 0.15
                              delegate: Loader
                              {
                                  property string buttonText: "Start"
                                  source: "lpad_buttondelegate.qml"
                              }
                          }
                  

                  New problems abound...but not in this thread.

                  J.HilkJ Offline
                  J.HilkJ Offline
                  J.Hilk
                  Moderators
                  wrote on last edited by
                  #8

                  @Asperamanca
                  great, keep on coding! and good luck ;-)

                  Because I noticed increased reminders about this, don't forget to set the topic to solved :)


                  Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                  Q: What's that?
                  A: It's blue light.
                  Q: What does it do?
                  A: It turns blue.

                  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