Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Update: Forum Guidelines & Code of Conduct

    Solved QML itemdelegate file doesn't auto update in a TreeView

    QML and Qt Quick
    1
    2
    969
    Loading More Posts
    • 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.
    • Haitham
      Haitham last edited by Haitham

      Hello everybody
      I'm a newbie at both Qt and QML so bear with me.

      I'm having 2 separate QML files (main file and a tree delegate file), both in the resources file in my Qt application.
      The model for the tree view is written in C++ and no problem with that.

      So my problem is as follows,

      whenever I edit the delegate file, I've to rewrite the part where I call the delegate in the main file in order for the changes to take effect (i.e itemDelegate: MyTreeDelegate{}).

      here are the two qml files

      //main.qml
      import QtQuick 2.0
      import QtQuick.Controls 1.4
      import QtQuick.Controls.Styles 1.4
      import QtQuick.Window 2.2
      import MyTreeModel 1.0  //from qmlRegister in C++ code
      
      Rectangle{
          MyTreeModel
          {
              id: theModel
          }
      
          TreeView
          {
              style: TreeViewStyle    //for styling the tree
              {
                  backgroundColor: "white"
                  alternateBackgroundColor:"white"
              }
      
      
              headerVisible: false    //to hide the header
              anchors.fill: parent    //to fill rectangle
              
              model: theModel
      
              //this is the line I've to rewrite everytime I change the delegate file
              itemDelegate:  MyTreeDelegate{}
      
      
              TableViewColumn
              {
                  role: "name_role"
                  title: "Status"
              }
          }
      }
      
      import QtQuick 2.0
      import QtQuick.Controls 1.4
      
      Rectangle {
          id:baseRec
          color: "transparent"
          height: 5
          MouseArea
          {
              anchors.fill: parent
              onClicked:
              {
                  console.log("row: ",styleData.row)
                  console.log("column: ",styleData.column)
                  console.log("index: ",styleData.index)
              }
          }
      
          Text
          {
              anchors.verticalCenter: parent.verticalCenter
              text: styleData.value === undefined ? "" : styleData.value
          }
      
          Image
          {
              height: baseRec.height
              width: height
              id:rightImage
              source: "images/RedOff.png"
              anchors
              {
                  verticalCenter:baseRec.verticalCenter
                  right:baseRec.right
              }
          }
      
          Image
          {
              id:leftImage
              height: baseRec.height
              width: height
              source: "images/GreenOff.png"
              anchors
              {
                  verticalCenter:baseRec.verticalCenter
                  right:rightImage.left
              }
          }
      }
      
      

      is this a bug? I'm using Qt 5.8.0 FYI.

      Thanks in advance.

      1 Reply Last reply Reply Quote 0
      • Haitham
        Haitham last edited by

        Ok
        I've found out the solution.

        I've to capsulate my delegate in a Component QML Type as shown below

        MyTreeDelegate.qml

        Component   //must wrap rectange inside a component QML type to be called from a different file
        {
            Rectangle
            {
                id:baseRec
                color: "transparent"
                //    color: ( styleData.row % 2 == 1 ) ? "white" : "#60e6dd"
                height: 5
                //    border.color: "black"
                //    border.width: 1
                MouseArea
                {
                    anchors.fill: parent
        
                    onClicked:
                    {
                        console.log("row: ",styleData.row)
                        console.log("column: ",styleData.column)
                        console.log("index: ",styleData.index)
                    }
        
                }
        
                Text
                {
                    anchors.verticalCenter: parent.verticalCenter
                    text: styleData.value === undefined ? "" : styleData.value
                    // The branches don't have a description_role so styleData.value will be undefined
                }
        
                Image
                {
                    height: baseRec.height
                    width: height
                    id:rightImage
                    source: "images/RedOff.png"
                    anchors
                    {
                        verticalCenter:baseRec.verticalCenter
                        right:baseRec.right
                    }
                }
        
                Image
                {
                    id:leftImage
                    height: baseRec.height
                    width: height
                    source: "images/GreenOff.png"
                    anchors
                    {
                        verticalCenter:baseRec.verticalCenter
                        right:rightImage.left
                    }
                }
            }
        }
        

        and then I can call it in main.qml as shown below

        import QtQuick 2.0
        import QtQuick.Controls 1.4
        import QtQuick.Controls.Styles 1.4
        import QtQuick.Window 2.2
        import MyTreeModel 1.0  //from qmlRegister in C++ code
        
        Rectangle{
            MyTreeModel
            {
                id: theModel
            }
        
            MyTreeDelegate
            {
                id: theDelegate
            }
        
            TreeView
            {
                id: treeView
                style: TreeViewStyle    //for styling the tree
                {
                    backgroundColor: "white"
                    alternateBackgroundColor:"white"
                    //branch delegates are used for delegating the arrow on the left
                }
                //think of what to do on a double click or single click
                //think of how to delegate only specific children
        
                headerVisible: false    //to hide the header
                anchors.fill: parent    //to fill rectangle
        
                model: theModel
                onItemDelegateChanged:
                {
        //        console.log("current index: ", index)
                }
        
                itemDelegate: theDelegate
        
                TableViewColumn
                {
                    role: "name_role"
                    title: "Status"
                }
                //        TableViewColumn {
                //            role: "description_role"
                //            title: "Description"
                //        }
            }
        }
        
        1 Reply Last reply Reply Quote 0
        • First post
          Last post