[SOLVED] delegate for several roles

ittennull

Hi
I have custom model inherited from QAbstractTableModel with 2 user roles: "eng" and "ruslist". The first one is a simple string, the second is QStringLIst. I want to have a table with two columns: in first there must be that simple string, in the second column I want to have a list of strings (one line per string from QStringLIst)
I'm trying to use TableView from qml-components. But I don't know how to write delegate to handle two different roles. I even don't know if I can get the name of the role inside delegate

@TableView
{
width: 400
height: 300

TableColumn{ role: "eng" ; title: "English" ; width:100}
TableColumn{ role: "ruslist" ; title: "Russian" ; width:200}
model: app.getCollectionModel("qq 1")

itemDelegate: Item {
height: 30
Text {
anchors.verticalCenter: parent.verticalCenter
color: itemForeground
elide: Text.ElideRight
text: itemValue
}
}
}@

Here I get first column as I wanted but not the second one - of course, I didn't write proper code for this.
What can I do to know current role inside delegate? Or is there any other way to achieve what I want?

ittennull

Well, ok. Turned out that it's the simplest thing - there is a property role that holds name of current role.
Now I need somehow to write delegate that can produce different views for different roles

ittennull

I figured it out

I need to define two components and use loader to choose between them like this:
@
Component
{
id: engDelegate

Rectangle
{
height: 30
width: 150
color: "yellow"
Text
{
text: data2
}
}
}

Component
{
id: ruslistDelegate

Rectangle
{
height: 30
width: 150
color: "red"

Text
{
text: data2[0]+", " + data2[1] // just an example
}
}
}

TableView
{
width: 400
height: 300

TableColumn{ role: "eng" ; title: "English" ; width:100}
TableColumn{ role: "ruslist" ; title: "Russian" ; width:200}
model: app.getCollectionModel("qq 1")

itemDelegate: Item
{
height: 60

Loader
{
property variant data2: itemValue
sourceComponent: (role == "eng") ? engDelegate : ruslistDelegate;
}
}
}

@

allopen

thanks, your answer helps me a lot!

allopen

@sourceComponent: (role == "eng") ? engDelegate : ruslistDelegate;@

ReferenceError: role is not defined?

how do you define the "role"?

allopen

got it! in Qt5.1, use styleData.role can get it !

allopen

TableViewColumn provides "delegate", This can be used to set the TableView::itemDelegate for a specific column.

@import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Window 2.0
import QtQuick.Controls.Styles 1.0

ApplicationWindow {
title: qsTr("Hello World")
width: 640
height: 480
color: "black"

menuBar: MenuBar {
    Menu {
        title: qsTr("File")
        MenuItem {
            text: qsTr("Exit")
            onTriggered: Qt.quit();
        }
    }
}

TableView {
    anchors.fill: parent
    visible: true
    backgroundVisible: false
    alternatingRowColors: false
    sortIndicatorVisible: true
    clip: true
    highlightOnFocus: false

    TableViewColumn{ role: "code"  ; title: "cde" ; width: 100
        delegate: Component {
            id: codeDelegate
            Text {
                anchors.verticalCenter: parent.verticalCenter
                color: "lightgray"
                elide: styleData.elideMode
                text: styleData.value
                font.family: "Arial"
                font.pixelSize: 18
            }
        }

    }
    TableViewColumn{ role: "name" ; title: "nme" ; width: 200
        delegate: Component {
            id: nameDelegate
            Text {
                anchors.verticalCenter: parent.verticalCenter
                color: "yellow"
                elide: styleData.elideMode
                text: styleData.value
                font.family: "Arial"
                font.pixelSize: 18
            }
        }

    }



    model: ListModel {
        ListElement {
            name: "aaaaaa"
            code: "30426"
        }
        ListElement {
            name: "bbbbbb"
            code: "32235"
        }
        ListElement {
            name: "ccccccc"
            code: "32638"
        }
    }
    rowDelegate: Rectangle {
        property bool selected : styleData.selected
        width: parent.width-2
        height: 30
        color: styleData.selected? "black" : "black"
        Rectangle {
            width: parent.width
            height: 1
            anchors.bottom: parent.bottom
            visible: parent.selected
            color: "yellow"
        }
    }
    headerDelegate: Rectangle {
        width: parent.width
        height: 30
        color: "black"
        Text {
            anchors.fill: parent
            text: styleData.value
            color: "gray"
            font.family: "Arial"
            font.pixelSize: 18
        }
        Rectangle {
            width: 10; height: 10
            color: {
                if(styleData.pressed)
                    return "red"
                else
                    return "black"
            }
        }
    }
}

}
@