Is it possible to set a dynamic height for Tableview ?



  • Hi,

    So I wanted to have a TableView between two button and when I set the top anchors it works but when I add the bottom one I can't see the window of my application. So my question is why when the height is dynamic for TableView it doesn't work ? And is there an equivalent of tableView in QtQuick.Controls 2.1 ?

    I can post my code if its needed.

    Thanks in advance for the answers.


  • Moderators

    @Arkning said in Is it possible to set a dynamic height for Tableview ?:

    And is there an equivalent of tableView in QtQuick.Controls 2.1 ?

    Not yet. More info http://blog.qt.io/blog/2016/10/06/qt-quick-controls-2-1-and-beyond/



  • @sierdzio ok Thanks but do you have any clue why when I want a dynamic Tableview is doesn't work ?


  • Moderators

    Have your tried putting it into a ColumnLayout? Something like:

    ColumnLayout {
    Button {}
    TableView {}
    Button {}
    }
    

    Also, when you set up anchors, remember to set left and right one, too (or at least set "width" property) otherwise - maybe - your table view is there, but with width == 0 and thus invisible.



  • @sierdzio Yes it's in a ColumnLayout but the problem has I said it's not the width but the height actually. The problem is that if i set for example :
    anchors.top: button_1.bottom
    anchors.bottom: button_2.top
    It doesn't work but it works if I do :
    anchors.top or bottom + asign a implicitHeight or preferredHeight but if I give a dynamic value to those element it doesn't work.



  • @sierdzio There is my code :
    ColumnLayout {
    id: mainview
    anchors.fill: parent

    Text {
        id: typo
        text: qsTr("Typologie")
        font.pointSize: 20
        anchors.verticalCenter: mainview.top
        anchors.horizontalCenter: mainview.left
        anchors.verticalCenterOffset: typo.contentHeight
        anchors.horizontalCenterOffset: typo.contentWidth
    }
    
    ComboBox {
        id: cb
        model: [ "", "house 1", "house 2", "house 3", "house 4", "house 5" ]
        Layout.preferredWidth: 300
        anchors.verticalCenter: typo.verticalCenter
        anchors.horizontalCenter: mainview.horizontalCenter
    }
    
    Button {
        id: o_typo
        onClicked: dialog.open()
        Layout.preferredWidth: o_typo_text.contentWidth + 30
        anchors.verticalCenter: typo.verticalCenter
        anchors.horizontalCenter: mainview.right
        anchors.horizontalCenterOffset: - o_typo.width
    
        Text {
            id: o_typo_text
            text: "Gérer les typologies..."
            anchors.centerIn: parent
        }
    }
    
    Dialog {
        id: dialog
        x: 400
        y: 100
        width: 800
        modal: true
        focus: true
        title: qsTr("Gestion des typologies")
        height: 700
        //standardButtons: Dialog.Ok | Dialog.Cancel | Dialog.Save
        onAccepted: console.log("Ok clicked")
        onRejected: console.log("Cancel clicked")
    
        ColumnLayout {
            id: v_top
    
            Text {
                id: n_typo
                Layout.topMargin: 30
                Layout.leftMargin: 30
                text: qsTr("Typologie")
                font.pointSize: 20
            }
    
            ComboBox {
                id: n_cb
                Layout.leftMargin: 400
                Layout.preferredWidth: 300
                anchors.verticalCenter: n_typo.verticalCenter
                model: [ "", "house 1", "house 2", "house 3", "house 4", "house 5" ]
            }
    
            CheckBox { id:opt1 ; text: qsTr("Opt 1") ; Layout.leftMargin: 30 ; Layout.preferredWidth: 100 }
            CheckBox { id:opt2 ; text: qsTr("Opt 2") ; Layout.leftMargin: 30 ; Layout.preferredWidth: 100 }
            CheckBox { id:opt3 ; text: qsTr("Opt 3") ; Layout.leftMargin: 30 ; Layout.preferredWidth: 100 }
    
            Text {
                id: t_opt
                anchors.verticalCenter: opt1.verticalCenter
                anchors.horizontalCenter: n_cb.horizontalCenter
                text: qsTr("XX")
            }
    
            ComboBox {
                anchors.verticalCenter: t_opt.verticalCenter
                Layout.alignment: Qt.AlignRight
                model: [ "", "1", "2", "3..." ]
            }
    
            Text {
                id: t_opt1
                anchors.verticalCenter: opt2.verticalCenter
                anchors.horizontalCenter: n_cb.horizontalCenter
                text: qsTr("YY")
            }
    
            ComboBox {
                anchors.verticalCenter: t_opt1.verticalCenter
                Layout.alignment: Qt.AlignRight
                model: [ "", "1", "2", "3..." ]
            }
        }
    
        footer: DialogButtonBox {
            Button { id: end ; text: qsTr("Quitter") ; onClicked: dialog.close() }
        }
    }
    
    Button {
        id: check
        anchors.left: o_typo.left
        anchors.right: o_typo.right
        anchors.verticalCenter: parent.bottom
        anchors.verticalCenterOffset: - check.height
    
        Text { id: check_text ; text: "Valider les typologies" ; anchors.centerIn: parent }
    }
    
    Rectangle {
        id: tricks
        color: "white"
        anchors.left: typo.left
        anchors.right: o_typo.right
        anchors.top: typo.bottom
        anchors.bottom: check.top
    }
    
    ListModel {
        id: equipmentModel
    
        ListElement  {  name: "sofa" ; state: "OUI" }
        ListElement  {  name: "TV" ; state: "NON" }
    }
    
    TableView {
        id: view
        width: parent.width
        implicitHeight: 200
        anchors.left: typo.left
        //anchors.bottom: check.top
        anchors.top: typo.bottom
        anchors.right: o_typo.right
        anchors.topMargin: 50
    
        TableViewColumn {
            role: "name"
            title: qsTr("Equipment")
            width: view.width / 3
            movable: false
            resizable: false
        }
    
        TableViewColumn {
            movable: false
            resizable: false
            width: view.width / 3
            title: qsTr("Connecté")
            role: "state"
            delegate: Rectangle {
                color: if (styleData.value === "OUI") { "white" }
                       else { "orange" }
    
                Text { text: styleData.value }
            }
        }
    
        TableViewColumn {
            movable: false
            resizable: false
            width: view.width / 3
            title: qsTr("Reference")
            role: "reference"
            delegate: ComboBox {
                anchors.fill: parent
                model: [ "Reference", "Test", "N/A" ]
            }
        }
        model: equipmentModel
    }
    

    }



  • that's the expected logical behaviour for your code
    when you set

    anchors.top: typo.bottom
    anchors.bottom: check.top
    

    it's just like you set fixed height so it should have fixed height with scroll bar
    Note: when you use ColumnLayout you should not use anchors instead use
    Layout.fillWidth: true // for full width
    and let the height be automatically set

    now the best solution for you is to use flickable

    ColumnLayout {
            anchors.fill: parent
    
            Button {
                implicitHeight: 48
                Layout.fillWidth: true
            }
    
            Flickable {
                clip: true
                Layout.fillWidth: true
                Layout.fillHeight: true // or give it fixed height depend on your needs
    
                contentHeight: view.height
                flickableDirection: Flickable.VerticalFlick
    
                TableView {
                    id: view
                    width: parent.width
                }
            }
    
            Button {
                implicitHeight: 48
                Layout.fillWidth: true
            }
        }
    


  • @Oussama-Kh---IPeculiar Thanks for the answer but I still have the same problem it doesn't do what i want.
    The Flickable juste made the TableView moving I don't want that, I just want that the eight of my TableView is the height between my top and bottom button.
    If I get it correctly the anchors doesn't work because the Tableview inherit Scrollbar ? Because when I set a rectangle with anchors top and bottom it works and its get the height that I want but I have no clue why it doesn't work with TableView or what can I do to make my TableView have the good height (of course it will never be a fixed height for me because I want a dynamic one)



  • @Arkning
    the anchors doesn't work because you're using ColumnLayout
    Can you illustrate what you want with images ?



  • @Oussama-Kh---IPeculiar 0_1493995657494_Capture d'écran de 2017-05-05 16-45-19.png
    So I want my the height of my TableView is equal to the black rectangle



  • @Oussama-Kh---IPeculiar And I don't think that the anchors doesn't work because of the ColumnLayout see my code I almost only use anchors to set my position, for example the black rectangle is set with anchors



  • @Arkning
    try this

    Item {
        RowLayout {
            id: headControls
    
            height: 48
            anchors.margins: 16
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.right: parent.right
    
            spacing: 8
    
            Text {
                id: typo
    
                text: qsTr("Typologie")
    
                font.pointSize: 20
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
            }
    
            ComboBox {
                id: cb
                Layout.fillWidth: true
                model: ["", "house 1", "house 2", "house 3", "house 4", "house 5"]
            }
    
            Button {
                id: o_typo
                Layout.fillWidth: true
                text: "Gérer les typologies..."
    
                onClicked: dialog.open()
            }
        }
    
        ColumnLayout {
            id: mainview
            anchors.top: headControls.bottom
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            anchors.margins: 16
    
            spacing: 16
    
            Button {
                id: check
                Layout.fillWidth: true
                text: "Valider les typologies"
            }
    
            TableView {
                id: view
                Layout.fillWidth: true
                Layout.fillHeight: true
    
                TableViewColumn {
                    width: view.width / 3
    
                    role: "name"
                    title: qsTr("Equipment")
    
                    movable: false
                    resizable: false
                }
    
                TableViewColumn {
                    width: view.width / 3
    
                    title: qsTr("Connecté")
    
                    movable: false
                    resizable: false
    
                    role: "state"
                    delegate: Rectangle {
                        color: if (styleData.value === "OUI") {
                                   "white"
                               } else {
                                   "orange"
                               }
    
                        Text {
                            text: styleData.value
                        }
                    }
                }
    
                TableViewColumn {
                    width: view.width / 3
    
                    role: "reference"
                    title: qsTr("Reference")
    
                    movable: false
                    resizable: false
    
                    delegate: ComboBox {
                        anchors.fill: parent
                        model: ["Reference", "Test", "N/A"]
                    }
                }
    
                model: ListModel {
                    id: equipmentModel
    
                    ListElement {
                        name: "sofa"
                        state: "OUI"
                    }
                    ListElement {
                        name: "TV"
                        state: "NON"
                    }
                }
            }
        }
    }
    


  • Thanks it's working !!! But now I have an other issue it's that I'm using a StackLayout and a TabBar, and when i copy paste the code inside my fisrt view it doesn't work but when it's in the second or third view it works and I don't know why.


Log in to reply