Listview grouping !

[Julie1986]

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

[andre]

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

[dicksonleong]

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.

[Julie1986]

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
}


}@

[dicksonleong]

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
  }

}
}@

[Julie1986]

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.

[Julie1986]

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

[andre]

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?

[Julie1986]

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