My GridView won't select currentItem

Dynamite101

Hey I've been trying to learn qml on and off but now i want to give it the big effort. I have code that uses a Gridview and a ListModel that only contains images. The part i want to you notice is my delegate code, i have a MouseArea where I've been trying to access the currentItem, but i've had no luck. I've put the simpliest example in the MouseArea. The output of console.log() is "undefined."

@
import QtQuick 1.0

Rectangle { id: layout; width: 256; height: 306;

GridView {
id: grid;
anchors.fill: parent

cellWidth: width/2
cellHeight: height/3

model: ListModel { id: lmodel
ListElement { img: "image/pat.jpg" }
ListElement { img: "image/bruce.jpg" }
ListElement { img: "image/paul.jpg" }
ListElement { img: "image/julia.jpg" }
ListElement { img: "image/charlie.jpg" }
ListElement { img: "image/terry.jpg" }
ListElement { img: "image/jack.jpg" }
ListElement { img: "image/ken.jpg" }
ListElement { img: "image/thunder.jpg" }
ListElement { img: "image/thomas.jpg" }
ListElement { img: "image/jen.jpg" }
ListElement { img: "image/elena.jpg" }
}
delegate: Rectangle { id: ii
width: grid.cellWidth
height: grid.cellHeight
border{width: 2; color: "black"}
Image { source: img ; anchors.fill: parent }

             MouseArea {
                      anchors.fill: parent
                      onClicked: { console.log(grid.currentItem.index) }  
             }
    }

}
}
@

The last line of code inside the MouseArea returns "undefined." Any help would be great. Thanks

p3c0

Hi,

Try this:
@
import QtQuick 2.0

Rectangle { id: layout; width: 256; height: 306;

GridView {
id: grid;
anchors.fill: parent

cellWidth: width/2
cellHeight: height/3

model: ListModel { id: lmodel
ListElement { img: "image/pat.jpg" }
ListElement { img: "image/bruce.jpg" }
ListElement { img: "image/paul.jpg" }
ListElement { img: "image/julia.jpg" }
ListElement { img: "image/charlie.jpg" }
ListElement { img: "image/terry.jpg" }
ListElement { img: "image/jack.jpg" }
ListElement { img: "image/ken.jpg" }
ListElement { img: "image/thunder.jpg" }
ListElement { img: "image/thomas.jpg" }
ListElement { img: "image/jen.jpg" }
ListElement { img: "image/elena.jpg" }
}
delegate: Rectangle { id: ii
width: grid.cellWidth
height: grid.cellHeight
border{width: 2; color: "black"}
Image { source: img ; anchors.fill: parent }
}
}

MouseArea {
anchors.fill: parent
onClicked: { console.log(grid.indexAt(mouseX,mouseY)) }
}
}
@

Lucijan

Dynamite101, I think this might work too:

@delegate: Rectangle { id: ii
width: grid.cellWidth
height: grid.cellHeight
border{width: 2; color: "black"}
Image { source: img ; anchors.fill: parent }

             MouseArea {
                  anchors.fill: parent
                  onClicked: { console.log(index) }
             }
    }
}@

The index is an implied property of the views (ListView, GridView, PathView) and the delegate has access to it.

Dynamite101

Thank you so much guys! It's working perfectly now.