Overlapping Delegate in listview

[dmcr]

you could :

give an id to your ListView like @id : idLV@

replace your onClicked: if(shortview.state.....

by
@state : index==idLV.isCurrentItem ? 'Details' : 'shortview' @

In the initial code the state of the first clicked element is not updated when you clicked on a another one.

Edit
obviously :)
@ onClicked: state = idLV.isCurrentItem ? 'Details' : 'shortview'@

[tapadar]

The code you gave as an example is too long for people to read and reply. If I have understood correctly thge problem indicated in the first comment, then here is a simple solution. However, I admit this could be done in multiple ways.
@
import QtQuick 2.0

Rectangle{
id:mainRect
width:400; height:width

function showActionList(mousX, mousY){
    if(actionList.opacity>0){
        console.log("visible");
        mainRect.hideActionList();
    }

    actionList.x = mousX; actionList.y = mousY;
    actionList.opacity = 1;
}

function hideActionList(){
    actionList.opacity = 0;
}

Timer {
    interval: 50; running: false; repeat: false
    onTriggered: mainRect.hideActionList();
}

ListModel{
    id: mainlistModel
    ListElement{ title:"One";pubDate:"Aug"; param:" 2010" }
    ListElement{ title:"Two";pubDate:"Sep"; param:" 2011" }
    ListElement{ title:"Three";pubDate:"Oct"; param:" 2012" }
}

ListView{
    id:mainListView
    anchors.fill: parent
    model: mainlistModel
    delegate: Rectangle{
        width: parent.width; height: 40;
        Text {id:txt; anchors.centerIn: parent; text:title+ ": " + pubDate+param }
        Rectangle{ anchors{ top:txt.bottom; horizontalCenter: parent.Center }width: parent.width - 2; height: 1; color: "black"}
        MouseArea{
            anchors.fill:parent
            onClicked: mainRect.showActionList(mouseX,mouseY);
        }
    }
}

ListModel {
    id: listModel
    ListElement{action:"View"}
    ListElement{action:"Edit"}
    ListElement{action:"Delete"}
}

Component {
    id: actionDelegate
    Rectangle{
        width: 40; height: 30; radius: 3
        border{width: 2; color: "black"}
        Text{id:dText;anchors.centerIn: parent; text:action}
    }
}

ListView{
    id: actionList
    model:listModel
    width: 180; height: 300
    delegate:  actionDelegate
    opacity: 0
}

}
@

[ReshmaS]

@dmcr:

MouseArea {
id:marea
anchors.fill:parent
onClicked: state.index===idLV.isCurrentItem ? 'Details' : 'shortview'

        }@

I gave a name to my listview

Now nothing is happening onClicked event.

[dmcr]

try
@ MouseArea {
id:marea
anchors.fill:parent
onClicked: state = index==idLV.isCurrentItem ? 'Details' : 'shortview'

        }@

Edit
or obviously :)
@ onClicked: state = index==idLV.currentIndex ? 'Details' : 'shortview'@

[ReshmaS]

@dmcr. still nothing appears.:(

[ReshmaS]

can i upload the project file, will tat be easier??

[dmcr]

The code you gave is a little too long.
Try with a simple example, the shortest ( without sorting and with fewer text for example, etc...), then you can fix the bug.

[ReshmaS]

OK will try that. Here is the file if you have time kindly go through this.

Thanks..

[dmcr]

I will try if you give some clean code.

[ReshmaS]

http://www.2shared.com/file/-KWQrl3Z/xml_view.html

Cleaned up my code mate. Thanks. Iwill also try to do it with simple code.

[dmcr]

here it is mate

@import QtQuick 1.1

Rectangle{

width:400
height:width
property real ropacity:0

XmlListModel {
    id: xmlModel

    source:"example_grouping.xml"

    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 elements read: ", count); fillListModel(); sortModel(); }
}

Component {
    id: sectionHeading
    Rectangle {
        id:rect1
        width: 50
        height:18
        color: "lightgrey"

        Text {
            text: section
            font.bold: true
        }
    }
}

Component {
    id: mainDelegate

    Item {
        id: shortview
        property real detailsOpacity : 0
        width: 100
        height: 29

         state : index==idLV.currentIndex ? 'details' : ''

        states: [
            State {
                name: ""
                PropertyChanges { target: shortview;  height:29;}
                PropertyChanges { target: tert;  color:"black" }
            },
            State {
                name: "details" ;
                PropertyChanges {target: shortview ; height:50; }
                PropertyChanges {target: tert ; color:"pink" }
            }
        ]

        Text {
            id:tert
            text:param
            color : "black"
        }
        MouseArea {
            id:marea
            anchors.fill:parent
            onClicked: idLV.currentIndex = index
        }
    }
}

ListView{
    id:idLV

    model:xmlModel
    width: 180; height: 300
    delegate:  mainDelegate
    section.property: "param"
    section.criteria: ViewSection.FullString
    section.delegate: sectionHeading
}

}@

[ReshmaS]

Thanks mate :).. Appreciated!

[ReshmaS]

@dmcr:

The first item is always on 'Details' mode.
I have a close button on clikcing it goes back to the old state, when I click that I am unable to access the list.
Chk this if u have some time. Its the code which am working on.
http://www.2shared.com/file/d0BduoTK/xml.html

"chk this":http://www.2shared.com/file/d0BduoTK/xml.html

Thanks

[dmcr]

In your code there is still shortview.state='shortview', but this state is not defined.
You had to study the documentaion a little.

[ReshmaS]

I read the documentation it did not work and hence I reverted to the existing code. I will try in another method. in that case the first item is always on the detailed state

[Macro]

-Please edit you Question and add [Solved] infront of it, if you got the answer.-