How to display correctly Treeview with QML Qt 5.5

Question

I'm trying to create a correct Treeview with Qml Qt 5.5. I succeed to have a Treeview with a global root. But impossible to find how to add child for row item.

For the moment I got something like that :

    TreeView {
        id:listTree
        anchors.fill: parent
        anchors.leftMargin: 1
        headerVisible: false
        backgroundVisible: false

        selection: ItemSelectionModel {
            model: myModel
        }
        TableViewColumn {
            role: "name"
        }

        itemDelegate: Item {
            Text {
                anchors.verticalCenter: parent.verticalCenter
                color: styleData.textColor
                elide: styleData.elideMode
                text: styleData.value
            }
        }

        Component.onCompleted: {
            model.append({"name":"Never"})
            model.append({"name":"gonna"})
            model.append({"name":"give"})
            model.append({"name":"you"})
            model.append({"name":"up"})
            model.append({"name":"Never"})
            model.append({"name":"gonna"})
            model.append({"name":"let"})
            model.append({"name":"you"})
            model.append({"name":"dow"})
        }
    }

And I would like something like that :

How can I do it ?

I don't know why my first sentences was not displayed, but the beginning of my question begins by 'Hello' ><' — kavaliero, Oct 09 '15 at 14:58
http://meta.stackexchange.com/questions/2950/should-hi-thanks-taglines-and-salutations-be-removed-from-posts/93989#93989 — Mitch, Oct 09 '15 at 15:07
example implementation here: http://www.codeproject.com/Articles/632795/QML-TreeModel-and-TreeView — ramtheconqueror, Oct 09 '15 at 17:03
@ramtheconqueror thats not really what i want, I already have a Treeview implemtation for QT 5.4 but now I want to use the QML Treeview of Qt 5.5 http://doc.qt.io/qt-5/qml-qtquick-controls-treeview.html — kavaliero, Oct 09 '15 at 17:27
as a model for `TreeView` you should provide you implementation of `QAbstractItemModel` — folibis, Oct 11 '15 at 07:00
Yeah i'm trying to implemente QAbstractItemModel but i have somes bugs "Unable to assign Shortcut to QAbstractItemModel". I followed this example : http://doc.qt.io/qt-5/qtwidgets-itemviews-simpletreemodel-example.html — kavaliero, Oct 13 '15 at 15:18
For the moment I didn't succeed to use my QAbstractItemModel to displayed correctly in my itemDelegate — kavaliero, Oct 13 '15 at 18:53
Even though a bit outdated, here you can find a good example from which to get out the basic idea about what you have to do: https://www.qtdeveloperdays.com/sites/default/files/north-america/QtQuickTreeView.pdf — skypjack, Oct 19 '15 at 07:56

score 5 · Answer 1 · answered Jan 16 '16 at 13:21

5

You can also create a TreeModel class that extends QStandardItemModel and overrides roleNames(), like done here. To add children to nodes in your tree, just use appendRow().

TreeModel::TreeModel(QObject *parent) : QStandardItemModel(parent)
{
    QStandardItem *root = new QStandardItem("root");
    QStandardItem *child = new QStandardItem("child");
    this->appendRow(root);
    root->appendRow(child);
}

answered Jan 16 '16 at 13:21

cmmuf34e79d5761dcd

91
1
4

Is there a way to refresh the TreeView at runtime? I implemented a similar example and it works. However, the QML TreeView does not update or refresh when modifying the data. – Francisco Hernandez Nov 04 '16 at 22:51

Brendan Murphy · Accepted Answer · 2015-11-04T20:04:33.087

Your model doesn't have any parent child relationships which is why its displayed like a list.

You'll want your "TreeModel" to be a collection of TreeItems. Each TreeItem will have knowledge of their own children and their parent item.

You can follow a fully implemented Qt example found here http://doc.qt.io/qt-5/qtwidgets-itemviews-simpletreemodel-example.html. You'll want to (in C++) make a class for TreeItem, and a separate class for your TreeModel.

That example is working code, you can just copy and paste it and get a working model for your TreeView.

The part you'll be particularly interested in is the implementation of the method setupModelData(). That's where you'll want to parse through your wonderful dataset of 80's lyrics and assign each of them a TreeItem.

Each TreeItem (one for every row of data) should be given knowledge of its parent upon creation (in its constructor). Then as soon as its children are created, call parentTreeItem.appendChild(childTreeItem)

When your model is completed, you can assign it to your qml view in a few ways, registering it with qmlRegisterType is what I prefer (http://doc.qt.io/qt-5/qqmlengine.html#qmlRegisterType)

Once registered, it can be created in qml as though it were a ListView or any other qml object.

NOTE: You'll have this rootItem. This is something that isn't usable by the view, but all your "first indentation" parents are children of the rootItem.

Good luck!

Can you provide a code snippet of what line is causing your about failing to make a shortcut for QAbstractItemModel?

Anyone reading this should be cautioned that the linked TreeModel class is not 'working code' with respect to QML TreeView. The linked code works for QTreeView which behaves differently then TreeView. This link may be helpful (https://forum.qt.io/topic/56099/solved-new-treeview-does-not-connect-to-c-model) — Joshua Kolden, Jan 18 '16 at 01:25

How to display correctly Treeview with QML Qt 5.5

2 Answers2

Linked