Listview grouping of similar elements-

ReshmaS

I am a Begginer in QMl, I am using it on a desktop. I would like to group similar elements of a list together and then display it when user clicks on one of its associated paramert
ex.
@
--Fruits
Apple
Mango
Banana
Vegies
Carrot
Brinjal
@
but I want the intital view as

@Fruits
Vegies@

on clikcing Fruits I want that exapanded slots. Kindly help me with this. I grouped it using section comp in list but I cannot expand the view on cliking. Appreciate your time and care.

ReshmaS

I would appreciate if any of you could give me an idea on how to procd.

ReshmaS

I have not yet found any solution for it. Do you guys have any idea on how to proceed.

sierdzio

No out-of-the-box solution is available in QML for implementing a Tree View. You have to implement your own, use QtWidgets instead, or change your design.

dmcr

You can adapt or be inspired by "this":http://doc.qt.nokia.com/4.7-snapshot/src-imports-folderlistmodel.html

andre

[quote author="dmcr" date="1347976417"]You can adapt or be inspired by "this":http://doc.qt.nokia.com/4.7-snapshot/src-imports-folderlistmodel.html[/quote]

How does that help? The link you give does not show a model or view that supports expanding nodes.

dmcr

Ah yes i've read too fast the example, i thought that it could expand folders and subfolders....but it's not the case :( !

ReshmaS

@ Sierdzio: How can I use QtWidgets, do you have an example. or could you give me a rough idea.
http://qt-project.org/doc/qt-4.8/QWidget.html I read this but its too complicated for me since am a beginner

sierdzio

What I meant is - if possible - switch from QML to QtWidgets for that. But since you want to learn QML, you should probably discard that advice.

elpuri

Here's one way to solve the problem, but there is a caveat. If your subitem models are big and you uncollapse an item, you might get a subpar user experience as the declarative engine creates each of those nested items at one go as opposed to the way ListView creates delegates them one by one as you scroll. The exact number of nested items when this becomes a problem of course depends on your target hardware and the complexity of the nested item delegate. Also defining that "collapsed" property for each main level list element is kind of annoying, but you have to have it in order to avoid an item resetting to the collapsed state when it scrolls out of sight.

It's probably possible to achieve dynamic construction of the nested items by replacing the Column+Repeater combo in the example with a ListView inside an Item and managing it's y and contentY properties while the main ListView scrolls, but I don't really feel like getting into that type of fun right now :)

Despite of the shortcomings of this particular technique, I hope this will get you started. I added some comments inside the code in hopes of making it easier to understand.

@
import QtQuick 1.1

Item {
width: 200
height: 300

ListView {
    anchors.fill: parent
    model: nestedModel
    delegate: categoryDelegate
}

ListModel {
    id: nestedModel
    ListElement {
        categoryName: "Veggies"
        collapsed: true

        // A ListElement can't contain child elements, but it can contain
        // a list of elements. A list of ListElements can be used as a model
        // just like any other model type.
        subItems: [
            ListElement { itemName: "Tomato" },
            ListElement { itemName: "Cucumber" },
            ListElement { itemName: "Onion" },
            ListElement { itemName: "Brains" }
        ]
    }

    ListElement {
        categoryName: "Fruits"
        collapsed: true
        subItems: [
            ListElement { itemName: "Orange" },
            ListElement { itemName: "Apple" },
            ListElement { itemName: "Pear" },
            ListElement { itemName: "Lemon" }
        ]
    }

    ListElement {
        categoryName: "Cars"
        collapsed: true
        subItems: [
            ListElement { itemName: "Nissan" },
            ListElement { itemName: "Toyota" },
            ListElement { itemName: "Chevy" },
            ListElement { itemName: "Audi" }
        ]
    }
}

Component {
    id: categoryDelegate
    Column {
        width: 200

        Rectangle {
            id: categoryItem
            border.color: "black"
            border.width: 5
            color: "white"
            height: 50
            width: 200

            Text {
                anchors.verticalCenter: parent.verticalCenter
                x: 15
                font.pixelSize: 24
                text: categoryName
            }

            Rectangle {
                color: "red"
                width: 30
                height: 30
                anchors.right: parent.right
                anchors.rightMargin: 15
                anchors.verticalCenter: parent.verticalCenter

                MouseArea {
                    anchors.fill: parent

                    // Toggle the 'collapsed' property
                    onClicked: nestedModel.setProperty(index, "collapsed", !collapsed)
                }
            }
        }

        // A Loader is used here to avoid creating the nested items 
        // when the list item is not in the uncollapsed state
        Loader {
            id: subItemLoader

            // This is a workaround for a bug/feature in the Loader element. 
            // If sourceComponent is set to null the Loader element retains 
            // the same height it had when sourceComponent was set. Setting visible
            // to false makes the parent Column treat it as if it's height was 0.
            visible: !collapsed
            property variant subItemModel : subItems
            sourceComponent: collapsed ? null : subItemColumnDelegate
            onStatusChanged: if (status == Loader.Ready) item.model = subItemModel
        }
    }

}

Component {
    id: subItemColumnDelegate
    Column {
        property alias model : subItemRepeater.model
        width: 200
        Repeater {
            id: subItemRepeater
            delegate: Rectangle {
                color: "#cccccc"
                height: 40
                width: 200
                border.color: "black"
                border.width: 2

                Text {
                    anchors.verticalCenter: parent.verticalCenter
                    x: 30
                    font.pixelSize: 18
                    text: itemName
                }
            }
        }
    }
}

}

@

ReshmaS

@elpuri: Thanks, looks good. Should be good for the start. Thanks for your time and understanding:)

Hannah24

is it possible to implement something of this kind using an XMLModel instead of a ListModel.??