Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business


OverviewFelgo 3 Support (Qt 5) › AppListView with collapsible sections headers


Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #17879


    I’m using an AppListView to display many items.  There could be dozens or hundreds.  I have the sections for the list view working, but they are always open showing all the items in the list, which is too much at once.  Is there any way to have the sections expandable and collapsible?  I’d only like to show one section open at a time.  Any items that are in other sections, would be hidden.

    Thanks for any help


    Felgo Team

    Hi Lorne!

    The default sections offered by the list-view are quick to add, but not really flexible. Collapsing certain sections is not easily possible with the section features of the QML ListView type by Qt. However, you can also manually show sections in your list-view without using the section.property and section.delegate.

    The following example provides list item as a model that is already grouped into sections. This then allows to see each section as a single list-item, which is collapsable and holds the child items of each section:

    import QtQuick 2.0
    import Felgo 3.0
    App {
      AppListView {
        anchors.fill: parent
        // model holds item grouped in sections
        model: [
            section: "Section 1",
            items: [{ text: "Item 1.1" }, { text: "Item 1.2" }, { text: "Item 1.3" }]
            section: "Section 2",
            items: [{ text: "Item 2.1" }, { text: "Item 2.2" }, { text: "Item 2.3" }]
            section: "Section 3",
            items: [{ text: "Item 3.1" }, { text: "Item 3.2" }, { text: "Item 3.3" }]
        // add sections as regular list items
        delegate: Item {
          width: parent.width
          height: contentCol.height
          // each list-entry holds the section header + section items
          Column {
            id: contentCol
            width: parent.width
            // header
            SimpleSection {
              // manually set otherwise induced section title
              property string section: modelData.section
              width: parent.width
              enabled: true // clickable sections
              onSelected: {
                sectionItems.visible = !sectionItems.visible
            // items
            Column {
              id: sectionItems
              width: parent.width
              // show all items of section with repeater
              Repeater {
                model: modelData.items
                delegate: SimpleRow {
                  text: modelData.text


    Hope this helps!


    Felgo User

    Thanks for the quick layout of how to do the expanding/collapsing with code.  I can use what you wrote as a basic for the way it needs to look in my app.


Viewing 3 posts - 1 through 3 (of 3 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded