QML: TableView dynamic change row height - qt

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?

Answer 1

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. :)