Creating a dynamique table with item inside



  • 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



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

    Also create the object dynamically wherever u require.



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



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



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



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



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

    Simon



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



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


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



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



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



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


Log in to reply
 

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