Listview grouping !



  • 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>@





  • 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.



  • 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
    }
    
    
    }@


  • 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
      }
    

    }
    }@



  • 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.



  • 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
    // }
    }
    }@



  • 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?



  • @ 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??


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.