How to fill a QTableview using QML Tool Button - qml

Question

I need to press my create button under red circle and by pressing this button i am trying to fill first row of my table view. I am a new user in QT Quick please help me. I have wasted lot of time but have no way to do it.
I am providing UI and code as well please have a look.
Thank you !
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.0
import QtQuick.Dialogs 1.0
import "content"
import "images"
ApplicationWindow {
visible: true
title: "Mask Editor: Subsystem"
width: 720
height: 420
minimumHeight: 400
minimumWidth: 720
statusBar: StatusBar {
id: minstatusbar
RowLayout {
id:row1
spacing: 2
width: parent.width
Button {
text:"Unmask"
}
Item { Layout.fillWidth: true }
Button {
text:"OK"
}
Button {
text:"Cancel"
}
Button {
text:"Help"
}
Button {
text:"Apply"
}
}
}
/* ListModel {
id: largeModel
Component.onCompleted: {
for (var i=0 ; i< 10 ; ++i)
largeModel.append({"index":i , "prompt": "pmpt", "variable":i+10, "type" : "Female","tabname":"something"})
}
}*/
Action {
id: openAction
text: "&Open"
shortcut: "Ctrl+O"
iconSource: "images/document-open.png"
onTriggered: fileDialog.open()
tooltip: "Open an Image"
}
TabView {
id:frame
enabled: enabledCheck.checked
tabPosition: controlPage.item ? controlPage.item.tabPosition : Qt.TopEdge
anchors.fill: parent
anchors.margins: Qt.platform.os === "osx" ? 12 : 2
Tab {
id: controlPage
title: "Parameters"
Item {
id:root
anchors.fill: parent
anchors.margins: 8
ColumnLayout {
id: mainLayout
anchors.fill: parent
spacing: 4
GroupBox {
id: gridBox
title: "Grid layout"
Layout.fillWidth: true
ListModel {
id: nestedModel
ListElement{index:"1";prompt:"pmt";variable:10; type: "to be defined";tabname:"something"}
}
GridLayout {
id: gridLayout
anchors.fill: parent
rows: 3
flow: GridLayout.TopToBottom
ToolButton { iconSource: "images/window-new.png"
action:filldata
Accessible.name: "New window"
onClicked: {
nestedmodel.append({"index":i , "prompt": "pmpt", "variable":i+10, "type" : "Female","tabname":"something"})
}
tooltip: "Toggle visibility of the second window" }
ToolButton { iconSource: "images/view-refresh.png"
onClicked: window1.visible = !window1.visible
Accessible.name: "New window"
tooltip: "Toggle visibility of the second window" }
ToolButton { Accessible.name: "Save as"
iconSource: "images/document-save-as#2x.png"
tooltip: "(Pretend to) Save as..." }
TableView{
model: modelcontl
Layout.rowSpan: 3
Layout.fillHeight: true
Layout.fillWidth: true
//anchors.fill: parent
TableViewColumn {
role: "index"
title: "#"
width: 36
resizable: false
movable: false
}
TableViewColumn {
role: "prompt"
title: "Prompt"
width: 120
}
TableViewColumn {
role: "variable"
title: "Variable"
width: 120
}
TableViewColumn {
role: "type"
title: "Type"
width: 200
visible: true
}
TableViewColumn {
role: "tabname"
title: "Tab Name"
Layout.fillWidth: true
visible: true
}
}
}
}
Rectangle{
Layout.fillHeight: true
Layout.fillWidth: true
GridLayout {
//id: gridLayout
rows: 1
flow: GridLayout.TopToBottom
anchors.fill: parent
GridLayout{
id: grid1
columns: 2
anchors.fill: parent
GroupBox {
//id: gridBox
title: "Grid layout"
Layout.fillHeight: true
Layout.fillWidth: true
}
GroupBox {
//id: gridBox
title: "Grid layout"
Layout.fillHeight: true
Layout.fillWidth: true
}
}
}
}
}
}
}
Tab {
title: "Documentation"
Controls { }
}
Tab {
title: "dialog"
MessageDialogs { }
}
}
}

Answer 1

If you want to add a QML control into a cell you just have to define custom delegate. Since you need different delegates for different columns it can be done in a bit "tricky" way with Loader. See my example below:
Component {
id: comboDelegate
ComboBox {
model: ListModel {
ListElement { text: "Banana" }
ListElement { text: "Apple" }
ListElement { text: "Coconut" }
}
}
}
Component {
id: textDelegate
Text {
text: itemText
}
}
TableView {
Layout.fillWidth: true
Layout.fillHeight: true
TableViewColumn{ role: "col1" ; title: "Column1" }
TableViewColumn{ role: "col2" ; title: "Column2" }
TableViewColumn{ role: "col3" ; title: "Column3" }
model: ListModel {
id: myModel
}
itemDelegate: Item {
height: 25
Loader {
property string itemText: styleData.value
sourceComponent: styleData.column === 0 ? comboDelegate : textDelegate
}
}
}

Answer 2

Try this:
TableView {
TableViewColumn{ role: "col1" ; title: "Column1" }
TableViewColumn{ role: "col2" ; title: "Column2" }
TableViewColumn{ role: "col3" ; title: "Column3" }
model: ListModel {
id: myModel
}
}
Button {
text: "Add row"
onClicked: {
myModel.append({col1: "some value",
col2: "Another value",
col3 : "One more value" });
}
}