Listview delegate ListView

[A Former User]

@jsulm maybe you can help me

[jsulm]

@NullByte No, I'm not a QML expert

[J.Hilk]

@NullByte your ListView delegate has no height and no width, give it some
also your original ListModel is empty, that doesn't help either.

[A Former User]

@J-Hilk

My listview code and append model JS function. I set width and height but I see only first listview section. I have no idea how to do it

    ListView {
        id: fixtureList
        width: parent.width
        height: parent.height - (header.height + tabBar.height) * dp
        anchors.top: header.bottom
        anchors.left: parent.left
        focus: true
        clip: true
        model: ListModel{}
        delegate: ListView {
            id: dataList
            width: fixtureList.width
            height: children.height
            model: detail
            delegate: Rectangle {
                width: parent.width
                height: 100 * dp
                color: "#ffffff"
                Text {
                    id: startDate
                    text: date
                    anchors.centerIn: parent
                    color: "black"

                    Component.onCompleted: {
                        console.log(date)
                    }
                }
            }
        }

        section {
            property: "name"
            criteria: ViewSection.FullString
            delegate: Rectangle {
                color: "#d2d4c7"
                width: parent.width
                height: 50 * dp

                Text {
                    text: section
                    anchors.left: parent.left
                    anchors.leftMargin: 40
                    anchors.top: parent.top
                    anchors.topMargin: 10
                    font.pixelSize: 17
                    font.family: fontRegular.name

                }
            }

        }
    }

    function setData() {
        var matchData
        for(var i = 0; i < fixtureData.length; i++) {
            fixtureList.model.append({id: fixtureData[i].id, name: fixtureData[i].name, image: fixtureData[i].category.image})
            for(var k = 0; k < fixtureData[i].matchdata.length; k++) {
                if(fixtureData[i].matchdata[k] !== undefined || fixtureData[i].matchdata[k] !== null) {
                    fixtureList.model.append({detail: fixtureData[i].matchdata[k], properties: fixtureData[i].matchdata[k].properties})
                }
            }
        }
    }

[J.Hilk]

@NullByte
I still can't work with that 🤷‍♂️

here's a minimal working compile-able example:

Window
{
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    color: "white"
    id: win

    ListView {
        id: fixtureList
        anchors.fill: parent
        focus: true
        clip: true
        model: 20

        delegate: ListView {
            id: dataList
            width: fixtureList.width * 2 / 3 // Allow right 1/3 to scroll main ListView
            height: fixtureList.height / 5  //limit to 5 Entrys(dataLists) per mainview(fixtureList)
            model: 10
            clip: true
            property int id: index

            delegate: Rectangle {
                width: parent.width
                height: 100
                color: dataList.id % 2 ? "darkred" : "steelblue"
                Text {
                    id: startDate
                    text: "SubList %1 entry %2".arg(dataList.id).arg(index)
                    anchors.centerIn: parent
                    color: "black"
                }
            }
        }
    }
}

[A Former User]

@J-Hilk

Thanks so much.
It's not work. I see two listview section one is empty another one is true. And second listview (dataList) delagete is not running.

    ListView {
        id: fixtureList
        width: parent.width
        height: (parent.height - (header.height + tabBar.height * dp) * dp)
        anchors.top: header.bottom
        anchors.left: parent.left
        focus: true
        clip: true
        model: ListModel{}
        delegate: ListView {
            id: dataList
            width: fixtureList.width * 2 / 3 // Allow right 1/3 to scroll main ListView
            height: fixtureList.height / 5  //limit to 5 Entrys(dataLists) per mainview(fixtureList)
            model: detail
            clip: true
            property int id: index

            delegate: Rectangle {
                width: parent.width
                height: 100 * dp
                color: dataList.id % 2 ? "darkred" : "steelblue"
                Text { // not showing.
                    id: startDate
                    text: "SubList %1 entry %2".arg(dataList.id).arg(index)
                    anchors.centerIn: parent
                    color: "black"

                    Component.onCompleted: {
                        console.log(id) // Cannot print.
                    }
                }
            }
        }

        section {
            property: "name"
            criteria: ViewSection.FullString
            delegate: Rectangle {
                color: "#d2d4c7"
                width: parent.width
                height: 50 * dp

                Text {
                    text: section
                    anchors.left: parent.left
                    anchors.leftMargin: 40
                    anchors.top: parent.top
                    anchors.topMargin: 10
                    font.pixelSize: 17 * dp
                    font.family: fontRegular.name

                }
            }

        }
    }

[A Former User]

dataList delegate is not running/work

        delegate: Rectangle {
            width: parent.width
            height: 100 * dp
            color: dataList.id % 2 ? "red" : "blue"
            Text { // not showing.
                id: startDate
                text: "SubList %1 entry %2".arg(dataList.id).arg(index)
                anchors.centerIn: parent
                color: "black"

                Component.onCompleted: {
                    console.log("I'm here ") // not print
                }
            }

            Component.onCompleted: {
                console.log("I'm here 1") // not print
            }
        }

[A Former User]

@SGaist have any idea ?

[A Former User]

@J-Hilk said in Listview delegate ListView:

@NullByte
I still can't work with that 🤷‍♂️

here's a minimal working compile-able example:

Window
{
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    color: "white"
    id: win

    ListView {
        id: fixtureList
        anchors.fill: parent
        focus: true
        clip: true
        model: 20

        delegate: ListView {
            id: dataList
            width: fixtureList.width * 2 / 3 // Allow right 1/3 to scroll main ListView
            height: fixtureList.height / 5  //limit to 5 Entrys(dataLists) per mainview(fixtureList)
            model: 10
            clip: true
            property int id: index

            delegate: Rectangle {
                width: parent.width
                height: 100
                color: dataList.id % 2 ? "darkred" : "steelblue"
                Text {
                    id: startDate
                    text: "SubList %1 entry %2".arg(dataList.id).arg(index)
                    anchors.centerIn: parent
                    color: "black"
                }
            }
        }
    }
}

It's solved. Thanks for help.

Problem is my model is to be wrong.

[J.Hilk]

@NullByte Great that you managed to find the issue 😁,
good luck!