Text wrap in TableView



  • I want the text in each itemDelegate to wrap when it exceeds the width of the cell. It does that as needed but the overflow causes text to overlap with other cells and clipping. I know that the row height has to increase and I have to define a rowDelegate for this behaviour.

    My best idea was to monitor the Text's "onContentHeightChanged" signal handler with some logic, get the index of the row the itemDelegate belongs to and then somehow change the height of the rowDelegate which I would find using the index. My attempts couldn't even bring me close to that (lots of syntax errors [relatively new to QML] and I don't see a way to get individual rows from a TableView). This is my table so far which reproduces the wrapping issue:

    import QtQuick 2.5
    import QtQuick.Controls 1.4
    import QtQuick.Controls.Styles 1.4
    
    Item
    {
        width: 600; height: 300
    
        ListModel{
            id: myModel
            ListElement{
                column1: "Apple"
                column2: "Bat"
                column3: "Car"
            }
            ListElement{
                column1: "Some random"
                column2: "Latin"
                column3: "Below this row"
            }
            ListElement{
                column1: "Lorem ipsum dolor sit amet, at vim atqui ocurreret"
                column2: "te quod postea"
                column3: "moderatius pro, detracto noluisse"
            }
        }
    
        TableView{
            id: myTable
            model: myModel
            width: parent.width; height: parent.height
            horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
    
            TableViewColumn{
                id: col1
                role: "column1"
                title: "Column 1"
            }
            TableViewColumn{
                id: col2
                role: "column2"
                title: "Column 2"
            }
            TableViewColumn{
                id: col3
                role: "column3"
                title: "Column 3"
            }
    
            //Spaces columns to span the entire viewport
            onWidthChanged: {
                col1.width = 0.50 * width
                col2.width = 0.30 * width
                col3.width = 0.20 * width
            }
    
            //Table Styling from this point on...
            style: TableViewStyle{
                id: tableStyle
                backgroundColor: "#e3ecf4"
                alternateBackgroundColor: "#fff"
                textColor: "#000"
            }
    
            Rectangle {
                id: tableFrameTop
                anchors{
                    right: parent.right
                    left: parent.left
                    top: parent.top
                }
                height: 1
                color: "#a2a2a2"
            }
    
            headerDelegate: Rectangle{
                width: headerText.implicitWidth
                height: headerText.implicitHeight * 1.2
                gradient: Gradient{
                    GradientStop{position: 1.0; color: "#dadada"}
                    GradientStop{position: 0.0; color: "#f9f9f9"}
                }
    
                Text{
                    id: headerText
                    anchors.fill: parent
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                    text: styleData.value
                    color: "#292929"
                    font{
                        pixelSize: 15
                        weight: Font.DemiBold
                    }
                }
    
                Rectangle {
                    id: headerColSeparator
                    anchors{
                        right: parent.right
                        top: parent.top
                        bottom: parent.bottom
                        bottomMargin: 1
                        topMargin: 1
                    }
                    width: 1
                    color: "#cccccc"
                }
    
                Rectangle {
                    id: headerBottomBorder
                    anchors{
                        right: parent.right
                        left: parent.left
                        bottom: parent.bottom
                    }
                    height: 1
                    color: "#a2a2a2"
                }
            }
    
            itemDelegate: Rectangle{
               id: itemRect
               anchors.fill: parent
               color: "transparent"
    
               Text {
                   id: itemText
                   text: styleData.value
                   anchors.fill: parent
                   verticalAlignment: Text.AlignVCenter
                   horizontalAlignment: Text.AlignHCenter
                   font.pixelSize: 14
                   color: "#292929"
                //    elide: Text.ElideRight
                   wrapMode: Text.WordWrap  //Wrapping text in itemDelegate
               }
    
               Rectangle {
                   id: itemGridRight
                   anchors{
                       right: parent.right
                       top: parent.top
                       bottom: parent.bottom
                   }
                   width: 1
                   color: "#cccccc"
               }
            }
    
            //Todo: create horizontal grid lines in rowDelegate
           /*rowDelegate: Rectangle{
    
    
           }*/
        }
    }
    

    How can I get the rows to change their heights when I have text wrapping?


Log in to reply
 

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