QML: TableView dynamic change row height

Question

I have a table of 4 columns, in one of which is text. When you change the width of the column, the width of the internal text also changes. In some cases, the width of the text becomes rather small and the text begins to increase its height (text wrap). How can I increase the height of the row in which this text is located?

This is a column with text

TableViewColumn {
    id: fullNameColumn
    property int minColWidth: 175
    property int maxColWidth: 500
    role: "fullName"
    title: "ФИО"
    width: 360
    property string imageSource : ""
    onWidthChanged: {
       if (width < minColWidth)
           width = minColWidth
    }

    delegate: Rectangle{
        id: rowCellContentFullName
        color: "transparent"
        Text {
            property int maxColWidth: 400
            id: labelFullName
            objectName: "labelFullName"
            font.pixelSize: 13
            wrapMode: Text.Wrap
            anchors.leftMargin: 38
            anchors.left: parent.left
            horizontalAlignment: styleData.textAlignment
            anchors.verticalCenter: parent.verticalCenter
            visible: parent.visible
            width: parent.width - this.anchors.leftMargin * 2
            text: styleData.value !== undefined ? styleData.value : ""
            color: "#474747"
            renderType: Text.NativeRendering     
    }
}

This is the rowDelegate

 property Component rowDelegate: Rectangle {
                id: rowDel
                objectName: "RowDelegate"
                height: parent.parent.children[1].children[2].children[0].children[0].height < 50 ? 50 : parent.parent.children[1].children[2].children[0].children[0].height
                property color selectedColor: styleData.hasActiveFocus ? primaryColor : secondaryColor
                property bool selectionMaskVisible
                property bool selected: false
        }

In rowDelegate Im binding height with terrible expression, but it works. Works only for column 3 (where FullName). If i drag this column in another space my code doesnt work.

Can I change rows height in TableView QML without this terrible expressions? Mb You know some way to solve this problem?

Take a closer look at onWidthChanged and what else can be fixed/improved there? — Alexander V

eska2000 eska2000 · Accepted Answer · 2018-05-13T11:20:46

Rostislav.
I had the same problem.
My solution:

TableView {
    id: skillsGroupSkills

    model: root.updated ? skillsProxy : null

    property var rects: ({})

    TableViewColumn {
        title: "ID"
        role: "id"
        width: 30
    }

    TableViewColumn {
        id: skillColumn
        title: "Название"
        role: "skill"
        width: 200
    }

    TableViewColumn {
        title: "Sort"
        role: "sort_id"
        width: 60
    }

    itemDelegate: Item {
        Text {
            id: text
            color: styleData.textColor
            elide: styleData.elideMode
            text: styleData.value
            width: parent.width
            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
            onContentHeightChanged: {
                if (styleData.column === 1 && styleData.row !== -1) {
                    var id = skillsGroupsSkillsTableModel.get(skillsProxy.mapRowToSource(styleData.row))["id"]
                    var rect = skillsGroupSkills.rects[id];
                    if (rect) rect.height = contentHeight;
                }
            }
        }
    }

    rowDelegate: Rectangle {
        id: rect

        Component.onCompleted: {
            var id = skillsGroupsSkillsTableModel.get(skillsProxy.mapRowToSource(styleData.row))["id"]
            skillsGroupSkills.rects[id] = rect;
        }
    }
}

In this example I'm dynamically changing second column height in each row.
Every rowDelegate rectangle is saving in the rects property.
My model has unique value in every row - id. I used it to ident rectangles because I have proxyModel. Probably you can use styleData.row directly.

P.S. Yes, I know that this question was in a year ago. May be my solution will be useful for somebody. :)

QML: TableView dynamic change row height

1 Answers