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
    {
        Q_OBJECT
     
    public:
        explicit TreeModel(const QString &data, QObject *parent = 0);
        ~TreeModel();
     
        enum TreeRoles {
            TitleRole = Qt::UserRole + 1,
            SummaryRole
        };
     
        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;
     
    protected:
        QHash<int, QByteArray> roleNames() const;
     
    private:
        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
     
            itemDelegate:
                Component {
                id: dragDelegate
     
                MouseArea {
                    id: dragArea
     
                    property bool held: false
     
                    height: content.height
     
                    drag.target: 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
                        Text{
                            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 = fileSystemModel.data(index, "Title")
                textEditRect.forceActiveFocus()
                isExpanded(index) ? collapse(index) : expand(index)
            }
        }

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.