Problem with TableView and alternatingRowColors



  • hi!

    i have this table view with this model:

        ListModel {
            id: libraryModel
            ListElement {
                npu: "A Masterpiece"
                conto: "Gabriel"
            }
            ListElement {
                npu: "Brilliance"
                conto: "Jens"
            }
            ListElement {
                npu: "Outstanding"
                conto: "Frederik"
            }
        }
    
        Rectangle {
            id: rectangle1
            x: 0
            y: 70
            width: 900
            height: 830
            color: "#ffffff"
    
            TableView {
                id: lw
                x: 0
                y: 0
                width: 900
                height: 816
                alternatingRowColors: true
                TableViewColumn {
                    role: "npu"
                    title: "NPU"
                    width: 400
                }
                TableViewColumn {
                    role: "conto"
                    title: "CONTO"
                    width: 400
                }
                model: libraryModel
            }
    

    the problem is that I do not see the rows with alternating colors.
    They are always white.
    can you tell me where I'm wrong?


  • Lifetime Qt Champion

    Hi,
    using

    Window {
        id: rectangle1
        width: 900
        height: 830
        color: "#ffffff"
        visible: true
    
        ListModel {
            id: libraryModel
            ListElement {
                npu: "A Masterpiece"
                conto: "Gabriel"
            }
            ListElement {
                npu: "Brilliance"
                conto: "Jens"
            }
            ListElement {
                npu: "Outstanding"
                conto: "Frederik"
            }
        }
    
        TableView {
            id: lw
            anchors.fill: parent
            alternatingRowColors: true
            TableViewColumn {
                role: "npu"
                title: "NPU"
                width: rectangle1.width / 2
            }
            TableViewColumn {
                role: "conto"
                title: "CONTO"
                width: rectangle1.width / 2
            }
            model: libraryModel
        }
    }
    

    I get the right behavior. What OS/Qt version are you using ?



  • hi!

    i'm using linux with qt 5.6.
    i have this structure:
    main.qml

    import QtQuick 2.4
    import QtQuick.Controls 1.3
    import QtQuick.Dialogs 1.2
    
    ApplicationWindow {
        visible: true
        width: 900
        height: 900
        minimumWidth: 900
        minimumHeight: 900
        maximumWidth: 900
        maximumHeight: 900
        title: qsTr("Cimoda Admin")
    
        menuBar: MenuBar {
            Menu {
                title: qsTr("File")
                MenuItem {
                    text: qsTr("&Open")
                    onTriggered: console.log("Open action triggered");
                }
                MenuItem {
                    text: qsTr("Exit")
                    shortcut: "Ctrl+Q"
                    onTriggered: Qt.quit();
                }
            }
        }
    
        MainForm {
            anchors.fill: parent
        }
    }
    

    MainForm.ui.qml

    import QtQuick 2.4
    import QtQuick.Controls 1.3
    import QtQuick.Layouts 1.1
    
    Item {
        width: 900
        height: 900
        id: root
    
        TabView {
            id: tv
            width: parent.width
            height: parent.height
    
            Tab {
                id: tabClienti
                title: "Clienti"
                source: "Clienti.qml"
            }
        }
    
    }
    

    Clienti.qml

    import QtQuick 2.1
    import QtQuick.Controls 1.0
    import QtQuick.Dialogs 1.2
    import "script.js" as Script
    
    Item {
    
        id: root
    
        Rectangle {
            x: 0
            y: 0
            width: parent.width
            height: 70
            TextField {
                id: txtCerca
                x: 8
                y: 22
                width: 164
                height: 26
                anchors.verticalCenter: parent.verticalCenter
                placeholderText: qsTr("CONTO")
                font.capitalization: Font.AllUppercase
                text: "CLFD"
            }
    
            Button {
                x: 800
                y: 21
                text: qsTr("Cerca")
                anchors.verticalCenter: parent.verticalCenter
                onClicked: {
                    Script.cercaConto(txtCerca.text)
                }
            }
        }
    
        Rectangle {
            x: 0
            y: 70
            width: parent.width
            height: 820
            TableView {
                id: lw
                x: 0
                y: 0
                width: parent.width
                height: parent.height
                alternatingRowColors: true
                TableViewColumn {
                    role: "npu"
                    title: "NPU"
                    width: root.width / 2
                }
                TableViewColumn {
                    role: "conto"
                    title: "CONTO"
                    width: root.width / 2
                }
                onDoubleClicked: {
                    var comp = Qt.createComponent("Cliente.qml");
                    var wind = comp.createObject(root);
                    wind.show(clientiModel.get(row).npu);
                }
                model: clientiModel
            }
    
        }
    
        ListModel { id: clientiModel }
    
        MessageDialog {
            id: messageDialog
            function show(title, text) {
                messageDialog.title = title;
                messageDialog.text = text;
                messageDialog.open();
            }
        }
    }
    

    the table is totally white, no borders or colored stripes.



  • i also tried this in another window.
    whit the same result.

    import QtQuick 2.3
    import QtQuick.Controls 1.2
    
    ApplicationWindow {
        visible: true
        width: 800
        height: 800
        minimumWidth: 800
        minimumHeight: 800
        maximumWidth: 800
        maximumHeight: 800
        title: qsTr("Cliente")
    
        Rectangle {
    
            id: rectangle1
            width: parent.width
            height: parent.height
            color: "#ffffff"
            visible: true
    
            ListModel {
                id: libraryModel
                ListElement {
                    npu: "A Masterpiece"
                    conto: "Gabriel"
                }
                ListElement {
                    npu: "Brilliance"
                    conto: "Jens"
                }
                ListElement {
                    npu: "Outstanding"
                    conto: "Frederik"
                }
            }
    
            TableView {
                id: lw
                anchors.fill: parent
                alternatingRowColors: true
                TableViewColumn {
                    role: "npu"
                    title: "NPU"
                    width: rectangle1.width / 2
                }
                TableViewColumn {
                    role: "conto"
                    title: "CONTO"
                    width: rectangle1.width / 2
                }
                model: libraryModel
            }
        }
    }
    

  • Lifetime Qt Champion

    You can try by setting a TableViewStyle so you ensure that you have two different colors.



  • @SGaist

    ok this seems to work:

            TableView {
                id: lw
                x: 0
                y: 0
                width: parent.width
                height: parent.height
                TableViewColumn {
                    role: "npu"
                    title: "NPU"
                    width: clientiRoot.width / 2
                    movable: false
                }
                TableViewColumn {
                    role: "conto"
                    title: "CONTO"
                    width: clientiRoot.width / 2
                    movable: false
                }
                onDoubleClicked: {
                    var choosed = clientiModel.get(row).npu;
                    var comp = Qt.createComponent("Cliente.qml");
                    var wind = comp.createObject(clientiRoot, {"npu": choosed});
                    wind.show();
                }
                model: clientiModel
                style: TableViewStyle {
                        backgroundColor: "#fff"
                        alternateBackgroundColor: "#ccc"
                }
            }
    

    thanks!!!


Log in to reply
 

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