Unsolved Creating a dynamique table with item inside
-
@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 MyScriptRectangle {
id: appWindow
property alias mouseArea: mouseAreawidth: 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 MyScriptWindow {
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 daySimon
-
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.