Is it possible to set a dynamic height for Tableview ?

Arkning

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.

sierdzio

@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/

Arkning

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

sierdzio

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.

Arkning

@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.

Arkning

@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
}

}

Oussama Kh - IPeculiar

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
        }
    }

Arkning

@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)

Oussama Kh - IPeculiar

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

Arkning

@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

Arkning

@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

Oussama Kh - IPeculiar

@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"
                }
            }
        }
    }
}

Arkning

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.