How to know whether the grid view scrolled to the end - qt

Question

I am using a grid view, which can scrolled from left to right. When click on each item in the grid view, new screen launches with an animation from the current grid item position to the screen width and screen height. When click on the 2nd column elements after the grid view scrolled to right, the grid item position is getting wrong. Is there any way to fix this ? Or is there any method to check whether the grid view scrolled to the extreme right ?
Am putting my code below :
GridView {
id: featuresGrid
snapMode: ListView.SnapToItem
clip:true
x: 135
y: 122
width:1650
height:485
cellWidth: 825
cellHeight: 160
flow: GridView.FlowTopToBottom
model:favouriteapp
delegate:featureGridTile
focus: false
}
ListModel {
id:favouriteapp
ListElement {
featureName: "media & radio"
}
ListElement {
featureName: "phone"
}
ListElement {
featureName: "climate"
}
ListElement {
featureName: "navigation"
}
ListElement {
featureName: "ambient lighting"
}
ListElement {
featureName: "settings"
}
ListElement {
featureName: "camera"
}
ListElement {
featureName: "dynamic-i"
}
ListElement {
featureName: "bluetooth"
}
}
Component {
id: featureGridTile
Item {
id:grid_view_rect
width:featuresGrid.cellWidth
height:featuresGrid.cellHeight
Text{
anchors.fill: parent
text : featureName
opacity: 1
}
MouseArea{
anchors.fill: parent
onClicked: {
featuresGrid.currentIndex = index
//Goes to the next screen with the current clicked grid item X and Y position
}
}
}
}

Answer 1

What you are looking for are the mapFromItem and mapToItem functions:
http://doc.qt.io/qt-5/qml-qtquick-item.html#mapFromItem-method-1
Item {
id: rootItem
anchors.fill: parent
Rectangle {
id: myRect
color: 'red'
width: 50
height: 50
// the + 0 * featuresGrid.contentX will force the binding to reevaluate when draged. Maybe you don't want that. Comment it out and try
x: featuresGrid.currentItem.mapToItem(rootItem, 0, 0).x + 0 * featuresGrid.contentX
y: featuresGrid.currentItem.mapToItem(rootItem, 0, 0).y + 0 * featuresGrid.contentY
z: 1
}
GridView {
id: featuresGrid
snapMode: ListView.SnapToItem
clip:true
x: 135
y: 122
width:1650
height:485
cellWidth: 825
cellHeight: 160
flow: GridView.FlowTopToBottom
model:favouriteapp
delegate:featureGridTile
focus: false
}
ListModel {
id:favouriteapp
ListElement {
featureName: "media & radio"
soureIcon:"file:graphics/Icons/MediaIcon.png"
feature:"Media"
}
ListElement {
featureName: "phone"
soureIcon:"file:graphics/Icons/Phoneicon.png"
feature:"Phone"
}
ListElement {
featureName: "climate"
soureIcon:"file:graphics/Icons/ClimateIcon.png"
feature:"Climate"
}
ListElement {
featureName: "navigation"
soureIcon:"file:graphics/Icons/NavIcon.png"
feature:"Navigation"
}
ListElement {
featureName: "ambient lighting"
soureIcon:"file:graphics/Icons/ALIcon.png"
feature:"AL"
}
ListElement {
featureName: "settings"
soureIcon:"file:graphics/Icons/SettingsIcon.png"
feature:"Settings"
}
ListElement {
featureName: "camera"
soureIcon:"file:graphics/Icons/CamIcon.png"
feature:"Camera"
}
ListElement {
featureName: "dynamic-i"
soureIcon:"file:graphics/Icons/dynamicIcon.png"
feature:"Dynamic_I"
}
ListElement {
featureName: "bluetooth"
soureIcon:"file:graphics/Icons/Icon Bluetooth.png"
feature:"Bluetooth"
}
}
}
Component {
id: featureGridTile
Item {
id:grid_view_rect
width:featuresGrid.cellWidth
height:featuresGrid.cellHeight
Rectangle{
anchors.fill: parent
color: "white"
opacity: 1
border.color: 'black'
}
Text{
anchors.fill: parent
text : featureName
opacity: 1
}
MouseArea{
anchors.fill: parent
onClicked: {
featuresGrid.currentIndex = index
//Goes to the next screen with the current clicked grid item X and Y position
}
}
}
}