QML TableView Custom delegate: How to make ellipsis for too long text

Question

I want to display a QFileSystemModel in a QML TreeView and need a custom delegate, as I want to add a check box next to a file. This is what I have:

TreeView {
    id: view
    anchors.fill: parent
    sortIndicatorVisible: true
    model: fileSystemModel
    rootIndex: rootPathIndex
    selection: sel
    selectionMode: 2


    TableViewColumn {
        id: namecolumn
        title: "Name"
        role: "fileName"

        resizable: true
        width: parent.width-sizeWidth-dateWidth-scrollBarWidth
        delegate: fileCheckDelegate
    }


    Component {
        id: fileCheckDelegate
        Row{CheckBox{}
            Text{text: root.getText(model.fileName)}
         }
    }

However, I have a problem with long filenames going over the column border. The default delegate truncates the text and adds ellipsis to the truncated text. I would like to do the same in my custom delegate, but don't know how this should be done.

As you can see, I tried with a custom getText function, but I don't know which widths and positions to use there for deciding whether a text should be truncated or not

Edit: I found that setting Text.ElideRight on my Text component would do the ellipsis, but I need to set an explicit width. How can I set the width of my Text component right then?

numberCruncher numberCruncher · Accepted Answer · 2018-04-30T09:48:31

Ok, this does the trick:

    TreeView {
        id: view
        anchors.fill: parent
        sortIndicatorVisible: true
        model: fileSystemModel
        rootIndex: rootPathIndex
        selection: sel
        selectionMode: 2


        TableViewColumn {
            id: namecolumn
            title: "Name"
            role: "fileName"

            resizable: true
            width: parent.width-sizeWidth-dateWidth-scrollBarWidth
            delegate: fileCheckDelegate
        }


        Component {
            id: fileCheckDelegate
            Row{CheckBox{
                id: cbox
                }
                Text{text: model.fileName
                    width: namecolumn.width-x-cbox.width
                    elide: Text.ElideRight
                }
             }
        }

QML TableView Custom delegate: How to make ellipsis for too long text

1 Answers