Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Call for Presentations - Qt World Summit

    Unsolved Text wrap in TableView

    QML and Qt Quick
    qml tableview wordwrap
    1
    1
    1245
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • D
      DanielJG last edited by

      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?

      1 Reply Last reply Reply Quote 0
      • First post
        Last post