Qml TableView dynamic row height

Khachatur

Hi.

In my Android application I have a message window which is qml tableview:

!https://www.dropbox.com/s/8fz0iwg8rg9uic3/MsgWnd.png?dl=0()!

The problem is that if the length of the text is longer than width of cell, the text is wrapped, but the height of row is not increased. You could see it in the last row of attached picture.

Here is the code of table view:
@
TableView {
id: table_window
model: messageModel
anchors.fill: parent

    headerVisible: false

    TableViewColumn {
        role: "tbl_view_icon"
        width: 50

        movable: false
        resizable: false

        delegate: imageDelegate
    }


    TableViewColumn {
        role: "tbl_view_time"
        width: 70

        movable: false
        resizable: false

        delegate: textDelegate
    }

    TableViewColumn {
        role: "tbl_view_msg"
        width: parent.width - 120

        movable: false
        resizable: false

        delegate: textDelegate
    }


    Component {
        id: textDelegate
        Item {
            id: f_item
            height: cell_txt.height
            Text {
                id: cell_txt
                width: parent.width
                anchors.margins: 4
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                elide: styleData.elideMode
                text: styleData.value !== undefined  ? styleData.value : ""
                color: styleData.textColor
                wrapMode: TextEdit.WordWrap
            }
        }
    }

    Component {
        id: imageDelegate
        Item {
            Image {
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
                source: styleData.value !== undefined  ? styleData.value : ""
            }
        }
    }
}

@

How to make the row height fit its content? Please, help.

Khachatur

Hi, SGaist!

Thank you for your replaying.

Yes, I have tried not to set resizable to false, but it doesn't work. Because resizable property it is for columns width, but not height.

Also, I have tried to use rowDelegate like this:

@
rowDelegate: Rectangle {
height: 50

    color: styleData.selected ? "#448" : (styleData.alternate? "#eee" : "#fff")

}
@

But I don't want to hard code or calculate each row height by myself, I want TableView to calculate its row height.

SGaist

Can you share a minimal complete example that reproduce the behavior ?

Khachatur

Hi, SGaist.

Yes, I can. Here is the simple project: https://www.dropbox.com/s/vitelj126rak9vt/TableView-sample.zip?dl=0