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. Listview grouping !
QtWS25 Last Chance

Listview grouping !

Scheduled Pinned Locked Moved QML and Qt Quick
9 Posts 3 Posters 9.2k 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.
  • J Offline
    J Offline
    Julie1986
    wrote on last edited by
    #1

    I have a code which displays user1, user 2 and user3. But when i click on user1 the parameters of other two users are also displayed. I dont want that to happen. Clikcing on user1 should display only the parameters associated with it. Kindly check my code and help me. I appreciate your time and patience. Actually I took this example for company related issues.
    @import QtQuick 1.1
    //import "check.js" as Chk

    Rectangle{

    width:400
    height:width
    
    function sortModel()
    {
        var n;
        var i;
        for (n=0; n < listModel.count; n++)
            for (i=n+1; i < listModel.count; i++)
            {
                if (listModel.get(n).id> listModel.get(i).id)
                {
                    listModel.move(i, n, 1);
                    n=0;
                }
            }
    }
    
    function fillListModel()
    {
        var n;
        listModel.clear();
        for (n=0; n &lt; xmlModel.count; n++)
        {
    
            listModel.append({"title": xmlModel.get(n).title, "pubDate":xmlModel.get(n).pubDate, "id":xmlModel.get(n).id, "param":xmlModel.get(n).param})
        }
    }
    
    
    XmlListModel {
        id: xmlModel
        query: "/rss/channel/item"
        XmlRole { name: "id"; query: "id/string()" }
        XmlRole { name: "title"; query: "title/string()" }
        XmlRole { name: "pubDate"; query: "pubDate/string()" }
        XmlRole { name: "param"; query: "param/string()" }
    
        onStatusChanged: if (status === XmlListModel.Ready) { console.log("xml read: ", count); fillListModel(); sortModel(); }
    
    }
    
    GridView{
        id:lst
        width: 180; height: 300
        model: xmlModel
        delegate: Text { text:title+ ": " + pubDate+param }
        visible:false
    }
    
    ListModel {
        id: listModel
    
    }
    

    //

    // Without grouping only with sorting
    

    // ListView{

    // model:listModel
    // width: 180; height: 300
    // delegate: Text { text:title+ ": " + pubDate+id+param}
    // }

    // to highlight the user desired component
    
    
    Component {
           id: sectionHeading
           Rectangle {
               id:rect1
               width: 50
               height:20
               color: "lightsteelblue"
    
    
               Text {
    
                   text: section
                   font.bold: true
               }
               MouseArea{
    
                   anchors.fill:parent
                   onClicked: if(listview.delegate===contactdelegate
                                      )
                                  listview.delegate=contactdelegate1
                   else
                                  listview.delegate=contactdelegate
               }
    
    
    
    
          }
       }
    
    
      Component{
    id:contactdelegate
    
    Text{
    
        text:""}
    
    
    }
    
    Component{
    id:contactdelegate1
    
    Text{
           id:text1
        text:title+param+id+pubDate
    opacity:1}
    

    }

    ListView{
       id:listview
        model:listModel
        width: 180; height: 300
        delegate:contactdelegate
        section.property: "param"
        section.criteria: ViewSection.FullString
        section.delegate: sectionHeading
    
    }
    

    }

    @

    This is the qml file and the related xml file is.

    @<?xml version="1.0" encoding="utf-8"?>
    <rss version="2.0">
    ...
    <channel>
    <item>
    <title>A blog post</title>
    <pubDate>Sat, 07 Sep 2010 10:00:01 GMT</pubDate>
    <param> user1 </param>
    <id> 1 </id>
    </item>
    <item>
    <title>A blog post</title>
    <pubDate>Sat, 07 Sep 2010 10:00:01 GMT</pubDate>
    <param> user2 </param>
    <id> 2 </id>
    </item>
    <item>
    <title>A blog post</title>
    <pubDate>Sat, 07 Sep 2010 10:00:01 GMT</pubDate>
    <param> user3 </param>
    <id> 3 </id> </item>
    <item>
    <title>A blog post</title>
    <pubDate>Sat, 07 Sep 2010 10:00:01 GMT</pubDate>
    <param> user1 </param>
    <id> 1 </id>
    </item>
    <item>
    <title>Another blog post</title>
    <pubDate>Sat, 07 Sep 2010 15:35:01 GMT</pubDate>
    <param> user2 </param>
    <id> 2 </id>
    </item>
    </channel>
    </rss>@

    1 Reply Last reply
    0
    • A Offline
      A Offline
      andre
      wrote on last edited by
      #2

      Read and understand "this":http://www.catb.org/esr/faqs/smart-questions.html#urgent please.

      1 Reply Last reply
      0
      • D Offline
        D Offline
        dicksonleong
        wrote on last edited by
        #3

        You are changing the delegate for the whole ListView. You should put the MouseArea in delegate and when onClicked(), change the text inside the delegate.

        1 Reply Last reply
        0
        • J Offline
          J Offline
          Julie1986
          wrote on last edited by
          #4

          Thanks. I will try your method too.

          I tried and it says "Invalid component body specification" . Would be nice if you could change the above code. Thanks in advance.

          I tried something like this

          @ Component{
          id:contactdelegate
          Text{
          id:text1
          width:20
          height:20
          text:""}

          MouseArea{
          anchors.fill:parent
          onClicked: text1.text=title+param+id+pubDate
          }
          
          
          }@
          
          1 Reply Last reply
          0
          • D Offline
            D Offline
            dicksonleong
            wrote on last edited by
            #5

            Use a Item to wrap it.

            @Component{
            id:contactdelegate
            Item{
            width: text1.width; height: text1.height
            Text{
            id:text1
            width:20
            height:20
            text:""
            }

               MouseArea{
               anchors.fill:parent
               onClicked: text1.text=title+param+id+pubDate
              }
            

            }
            }@

            1 Reply Last reply
            0
            • J Offline
              J Offline
              Julie1986
              wrote on last edited by
              #6

              My output is someting like this, if i include the above code its nt able to detect. I have user1 user2 and user3 as indicated in the picture on clikcing on blue rectangle i need the item with its description to be displayed.

              http://tinypic.com/r/dgthm9/6

              and

              http://tinypic.com/r/2jayrkw/6

              as of now it displays everything, i want it to display only the contents of the particular user.

              1 Reply Last reply
              0
              • J Offline
                J Offline
                Julie1986
                wrote on last edited by
                #7

                Kindly check this out! This code says: reference error: cannot find text1

                @Component {
                id: sectionHeading
                Rectangle {
                id:rect1
                width: 50
                height:20
                color: "lightsteelblue"

                           Text {
                
                               text: section
                               font.bold: true
                           }
                           MouseArea{
                
                               anchors.fill:parent
                               onClicked:text1.text=title+param+id+pubDate
                           }
                
                
                
                
                      }
                   }
                

                Component{
                id:contactdelegate
                Item{
                width:40; height: 40
                Text{
                id:text1
                width:20
                height:20
                text:""
                }

                // MouseArea{
                // anchors.fill:parent
                // onClicked: text1.text=title+param+id+pubDate
                // }
                }
                }@

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

                  You can't reference items inside a delegate from outside of it. Which is logical, as there are probably many instances of the delegate at any given time. To which one would your reference refer?

                  1 Reply Last reply
                  0
                  • J Offline
                    J Offline
                    Julie1986
                    wrote on last edited by
                    #9

                    @ Andre :

                    so what is the alternate solution for this problem. I have attached a screen shot of what is desired. How can I reference it??

                    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