I have a ListModel like the following:
ListModel {
id: liveFeedModel
ListElement {
modelSrc: [
ListElement { src: "../img/pano.jpg" },
ListElement { src: "../img/pano1.jpg" },
ListElement { src: "../img/pano2.jpg" },
ListElement { src: "../img/pano3.jpg" }
]
name: "Cookies"
temp: "456 °C"
time: "--:--"
}
ListElement {
modelSrc: [
ListElement { src: "../img/pano2.jpg" }
]
name: "Sourdough Roll"
temp: "123 °F"
time: "--:--"
}
}
And I would like to set the value of the nested ListElements within modelSrc.
I am looking for something similar to:
liveFeedModel.get(0).modelSrc.get(2).src
except with set, setProperty, or something along those lines, instead of get
Thanks in advance
use:
myListView.model.get(0).modelSrc.setProperty(0, "src", "../img/pano2.jpg");
simple as that!
Related
I'm using Qt 5.15.2 LTS for developing.
Suppose I have following ComboBox:
ComboBox {
id: myComboBox
ListModel {
id: myModel
}
model: myModel
delegate: ItemDelegate {
text: name
}
Component.onCompleted: {
myModel.append({ "name": "1", "value": "val1" });
myModel.append({ "name": "2", "value": "val2" });
myModel.append({ "name": "3", "value": "val3" });
myModel.append({ "name": "4", "value": "val4" });
}
}
When compiling my application, I get the following GUI output:
The ComboBox is just empty - however when calling
console.log("model.count: " + myModel.count) in Component.onCompleted, I get the output qml: model.count: 4 so the model seems to be filled but somehow the contents are not displayed.
However, when substituting ComboBox with ListView:
ListView {
id: myComboBox
ListModel {
id: myModel
}
model: myModel
delegate: ItemDelegate {
text: name
}
Component.onCompleted: {
myModel.append({ "name": "1", "value": "val1" });
myModel.append({ "name": "2", "value": "val2" });
myModel.append({ "name": "3", "value": "val3" });
myModel.append({ "name": "4", "value": "val4" });
}
}
I am getting the deserved output:
According to the QML ComboBox docs, the ComboBox should be perfectly fine being populated with a ListModel:
ComboBox {
currentIndex: 2
model: ListModel {
id: cbItems
ListElement { text: "Banana"; color: "Yellow" }
ListElement { text: "Apple"; color: "Green" }
ListElement { text: "Coconut"; color: "Brown" }
}
width: 200
onCurrentIndexChanged: console.debug(cbItems.get(currentIndex).text + ", " + cbItems.get(currentIndex).color)
}
How come the behaviors differ so much? What do I have to do to fill my ComboBox in a proper way using Javascript?
Try to set the currentIndex property. This is coming from the documentation:
currentIndex
The default value is -1 when count is 0, and 0 otherwise.
My guess is because you are adding the items to the model after the creation of the ComboBox the currentIndex keeps its intial value of -1, hence nothing is selected. When you open the ComboBox you can see the values, but by default none is selected.
Also another thing I did was to add the textRole property. You should also add the valueRole property. I've tested it with both Qt 5.15.11 and 6.4.0.
You should read the paragraph ComboBox Model Roles.
ComboBox {
id: myComboBox
ListModel {
id: myModel
}
textRole: "name"
currentIndex: 0
model: myModel
delegate: ItemDelegate {
text: name
}
Component.onCompleted: {
myModel.append({ "name": "1", "value": "val1" });
myModel.append({ "name": "2", "value": "val2" });
myModel.append({ "name": "3", "value": "val3" });
myModel.append({ "name": "4", "value": "val4" });
}
}
There's no real need to change the delegate just to display your content. It is enough to set textRole: "name". As a recommendation, it is generally best to separate the UI and non-UI components, so, I have moved the ListModel and Component.onCompleted to the bottom of the file:
import QtQuick
import QtQuick.Controls
Page {
ComboBox {
id: myComboBox
model: myModel
textRole: "name"
}
ListModel {
id: myModel
}
Component.onCompleted: {
myModel.append({ "name": "1", "value": "val1" });
myModel.append({ "name": "2", "value": "val2" });
myModel.append({ "name": "3", "value": "val3" });
myModel.append({ "name": "4", "value": "val4" });
}
}
You can Try it Online!
I'm new to qml and I need to write a simple list with 3 columns and an undefined number of rows showing the output of a log using a tableview. The first column shows the type (error, warning, info). Depending on this keywords I need to change the color of that row. I found code where I was able to change the color of all rows, but not individually depending on the data content. This is my starting point:
import QtQuick 2.13
import QtQuick.Window 2.11
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.4
import QtQuick.Controls 1.4 as QtC1
import QtQuick.Dialogs 1.2
ApplicationWindow {
id: applicationWindow
visible: true
width: 640
height: 480
title: qsTr("Log")
ListModel {
id: listModel
ListElement { category: 'warning'; type: "DEVICE IN USE"; comment: "Device with ID: PS-0002 is in use by Line with ID: L-0001A" }
ListElement { category: 'error'; type: "DEVICE IS OFFLINE"; comment: "Cannot reach device with ID: PS-0006 IP: 192.169.0.112 Port: 788" }
ListElement { category: 'info'; type: "DEVICE STATUS"; comment: "Device PS-00013 is ready for use." }
ListElement { category: 'info'; type: "DEVICE STATUS"; comment: "Device PS-00014 is ready for use." }
ListElement { category: 'info'; type: "DEVICE STATUS"; comment: "Device PS-00015 is ready for use." }
ListElement { category: 'info'; type: "DEVICE STATUS"; comment: "Device PS-00016 is ready for use." }
}
ColumnLayout
{
anchors.fill: parent
transformOrigin: Item.Center
Label {
id: logLabel
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
font.pixelSize: 22
text: qsTr("Summary")
Layout.topMargin: 13
}
QtC1.TableView {
id: tv
Layout.fillHeight: true
Layout.preferredHeight: 18
Layout.preferredWidth: 9
Layout.fillWidth: true
rowDelegate: Rectangle {
color: styleData.value ? "blue":"white"
}
/* Create columns */
QtC1.TableViewColumn
{
id: tv_category
horizontalAlignment: Text.AlignLeft
role: qsTr("category")
title: qsTr("Category")
width: 100
}
QtC1.TableViewColumn
{
id: tv_type
horizontalAlignment: Text.AlignLeft
role: qsTr("type")
title: qsTr("Type")
width: 100
}
QtC1.TableViewColumn
{
id: tv_comment
horizontalAlignment: Text.AlignRight
role: qsTr("comment")
title: qsTr("Comment")
width: contentWidth
}
model: listModel
}
}
}
Any help would be appreciated.
Martin
In the rowDelegate you have access to the row index (using styleData.row). Just use it to get the item from the list model like this:
rowDelegate: Rectangle {
color: {
var item = listModel.get(styleData.row)
if (item.category === "info")
return "skyblue"
else if (item.category === "warning")
return "yellow"
else if (item.category === "error")
return "red"
return "skyblue"
}
}
I have a simple text vega ata table which we use in Kibana, it works fine, but I'm trying to find a way to order the results based on the arrival date, code below:
{
$schema: https://vega.github.io/schema/vega/v3.json
config: {
title: {offset: 20, fontSize: 14, font: "Helvetica", anchor:"start"}
}
title: {
text: Departure Airport Arrival Time
}
background: white
width: 1200
height: 100
padding: {"left": 0, "top": 5, "right": 5, "bottom": 5}
autosize: {type: "pad"}
// Define the data source
data: [
{
name: source
url: {
// change "index" to the name of the index
index: myindex*
"%context%": true
body: {
size: "10"
}
}
format: {property: "hits.hits"}
transform: [
{
type: flatten
// change fields to the actual path for flight segment but keep _source as a prefix
fields: ["_source.Something.FlightSegment"]
as: ["val"]
}
{
type: formula
as: x_position
expr: width * 1 / 4
}
{type: "formula", as: "line_height", expr: "20"}
{
type: stack
groupby: ["x_position"]
field: line_height
as: ["y0", "y1"]
}
]
}
]
marks: [
{
type: text
from: {data: "source"}
interactive: true
encode: {
enter: {
x: {field: "x_position", offset: -250}
y: {field: "y0"}
y2: {field: "y1"}
align: {value: "right"}
text: {field: "val.DepartureAirportCode"}
font: {value: "Helvetica"}
fontSize: {value: 14}
}
}
}
{
type: text
from: {data: "source"}
interactive: true
encode: {
enter: {
x: {field: "x_position", offset: -150}
y: {field: "y0"}
y2: {field: "y1"}
align: {value: "left"}
text: {field: "val.ArrivalDateTime"}
font: {value: "Helvetica"}
fontSize: {value: 14}
}
}
}
]
}
This is the result here:
You can see that the results are returned, but are out of order. What I would like to do is order it by ArrivalDateTime.
My problem is that most tutorials I have seen are for actual graphs and not for just plain old text.
Really appreciate anyone helping me out here.
I was curious about this too so found Vega lite sort
Especially sort by encoding from another field will do the job.
I have a ListView ListModel with 10 ListElements, I want the ListView to display the first ListElement from the model.
Is there a way to limit the number of ListElement items that are displayed, or select the ListElement to display from an ID in the data?
Example ListModel:
ListModel {
id: homeMenuModelData
ListElement {
name: "Sam Wise Is A Very Wise Man"
number: "555 0473"
}
ListElement {
name: "Bill Smith"
number: "555 3264"
}
ListElement {
name: "John Brown"
number: "555 8426"
}
}
The ListView:
ListView {
anchors.fill: parent
interactive: false
model: HomeMenuModel
delegate: homeMenuDelegate
highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
focus: true
}
I'm thinking something like this would be useful to me:
model.clear();
for( var i=0; i < bookList.length ; ++i ) {
model.append(bookList[i]);
}
****** Updated ******
Props to #folibis (below comments) for the suggestion, good explanation here of using DelegateModel and filterOnGroup: Is it possible to show only certain indexes of a QML listview?
I have kendo tree-view in my application,I want to apply the styles for kendo tree-view parent node only.How to apply the styles like Font weight-bold for the parent node of tree-view?
My treeview code is
var tree= $("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
dataSource: [{
id: 2, text: "select all", expanded: true,
items: [
{ id: 3, text: "ABH" },
{ id: 4, text: "VFG" },
{ id: 5, text: "VFGT" },
{ id: 6, text: "GTYUJ" },
{ id: 7, text: "GHJ" }
]
}]
}).data("kendoTreeView");
here is the JSfiddle.
Try to configure this in scripts.
.k-top.k-bot {font-weight: bold;}