Creating a dynamique table with item inside

Salydan

Hi everyone,

I would like to create a dynamique table that will allow the user to select name in a comboBox. If the user validate the row, a new one appear below.
You can see my idea on the picture below.
Interface presentation
Does anyone have an idea to do that in QML ?
Just tell me what kind of object I need to use because for the moment I have no idea...

Thanks for your time

Regards
Simon

dheerendra

You can use combobox, buttons, row layout, column layout & some signal handlers to make this happen.

Also create the object dynamically wherever u require.

Salydan

@dheerendra Yes it's a good idea, like that I can do something who looks like an array. I'll try that an give you some news if it works fine.

Salydan

@dheerendra Your solution work fine, I would like to know how can I apply an "onClicked" on the "Delete" button. Indeed these will be dynamically created so it's impossible to know in advance the id of each. Can you help me about that ?

Again thank you

Simon

dheerendra

Can u put sample of what u r doing . Then I can modify and send u the same.

Salydan

@dheerendra said in Creating a dynamique table with item inside:

ut sample of what u r doing . Then I can modify and sen

Hi,

This is an example of my script

MainForm.ui.qml

import QtQuick 2.6
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3
import "qrc:componentCreation.js" as MyScript

Rectangle {
id: appWindow
property alias mouseArea: mouseArea

width: 800
height: 800
color: "#ffffff"
property alias addButton: addButton
property alias gridView: gridView
property alias appWindow: appWindow
property alias columnLayout: columnLayout
property alias labelTitre: labelTitre
property alias comboBoxHB: comboBoxHB

ColumnLayout {
    id: columnLayout
    y: 130
    width: parent.width/1.5 //458
    height: 40
    anchors.horizontalCenter: parent.horizontalCenter

    RowLayout {
        id: rowLayout1
        spacing: parent.width/400
        Layout.fillHeight: true
        Layout.fillWidth: true
        Layout.alignment: Qt.AlignHCenter | Qt.AlignTop

        Rectangle {
            id: colNumero
            width: (columnLayout.width / 4)-(4*parent.width/400)
            height: 40
            color: "#a78a8a"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
            
            Text {
                id: text2
                text: qsTr("Numéro")
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
                horizontalAlignment: Text.AlignHCenter
                font.bold: true
                font.pixelSize: 16
            }
        }

        Rectangle {
            id: colCapteur
            width: (columnLayout.width / 4)+(2*parent.width/400)
            height: 40
            color: "#a78a8a"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter

            Text {
                id: text1
                text: qsTr("Capteur")
                font.bold: true
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
                horizontalAlignment: Text.AlignHCenter
                font.pixelSize: 16
            }
        }

        Rectangle {
            id: colFrequence
            width: (columnLayout.width / 4)+(2*parent.width/400)
            height: 40
            color: "#a78a8a"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.alignment: Qt.AlignRight | Qt.AlignVCenter

            Text {
                id: text3
                text: qsTr("Fréquence")
                font.bold: true
                horizontalAlignment: Text.AlignHCenter
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
                font.pixelSize: 16
            }
        }

        Rectangle {
            id: colAction
            width: (columnLayout.width / 4)+(2*parent.width/400)
            height: 40
            color: "#a78a8a"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
            Text {
                id: text4
                text: qsTr("Action")
                anchors.verticalCenter: parent.verticalCenter
                font.bold: true
                anchors.horizontalCenter: parent.horizontalCenter
                horizontalAlignment: Text.AlignHCenter
                font.pixelSize: 16
            }
        }
    }
}

Button {
    id: addButton
    y: 130
    width: 40
    height: 40
    checkable: true
    padding: 6
    bottomPadding: 6
    anchors.left: columnLayout.right
    anchors.leftMargin: 6
    topPadding: 6
    text: "Add"
}

GridView {
    id: gridView
    y: 176
    width: columnLayout.width
    height: parent.height/1.5
    anchors.horizontalCenter: columnLayout.horizontalCenter
    clip: true
    interactive: true
    highlightFollowsCurrentItem: true
    snapMode: GridView.SnapToRow
    cacheBuffer: 320
    contentWidth: 300
    cellWidth: columnLayout.width
    flow: GridView.FlowLeftToRight
    flickableDirection: Flickable.VerticalFlick
    boundsBehavior: Flickable.StopAtBounds
    keyNavigationWraps: false
    contentHeight: 170
    Layout.fillHeight: true
    Layout.fillWidth: true
    cellHeight: 45
    ScrollBar.vertical: ScrollBar {}
    model: ListModel {
        ListElement {
            number: "1"
        }
    }
    delegate: Item {
        x: 5
        height: 50
        width: 200
        Row {
            spacing: parent.width/400
            Text {
                width: colNumero.width
                id: numCapteur
                text: number
                font.italic: true
                horizontalAlignment: Text.AlignHCenter
                anchors.verticalCenter: parent.verticalCenter
                font.pixelSize: 13
            }

            ComboBox {
                id: comboBoxSensor
                width: colCapteur.width
                textRole: "key"
                model: ListModel {
                    ListElement {
                        key: "TMP36"
                        value: 1
                    }
                    ListElement {
                        key: "LMT85"
                        value: 2
                    }
                    ListElement {
                        key: "TOR"
                        value: 3
                    }
                    ListElement {
                        key: "SHT10"
                        value: 4
                    }
                }
            }
            ComboBox {
                id: comboBoxFrequence
                width: colFrequence.width
                textRole: "key"
                model: ListModel {
                    ListElement {
                        key: "5 minutes"
                        value: 1
                    }
                    ListElement {
                        key: "10 minutes"
                        value: 2
                    }
                    ListElement {
                        key: "15 minutes"
                        value: 3
                    }
                    ListElement {
                        key: "30 minutes"
                        value: 4
                    }
                    ListElement {
                        key: "1 heure"
                        value: 4
                    }
                    ListElement {
                        key: "2 heures"
                        value: 4
                    }
                    ListElement {
                        key: "3 heures"
                        value: 4
                    }
                    ListElement {
                        key: "4 heures"
                        value: 4
                    }
                    ListElement {
                        key: "5 heures"
                        value: 4
                    }
                    ListElement {
                        key: "6 heures"
                        value: 4
                    }
                    ListElement {
                        key: "12 heures"
                        value: 4
                    }
                    ListElement {
                        key: "24 heures"
                        value: 4
                    }
                }
            }
            Button {
                id: buttonEdit
                spacing: parent.width/400
                width: colAction.width/2
                height: 40
                text: "Edit"
            }
            Button {
                id: buttonDelete
                spacing: parent.width/400
                width: colAction.width/2
                height: 40
                text: "Delete"
            }
        }
    }
}

}

main.qml

import QtQuick 2.6
import QtQuick.Window 2.2
import "componentCreation.js" as MyScript

Window {
visible: true
width: 640
height: 480
title: qsTr("Sample")

MainForm {
    anchors.fill: parent
    mouseArea.onClicked: {
        console.log(qsTr('Clicked on background. Text: "' + textEdit.text + '"'))
    }
    addButton.onClicked: {
        gridView.model.insert(MyScript.indexCapteur, {"number": (MyScript.indexCapteur+1).toString()})
        MyScript.indexCapteur++
    }
}

}

thank you very much

Regards
Simon

Salydan

@dheerendra Hi, did you find something about this problem ?
Thank you
Have a good day

Simon

dheerendra

What r u doing in MyScript ? I don't have that .

dheerendra

OK. I modified your program to make it suite without script.

Index is property which is available in every delegate object. This represents the row in the model. See the following sample of code. Tried and works.

    addButton.onClicked: {
        var val = gridView.model.count+1;
        console.log(val);
        gridView.model.insert(gridView.currentIndex+1, {"number": val.toString()})
    }

            Button {
                id: buttonDelete
                spacing: parent.width/400
                width: colAction.width/2
                height: 40
                text: "Delete"
                onClicked: {
                    console.log(index)
                    gridView.model.remove(index)
                }
            }

Salydan

@dheerendra said in Creating a dynamique table with item inside:

            onClicked: {
                console.log(index)
                gridView.model.remove(index)
            }

Thank you for your response. When I try to add the "onClicked" part for the "buttonDelete" in "MainForm.ui.qml" qt display "JavaScript blocks are not supported in a Qt quick UI Form (M223)" Can you tell me where I need to paste your sample script ?

Thank you

dheerendra

Give me your mail-id. I will send the complete program now itself.

Salydan

@Salydan So the include was missing. It's ok now, I just need to create the button in the same time of the action on the "addButton"

Thank you very much

dheerendra

Cool. That is nice to hear. Benz it is working for me without any issue. N'joy the same. U can move this issue to SOLVED state.