Overlapping Delegate in listview

ReshmaS

I have a list of items, onClicking each item a rectangle with its associated properties open. When I click the second item the rectangle of the second item opens up overlapping the first. I don't want this to happen, the second rectangle should open only when first is closed (OR) on clicking second item it should automatically close the first rectangle. The list is an xml list, and the delegate has the common property to all its list element.

I tried to change the
opacity - didnt work
visibility - didnt work
MouseArea- enabled: false didnt work.
tried to access the particular index by xmlmodel.get(index)- didnt work.

Anyone who has an idea on how to deal with it, kindly drop in your suggestion. Thanks for your time.

dmcr

You can for example have state for each element (ie in the delegate).

Then you give at the listItem the state in function of the index == currentIndex of the ListView.

ReshmaS

I have not got your idea, could you explain it in detail or cite an example. Am a beginner so am nt too sure of what you are saying.

ReshmaS

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