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
Forum Updated to NodeBB v4.3 + New Features

Howto set property for delegate

Scheduled Pinned Locked Moved Solved QML and Qt Quick
8 Posts 2 Posters 3.7k Views 1 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.
  • 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