Important: Please read the Qt Code of Conduct -

QAbstractItemModel + QML5.5 TreeView

  • Hi All,

    I'm using QML 5.5 TreeView with QAbstractItemModel. I have managed to view the data using TableViewColumn. I need to support re-ordering the elements within the tree using drag feature. To implement this I have put a MouseArea with the itemDelegate, so this allows me to move the item withing the tree. However, once the item is released it needs to get the new index. How can I achieve this..?
    Kindly suggest.

  • Here's the code

    class TreeModel : public QAbstractItemModel
        explicit TreeModel(const QString &data, QObject *parent = 0);
        enum TreeRoles {
            TitleRole = Qt::UserRole + 1,
        QVariant data(const QModelIndex &index, int role) const Q_DECL_OVERRIDE;
        bool setData(const QModelIndex &index, const QVariant &value, int role);
        Qt::ItemFlags flags(const QModelIndex &index) const Q_DECL_OVERRIDE;
        QVariant headerData(int section, Qt::Orientation orientation,
                            int role = Qt::DisplayRole) const Q_DECL_OVERRIDE;
        QModelIndex index(int row, int column,
                          const QModelIndex &parent = QModelIndex()) const Q_DECL_OVERRIDE;
        QModelIndex parent(const QModelIndex &index) const Q_DECL_OVERRIDE;
        int rowCount(const QModelIndex &parent = QModelIndex()) const Q_DECL_OVERRIDE;
        int columnCount(const QModelIndex &parent = QModelIndex()) const Q_DECL_OVERRIDE;
        QHash<int, QByteArray> roleNames() const;
        TreeItem *rootItem;

    here's the code of the TreeView

    TreeView {
            id: view
            anchors.fill: parent
            anchors.margins: 2 * 12 + row.height
            model: treeModel
            selection: selectionModel
            headerVisible: false
                Component {
                id: dragDelegate
                MouseArea {
                    id: dragArea
                    property bool held: false
                    height: content.height
           held ? content : undefined
                    drag.axis: Drag.YAxis
                    onPressAndHold: held = true
                    onReleased: held = false
                    Rectangle {
                        id: content
                        anchors {
                            horizontalCenter: parent.horizontalCenter
                            verticalCenter: parent.verticalCenter
                        width: dragArea.width
                        height: 20
                            anchors.verticalCenter: parent.verticalCenter
                            text: styleData.value
                        border.width: 1
                        border.color: "lightsteelblue"
                        color: dragArea.held ?
                                   "lightsteelblue" : "green"
                        Behavior on color { ColorAnimation { duration: 100 } }
                        radius: 2
                        states: State {
                            when: dragArea.held
                            ParentChange { target: content; parent: root }
                            AnchorChanges {
                                target: content
                                anchors { horizontalCenter: undefined; verticalCenter: undefined }
            TableViewColumn {
                title: "Name"
                role: "Title"
                resizable: true
            onClicked: {
                console.log("clicked", index)
            onDoubleClicked: {
                console.log("double clicked " + index)
                clickedIndex = index
                console.log("DoubleClickedIndex " + clickedIndex)
                textEditRect.visible = true;
                textEdit.text =, "Title")
                isExpanded(index) ? collapse(index) : expand(index)

Log in to reply