GridView cell height dynamic based on internal ListView

AmanVirdi

Hi,
I want to display a view using QML GridView, which contains ListView. My QML is:

@Rectangle {
property variant items

Component {
    id: trackRowDelegate
    Item {
        id: item
        width: tacksDetail.width
        height: row.height

        Row {
            id: row
            width: parent.width
            spacing: 5

            Text {
                text: model.modelData.trackno
                width: parent.width * (20/100);
                font.family: fontFamilyNormal
                verticalAlignment: Text.AlignVCenter
                visible: !(isPodcastView)
                smooth:true
                clip: true
            }

            Text {
                width: parent.width * (60/100)
                text: model.modelData.tracktitle
                font.family: fontFamilyNormal
                verticalAlignment: Text.AlignVCenter
                smooth:true
                clip: true
            }

            Text {
                width: parent.width * (20/100)
                text: model.modelData.duration
                font.family: fontFamilyNormal
                verticalAlignment: Text.AlignVCenter
                smooth:true
                clip: true
            }

            }
        }
    }
}

Component {
    id: trackDelegate

    Item {
        id: parentItem
        width: grid.cellWidth - 50
        height: tacksDetail.height
        anchors.left: parent.left

        Item {
            id: albumsDetail
            width: 150
            height: tacksDetail.height
            anchors.left: parent.left

            Image {
                id: artwork
                height: 100
                width: 100
                source: coverart
                smooth: true
                z: 9
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: parent.top
                anchors.topMargin: 8
            }

            Text {
                id: txtAlbumName
                text: albumname
                width: 100
                height: 12
                font.pixelSize: 12
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: artworkShadow.bottom
                anchors.topMargin: 3
                verticalAlignment: Text.AlignVCenter
                font.family: fontFamilyNormal
                smooth:true
                clip: true
            }
        }

        Item {
            id: tacksDetail
            width: parent.width - albumsDetail.width - 100
            height: lstTracksDetail.height
            anchors.left: albumsDetail.right
            anchors.leftMargin: 100

            ListView {
                id: lstTracksDetail
                model: tracklist
                height: tracklist.length * 20
                anchors.fill: parent
                delegate: trackRowDelegate
            }
        }
    }
}

GridView {
    id: grid
    clip: true
    anchors.rightMargin: 5
    anchors.leftMargin: 5
    anchors.bottomMargin: 5
    anchors.topMargin: 5
    anchors.fill: parent
    cellWidth: parent.width
    cellHeight: parentItem.height
    model: items
    snapMode: GridView.SnapToRow!C:\Users\Aman\Desktop\Capture.PNG(Image)!
    delegate: trackDelegate
    focus: true
}

}@

The "trackDelegate" is used to make an album section. I am trying to set the height of each Album section(parentItem, i.e. containing album image and tracks of that album) equal to the height of ListView(lstTracksDetail).

Please help me to get out of this issue.