Nested lists in QT QML

**spirit** · 7th August 2012, 18:43

Make a simple test app and try your approach, if it doesn't work, post your test app here.

**Raghavendra R M** · 7th August 2012, 19:24

Sorry for the late reply...i tried that in a simple app...but its giving same error..here is my qml code...

import QtQuick 1.0

Rectangle {
width: 360
height: 360

ListModel {
id:model1

ListElement {
name: "name"
}
ListElement {
name: "name"
}
ListElement {
name: "name"
}
}
ListModel {
id:model2
ListElement {
name: "inside"
}
ListElement {
name: "inside"
}
ListElement {
name: "inside"
}
}
ListView {
id

uter
model: model1
delegate: listdelegate
}

Component {
id:listdelegate

Item {
height: col.height

Column {
id:col
Text {
id:t1
text: name
}
Text {
id: t2
text: name
}
ListView {
id:insidelist
anchors.fill: parent
model: model2
delegate: listdelegate
}
}
}
}
}

**spirit** · 7th August 2012, 19:31

That's the problem in "insidelist"

delegate: listdelegate

It's simple stack-overflow issue.

**Raghavendra R M** · 7th August 2012, 19:43

Yes...thank you.
but now i am using a differnt delegate for that but the lists are overlapping as shown here...http://imgur.com/81NwD
and also in the inside list only one item is being shown...

qml code:

import QtQuick 1.0

Rectangle {
width: 360
height: 360

ListModel {
id:model1

ListElement {
name: "name"
}
ListElement {
name: "name"
}
ListElement {
name: "name"
}
}
ListModel {
id:model2
ListElement {
name: "inside"
}
ListElement {
name: "inside"
}
ListElement {
name: "inside"
}
}

Component {
id:delegate2

Item {
height: col2.height;

Column {
id:col2

Text {
id: name1
text: name
}

}
}
}

ListView {
id

uter
model: model1
delegate: listdelegate
}

Component {
id:listdelegate

Item {
height: col.height

Column {
id:col
Text {
id:t1
text: name
}
Text {
id: t2
text: name
}
ListView {
id:insidelist
model: model2
delegate: delegate2
}
}
}
}
}

**spirit** · 7th August 2012, 19:54

here we go

Qt Code:

Switch view

import QtQuick 1.0
 
Rectangle {
    width: 360
    height: 360
 
    ListModel {
        id: model1
 
        ListElement {
            name: "name"
        }
        ListElement {
            name: "name"
        }
        ListElement {
            name: "name"
        }
    }
    ListModel {
        id: model2
        ListElement {
            name: "inside"
        }
        ListElement {
            name: "inside"
        }
        ListElement {
            name: "inside"
        }
    }
 
    Component {
        id: delegate2
 
        Item {
            width: 100
            height: col.childrenRect.height
 
            Column {
                id: col2
 
                Text {
                    id: name1
                    text: name
                    anchors.left: parent.left
                    anchors.right: parent.right
                }
            }
        }
    }
 
    ListView {
        id: outer
        model: model1
        delegate: listdelegate
    }
 
    Component {
        id: listdelegate
 
        Item {
            width: 100
            height: col.childrenRect.height
 
            Column {
                id: col
                Text {
                    id: t1
                    text: name
                    anchors.left: parent.left
                    anchors.right: parent.right
                }
                Text {
                    id: t2
                    text: name
                    anchors.left: parent.left
                    anchors.right: parent.right
                }
                ListView {
                    id: insidelist
                    model: model2
                    delegate: delegate2
                    height: contentItem.height
                    anchors.left: parent.left
                    anchors.right: parent.right
                }
            }
        }
    }
}

import QtQuick 1.0

Rectangle {
    width: 360
    height: 360

    ListModel {
        id: model1

        ListElement {
            name: "name"
        }
        ListElement {
            name: "name"
        }
        ListElement {
            name: "name"
        }
    }
    ListModel {
        id: model2
        ListElement {
            name: "inside"
        }
        ListElement {
            name: "inside"
        }
        ListElement {
            name: "inside"
        }
    }

    Component {
        id: delegate2

        Item {
            width: 100
            height: col.childrenRect.height

            Column {
                id: col2

                Text {
                    id: name1
                    text: name
                    anchors.left: parent.left
                    anchors.right: parent.right
                }
            }
        }
    }

    ListView {
        id: outer
        model: model1
        delegate: listdelegate
    }

    Component {
        id: listdelegate

        Item {
            width: 100
            height: col.childrenRect.height

            Column {
                id: col
                Text {
                    id: t1
                    text: name
                    anchors.left: parent.left
                    anchors.right: parent.right
                }
                Text {
                    id: t2
                    text: name
                    anchors.left: parent.left
                    anchors.right: parent.right
                }
                ListView {
                    id: insidelist
                    model: model2
                    delegate: delegate2
                    height: contentItem.height
                    anchors.left: parent.left
                    anchors.right: parent.right
                }
            }
        }
    }
}

To copy to clipboard, switch view to plain text mode

**Raghavendra R M** · 7th August 2012, 20:04

Hi ! now the overlapping problem is solved...thank you
But again the nested lists are not working right?
i mean the output should have been 'inside' repeated 3 times under each 'name' right?
I'm sorry if i am disturbing you...but i am helpless...

**spirit** · 8th August 2012, 11:55

Qt Code:

Switch view

import QtQuick 1.0
 
Rectangle {
    width: 360
    height: 360
 
    ListModel {
        id: model1
 
        ListElement {
            name: "name"
        }
        ListElement {
            name: "name"
        }
        ListElement {
            name: "name"
        }
    }
    ListModel {
        id: model2
        ListElement {
            name: "inside"
        }
        ListElement {
            name: "inside"
        }
        ListElement {
            name: "inside"
        }
    }
 
    Component {
        id: delegate2
 
        Item {
            width: 100
            height: col2.childrenRect.height
 
            Column {
                id: col2
                anchors.left: parent.left
                anchors.right: parent.right
                Text {
                    id: name1
                    text: name
                }
            }
        }
    }
 
    ListView {
        id: outer
        model: model1
        delegate: listdelegate
        anchors.fill: parent
    }
 
    Component {
        id: listdelegate
 
        Item {
            width: 100
            height: col.childrenRect.height
 
            Column {
                id: col
                anchors.left: parent.left
                anchors.right: parent.right
                Text {
                    id: t1
                    text: name
                }
                Text {
                    id: t2
                    text: name
                }
                ListView {
                    id: insidelist
                    model: model2
                    delegate: delegate2
                    contentHeight: contentItem.childrenRect.height
                    height: childrenRect.height
                    anchors.left: parent.left
                    anchors.right: parent.right
                    clip: true
                }
            }
        }
    }
}

import QtQuick 1.0

Rectangle {
    width: 360
    height: 360

    ListModel {
        id: model1

        ListElement {
            name: "name"
        }
        ListElement {
            name: "name"
        }
        ListElement {
            name: "name"
        }
    }
    ListModel {
        id: model2
        ListElement {
            name: "inside"
        }
        ListElement {
            name: "inside"
        }
        ListElement {
            name: "inside"
        }
    }

    Component {
        id: delegate2

        Item {
            width: 100
            height: col2.childrenRect.height

            Column {
                id: col2
                anchors.left: parent.left
                anchors.right: parent.right
                Text {
                    id: name1
                    text: name
                }
            }
        }
    }

    ListView {
        id: outer
        model: model1
        delegate: listdelegate
        anchors.fill: parent
    }

    Component {
        id: listdelegate

        Item {
            width: 100
            height: col.childrenRect.height

            Column {
                id: col
                anchors.left: parent.left
                anchors.right: parent.right
                Text {
                    id: t1
                    text: name
                }
                Text {
                    id: t2
                    text: name
                }
                ListView {
                    id: insidelist
                    model: model2
                    delegate: delegate2
                    contentHeight: contentItem.childrenRect.height
                    height: childrenRect.height
                    anchors.left: parent.left
                    anchors.right: parent.right
                    clip: true
                }
            }
        }
    }
}

To copy to clipboard, switch view to plain text mode

**Raghavendra R M** · 8th August 2012, 13:04

Its solved...!! Thanks a lot...:-) :-) :-)

**mhaugstrup** · 14th October 2013, 10:27

Hi

Attempting to fix my similar issue from this older thread.

In the case referenced by the example code above - what should be altered if the inside models where to be unique for each entry in the outside list? Eg produce this output;:

model1:1

model2:1
model2:2
model2:3

model1:2

model3:1
model3:2
model3:3

Thanks!

Mikkel

Thread: Nested lists in QT QML

Thread Tools

Search Thread

Display

Hybrid View

Re: Nested lists in QT QML

Re: Nested lists in QT QML

Re: Nested lists in QT QML

Re: Nested lists in QT QML

Re: Nested lists in QT QML

Re: Nested lists in QT QML

Re: Nested lists in QT QML

Re: Nested lists in QT QML

Re: Nested lists in QT QML

Similar Threads

nested lists in QTextDocumentFragment::toHtml()

Inputting Into Lists

Hi all, some about lists and views

display lists

Some problems with lists

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions