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



  • 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
                    }
                }
            }
        }
    }
    


  • 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
                }
            }

Log in to reply
 

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