Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. How to set QML TableViewStyle to show Middle Ellipses (ElideMiddle)
Forum Updated to NodeBB v4.3 + New Features

How to set QML TableViewStyle to show Middle Ellipses (ElideMiddle)

Scheduled Pinned Locked Moved Unsolved General and Desktop
2 Posts 1 Posters 563 Views
  • 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.
  • T Offline
    T Offline
    TylerM
    wrote on last edited by
    #1

    I'm creating a QML TableView and I want the text (in both the rows AND headers) to middle-ellipse whenever the text is too long to fit into its column. For example: This_is_really_long_text might display as This...text

    I've got it successfully working without using a TableViewStyle, however I would like to use TableViewStyle to easily stylize multiple columns at once.

    I've read the documentation for: - TableView QML (Item Delegate) - TableViewStyle QML Type - Item Delegate QML Type - Customizing QT Quick Controls (With Delegate)

    I also tried making minor tweaks to some code on someone's previously asked question, simply swapping out the elide: Text.ElideRight for Text.ElideMiddle which also didn't work. It seems like changing the header color and height works, but not the elide.

    The below code generates a table that does not show ellipses at all, though I expect middle-ellipses. If I remove the overrides, it will right-elide.

    Image showing 2nd column cutting off 1st, but no ellipses

    import QtQuick 2.9
    import QtQuick.Controls 1.4 as QC1
    import QtQuick.Controls.Styles 1.4
    import QtQuick.Controls 2.2
    
    
    ApplicationWindow {
        visible: true
        width: 400
        height: 400
    
        ListModel {
            id: myListModel
            ListElement {
                cell1Text: "This_is_some_really_long_text"
                cell2Text: "Shorter_text"
            }
        }
    
        QC1.TableView {
            id: tableView
            anchors.fill: parent
            model: myListModel
    
            QC1.TableViewColumn {
                role: "cell1Text"
                title: "Cell1Text"
            }
    
            QC1.TableViewColumn {
                role: "cell2Text"
                title: "Cell2Text"
            }
    
            style: TableViewStyle {
    
                Text {
                    elide: Text.ElideMiddle
                }
    
                headerDelegate: Rectangle {
                    height: 20
                    color: "lightsteelblue"
                    Text {
                        text: styleData.value
                        elide: Text.ElideMiddle
                    }
                }
    
                rowDelegate: Rectangle {
                    Text {
                        elide: Text.ElideMiddle
                    }
                }
    
                itemDelegate: Rectangle {
                    Text {
                        text: styleData.value
                        elide: Text.ElideMiddle
                    }
                }
            }
        }
    }
    
    1 Reply Last reply
    0
    • T Offline
      T Offline
      TylerM
      wrote on last edited by
      #2

      I figured it out. I needed to add the width: parent.width to the delegates

              headerDelegate: Rectangle {
                  height: 20
                  color: "lightsteelblue"
                  Text {
                      width: parent.width
                      text: styleData.value
                      elide: Text.ElideMiddle
                  }
              }
      
              itemDelegate: Rectangle {
                  Text {
                      width: parent.width
                      text: styleData.value
                      elide: Text.ElideMiddle
                  }
              }
      
      1 Reply Last reply
      0

      • Login

      • Login or register to search.
      • First post
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved