QML TableView rowDelegate styleData.row not defined

Question

I am trying to create a custom row delegate for a TableView. according to the Documentation, the rowDelegate should have access to a property called styleData.row. However, when I'm try to access this property, it is undefined. I used the debugger to check whats inside the styleData, and the row is missing:

My code is very simple:

TableView {
    width: 500//DEBUG
    height: 300//DEBUG

    model: ListModel {
        ListElement {
            lectureName: "Baum1"
        }
        ListElement {
            lectureName: "Baum2"
        }
        ListElement {
            lectureName: "Baum3"
        }
        ListElement {
            lectureName: "Baum4"
        }
    }

    rowDelegate: HeaderRowDelegate {//simply a Rectangle with an in property called "modelRow"
        id: rowDelegate
        modelRow: {
            var data = styleData;
            return data.row;
        }
    }

    TableViewColumn {
        id: c1
        role: "lectureName"
        title: "TEST"
    }
}

Yes, that was the way I tried it first. That failed the, so I created the "function" to use the debugger — Felix
How do you check/note (without using debugger) that the value is undefined? — sk2212
The console. I it shows the error "cannot assing [undefined] to integer". And if I check the contents it's always invalid — Felix
What do you want to do with this property in HeaderRowDelegate? Please show some code. — sk2212

Neitsa Neitsa · Accepted Answer · 2015-11-28T14:16:12

You don't have to assign it yourself: as the HeaderRowDelegate component is assigned to the rowDelegate property of the TableView, your component has already access to the styleData.row property.

Here's an example:

main.qml

import QtQuick 2.4
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.2
import QtQuick.Controls 1.3

ApplicationWindow {
    id: app
    title: qsTr("Test")
    width: 800
    height: 600

    TableView {
        width: 500//DEBUG
        height: 300//DEBUG

        model: ListModel {
            ListElement {
                lectureName: "Baum1"
            }
            ListElement {
                lectureName: "Baum2"
            }
            ListElement {
                lectureName: "Baum3"
            }
            ListElement {
                lectureName: "Baum4"
            }
        }

        rowDelegate: RowDel {}        

        TableViewColumn {
            id: c1
            role: "lectureName"
            title: "TEST"
        }
    }
}

Now the row delegate, RowDel.qml

import QtQuick 2.4

Rectangle {
    id: rowDel
    color: "blue"
    height: 60

    readonly property int modelRow: styleData.row ? styleData.row : 0

    MouseArea {
        anchors.fill: parent
        onClicked: {
            console.log("[!] log: " + modelRow);
        }
    }       
}

The important thing here is that you can reference styleData.row directly from your component (obliviously as long as you use this precise component as a row delegate).

As an example, if you click on each tableview row, you should see the correct row number displayed in the console log:

qml: [!] log: 0
qml: [!] log: 1
qml: [!] log: 2
qml: [!] log: 3

QML TableView rowDelegate styleData.row not defined

1 Answers