I'm trying to create a list and append values to it that I've retrieved from xml http request. I've tested just a text block with the value of typeAssetProcess and it prints fine, but when I start trying to use a list is when everything starts to break. What am I doing wrong and how can I fix it?
import QtQuick 2.0
import "../controls" as Controls
Item {
Column {
id: column
width: parent.width
height: parent.height
}
ListView {
id: listView
width: parent.width
height: parent.height
model: ListModel {
ListElement {
name: qstr("Proccess: %1").arg(typeAssetProcess)
colorCode: "grey"
}
ListElement {
name: "Red"
colorCode: "red"
}
ListElement {
name: "Blue"
colorCode: "blue"
}
ListElement {
name: "Green"
colorCode: "green"
}
}
delegate: Item {
x: 5
width: 80
height: 40
Row {
id: row1
Rectangle {
width: 40
height: 40
color: colorCode
}
Text {
text: name
font.bold: true
anchors.verticalCenter: parent.verticalCenter
}
spacing: 10
}
}
}
}
This code is what is breaking:
ListElement {
name: qstr("Proccess: %1").arg(typeAssetProcess)
colorCode: "grey"
}
This is a known limitation to the ListElement type, containing a "collection of role definitions instead of properties". This is why you can not use script or property binding for these roles (otherwise you get the error ListElement: cannot use script for property value).
Improvements are frequently requested to the Qt team but as far as I know there is no implementation yet.
One thing you can do is dynamically initialize the model instead of using fixed ListElement:
ListView {
id: listView
readonly property var modelElements: [
{
name: qsTr("Proccess: %1").arg(typeAssetProcess),
colorCode: "grey"
},
{
name: "Red",
colorCode: "red"
},
{
name: "blue",
colorCode: "blue"
},
{
name: "Green",
colorCode: "green"
}]
Component.onCompleted: {
modelElements.forEach(function(element) {
model.append(element)
})
}
width: parent.width
height: parent.height
model: ListModel {}
delegate: ...
}
You can also choose to implement your own model in C++.
Related
I'm trying to get multiple label per item on Kendo Column chart
Desired layout looks like this
I was able to get only this layout
import { Component } from '#angular/core';
import { groupBy, GroupResult } from '#progress/kendo-data-query';
import { ValueAxisLabels } from '#progress/kendo-angular-charts';
export type TrendItem = {
clientName: string;
periodName: string;
income: number;
};
#Component({
selector: 'my-app',
template: `
<kendo-chart>
<kendo-chart-category-axis>
<kendo-chart-category-axis-item [categories]="categories">
</kendo-chart-category-axis-item>
</kendo-chart-category-axis>
<kendo-chart-value-axis>
<kendo-chart-value-axis-item [labels]="valueAxisLabels">
</kendo-chart-value-axis-item>
</kendo-chart-value-axis>
<kendo-chart-series>
<kendo-chart-series-item *ngFor="let groupedResult of groupedTrendsByPeriod" [data]="groupedResult.items" field="income" type="column">
<kendo-chart-series-item-labels [content]="labelVisual">
</kendo-chart-series-item-labels>
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`,
})
export class AppComponent {
public valueAxisLabels: ValueAxisLabels = {
font: 'bold 16px Arial, sans-serif',
};
public trendItems: TrendItem[] = [
{
clientName: 'Client1',
periodName: 'Q1 2020',
income: 20,
},
{
clientName: 'Client1',
periodName: 'Q2 2020',
income: 15,
},
{
clientName: 'Client1',
periodName: 'Q3 2020',
income: 35,
},
{
clientName: 'Client1',
periodName: 'Q4 2020',
income: 40,
},
{
clientName: 'Client2',
periodName: 'Q1 2020',
income: 15,
},
{
clientName: 'Client2',
periodName: 'Q2 2020',
income: 20,
},
{
clientName: 'Client2',
periodName: 'Q3 2020',
income: 15,
},
{
clientName: 'Client2',
periodName: 'Q4 2020',
income: 30,
}
];
public categories = (groupBy(this.trendItems, [{ field: 'clientName' }]) as GroupResult[])
.map((e) => e.value);
public groupedTrendsByPeriod = groupBy(this.trendItems, [{ field: 'periodName' }]) as GroupResult[];
public labelVisual(e: { dataItem: TrendItem }) {
return `$${e.dataItem.income}\r\n${e.dataItem.periodName}`;
}
}
You can try this code here.
My current result look like this
So my question is how to display multiple labels per item like on the first picture?
My current obstacles.
I didn't find a way to add multiple <kendo-chart-series-item-labels> elements. Only one will be rendered, rest will be ignored.
I didn't find a way to position labels below column chart. For column chart it's only possible to use "center", "insideBase", "insideEnd", "outsideEnd" options (according to API Reference) but none of them gives me desired position.
You can use the notes feature of the KendoChartComponent.
You can see the implementation here.
You add noteTextField="periodName" [notes]="notesOptions" to your kendo-chart-series-item element.
You add [labels]="labelOptions" to your kendo-chart-category-axis-item element.
You add the following to your component:
public notesOptions = {
position: 'bottom',
icon: {
visible: false,
},
label: {
color: 'black',
content: (e) => e.dataItem.periodName,
font: "12px Arial",
margin: -30,
},
line: {
width: 0,
},
};
public labelOptions = {
margin: {
top: 10,
},
};
Change the labelVisual function return value to `$${e.dataItem.income}\`.
Note: Some changes can be performed and still give the desired design so if something isn't exactly right, it's probably fixable.
Here is an image of the resulting chart:
I don't think kendo provides any native solution for that but what I can suggest is to:
Use legends to display each bar meaning. like the example here.
Use some self generated labels and position them under the table which is risky for UI. I provided an example here.
So I've created the the following codesandbox. I got a webapp that relies heavily on user input. For demonstration purposes I've kept it simple by displaying a bunch of authors on a a4 formatted page. The page and font-size both use vw unit to make it responsive.
As you can see in the codesandbox, the last few authors are forced off the page because it no longer fits inside the container. Ideally I'd like to detect the content that doesn't fit on the page anymore, and generate a second identical a4 page to display that particular content.
Currently in my webapp I've just added overflow: scroll; to the page div where all the content is placed in, so that it at least looks somewhat 'ok'. But it isn't a very good User Experience and I'd like to improve it.
I don't have a clue where to start so any help in the right direction would be very much appreciated.
Thanks in advance.
CSS
#app {
-webkit-font-smoothing: antialiased;
font: 12pt "Tahoma";
}
.book {
margin: 0;
padding: 0;
background-color: #FAFAFA;
font: 3vw "Tahoma";
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.page {
/* overflow: scroll; */
display: block;
width: calc(100 / 23 * 21vw);
height: calc(100 / 23 * 29.7vw);
margin: calc(100 / 23 * 1vw) auto;
border: 1px #D3D3D3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
margin: calc(100 / 23 * 1vw);
width: calc(100 / 23 * 19vw);
height: calc(100 / 23 * 27.7vw);
line-height: 2;
border: 1px solid red;
outline: 0cm #FAFAFA solid;
}
.subpage-content {
height: 100%;
}
Javascript
export default {
name: "App",
data() {
return {
authors: [
{ id: 1, name: "Smith" },
{ id: 2, name: "Johnson" },
{ id: 3, name: "Williams" },
{ id: 4, name: "Jones" },
{ id: 5, name: "Brown" },
{ id: 6, name: "Davis" },
{ id: 7, name: "Miller" },
{ id: 8, name: "Wilson" },
{ id: 9, name: "Moore" },
{ id: 10, name: "Taylor" },
{ id: 11, name: "Anderson" },
{ id: 12, name: "Thomas" },
{ id: 13, name: "Jackson" },
{ id: 14, name: "White" },
{ id: 15, name: "Harris" },
{ id: 16, name: "Martin" },
{ id: 17, name: "Thomspson" },
{ id: 18, name: "Garcia" },
{ id: 19, name: "Martinez" },
{ id: 20, name: "Robinson" },
{ id: 21, name: "Clark" },
{ id: 22, name: "Rodeiquez" },
{ id: 23, name: "Lewis" },
{ id: 24, name: "Lee" }
]
};
}
};
HTML
<template>
<div id="app">
<div class="container-fluid">
<div class="book">
<div class="page">HEADER
<div class="subpage" id="editor-container">Authors:
<!-- <div class="subpage-content">The real content</div> -->
<div v-for="item in authors" :key="item.id">{{ item.name }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
You can view a fork of your code sandbox here.
I changed the data structure (and template) to have a pages array in which each page has an authors array, instead of a single one. Initially, the first page holds all the authors.
data() {
return {
pages: [
{
authors: [
{ id: 1, name: "Smith" },
...
]
}
]
}
}
<div class="page" v-for="(page, pageIndex) in pages" :key="pageIndex">HEADER
<div class="subpage" id="editor-container">
<template v-if="pageIndex < 1">Authors:</template>
<!-- <div class="subpage-content">The real content</div> -->
<div v-for="item in page.authors" :key="item.id" class="author">{{ item.name }}</div>
</div>
</div>
I then created a method recalcPages that gets called when the component is mounted:
methods: {
recalcPages() {
let pageElements = this.$el.querySelectorAll(".page");
Array.from(pageElements).some((p, pi) => {
let authors = p.querySelectorAll(".author");
if (authors.length) {
return Array.from(authors).some((a, ai) => {
let offPage = a.offsetTop + a.offsetHeight > p.offsetHeight;
if (offPage) {
let currentAuthors = this.pages[pi].authors;
var p1 = currentAuthors.slice(0, ai);
var p2 = currentAuthors.slice(ai);
this.pages[pi].authors = p1;
this.pages.push({ authors: p2 });
}
return offPage;
});
}
return false;
});
}
},
It iterates the actual DOM nodes and uses offsetTop + offsetHeight to calculate whether an author is off the page or not. As soon as an element leaves the page, it and all following elements are split from the current page's authors and a second page is inserted.
You'll also need to call this.recalcPages() after updating the contents deleting all pages and set a new authors array on the first one to be split up automatically again, unless you're only adding to the last page. You could also try to use the updated hook to achieve this automatically, I haven't tried that.
Of course it's quite a heavy operation, as it renders the component just to trigger re-rendering again by modifying the data. But unless you don't know the exact height of every element, there's no way around it (at least none I'm aware of).
By the way (although your final data will probably look different, but just for the sake of completeness of this demonstration) I also wrapped your Authors: headline in <template v-if="pageIndex < 1">Authors:</template> in order to display it only on the first page.
I'm wondering how can I pass an array in ListModel?
ok, In QML I have a ListView and I set it's ListModel like so:
model: ListModel
{
id: myList
ListElement
{
name: ""
card: 0
books: []
}
}
I can append to it by using:
myList.append({name:"terry", card:00100, books:["024589","865976","879582","215645"]});
but when I try to output it on screen I get this.
{
"card": 00100
"books": {
"objectName": "",
"count": 4,
"dynamicRoles": false
},
"name": "terry",
"name": "terry"
}
I'm not sure why I'm getting 2 names though! and how can I get the value of books?
I look up the QML documentation of ListModel and ListElement couldn't find anything related to passing an array, all the examples are integer or string.
Any idea how I can get the date?
I did work around it by calling the array in Delegate with Component.onCompleted:{} but I believe that's not a good/correct way since Delegate is not responsible for holding the data and should be done in Model, please do correct me if I'm wrong.
Thanks for your time.
Edit01: Thanks for the reply, here is the reason I need array:
I have a ComboBox in Delegate like so:
delegate: Rectangle
{
id: rowID
width: 50
height: 40
color: "#323232"
Row
{
anchors.fill: parent
anchors.leftMargin: 10
anchors.rightMargin: 10
Label{
id: nameID
text: name
font.pixelSize: 12
width: 200
wrapMode: Text.WrapAnywhere
anchors.verticalCenter: parent.verticalCenter
color: "#999"
}
Label{
anchors.verticalCenter: parent.verticalCenter
text: "out:"
font.pixelSize: 12
color: "#999"
}
ComboBox{
id: booksID
height: 20
width: 50
model: books
anchors.verticalCenter: parent.verticalCenter
}
}
}
as you can see I'm feeding the name to Label (id: nameID) and I want to feed the books to ComboBox (id: booksID) that has model, if I make books key as ListElement how can I feed all the values?
in QML ListModel or ListElement documentation didn't mention anything about getting all the key's value right? it only supports get(int index) which is based on an index number.
You did that wrong. Array members must be ListElement:
ListModel {
id: mod
ListElement {
name: "ali"
dic: [ ListElement{text:"asad-o-llah"; code: 14}, ListElement{text:"aboo torab"; code: 72}, ListElement{text:"amir al-momenin"; code: 110}]
}
}
ListView {
model: mod
anchors.fill: parent
delegate: Component {
Rectangle {
width: parent.width; height: 50
Row {
Text {
text: name
}
ComboBox {
width: 100; height: 30
model: dic //<-- set dic as model for combo box
textRole: "text" //<-- important!
onCurrentIndexChanged: {
console.log("current code is "+model.get(currentIndex).code); //<-- get code value
}
}
}
}
}
}
Component.onCompleted: {
var v = mod.get(0).dic.get(0).value; //<-- sample usage
console.log(v);
}
Do you want some thing similar to this:
Rectangle {
id: root
visible: true
width: 360
height: 360
ListModel
{
id: myList
ListElement {
name: "Story"
card: 3
books: [
ListElement { bookName: "Story 1" },
ListElement { bookName: "Story 2" },
ListElement { bookName: "Story 3" }
]
}
ListElement {
name: "Novel"
card: 3
books: [
ListElement { bookName: "Novel 1" },
ListElement { bookName: "Novel 2" },
ListElement { bookName: "Novel 3" }
]
}
}
Component {
id: displayDelegate
Rectangle
{
id: rowID
width: 300 //50
height: 40
color: "#323232"
border.color: "white"
Row
{
anchors.fill: parent
anchors.leftMargin: 10
anchors.rightMargin: 10
Text{
id: nameID
text: name
font.pixelSize: 12
width: 50 //200
wrapMode: Text.WrapAnywhere
/*anchors.verticalCenter: parent.verticalCenter*/
color: "white"//"#999"
}
Text{
/*anchors.verticalCenter: parent.verticalCenter*/
text: "out:"
font.pixelSize: 12
color: "white"//"#999"
}
/*ComboBox{
id: booksID
height: 20
width: 50
model: books
anchors.verticalCenter: parent.verticalCenter
}*/
Repeater {
model: books
Text { text: bookName + "\t"; color: "white" }
}
}
}
}
ListView {
id: disp
anchors.fill: parent
model: myList
delegate: displayDelegate
}
}
I have modified few line of the code which you have shared. I am not sure about your ComboBox implementation. Therefore, I have used my own implementation of Repeater. You can try to execute and check the result.
As an alternative to working with ListModel and ListElement, you can also have a look at the QSyncable JsonListModel QML type. (It is an open-source component by Ben Lau, you can find it on GitHub here: https://github.com/benlau/qsyncable)
The JsonListModel is a specialized ListModel type, that can handle JSON Arrays that you e.g. create in your QML or fetch from a REST service. It automatically synchronizes the JSON to a QML ListModel, so its very convenient to use:
ListView {
id: listView
anchors.fill: parent
// property for json data, used as source for JsonListModel
property var jsonData: []
// use JsonListModel as model
model: JsonListModel {
source: listView.jsonData
keyField: "id"
}
// delegate
delegate: DelegateItem { /* ... */ }
}
You can also find a comprehensive guide how it works here: JsonListModel guide
I have one ListView and one GridView. Imagine it like this: The first view presents the categories and the second view presents article in each category. I want to dynamically change the data model of the GridView when the current index of the ListView change by javascript. How do we do that?
You simply need to assign a new model. Here's one example, based on the ListModel docs. This model shows the fruit in the model in the ListView on the left. When a delegate is clicked, it sets the model for the GridView on the right to the list defined by the attributes role.
import QtQuick 1.0
Item {
width: 600; height: 400
ListView {
width: 300; height: 400
model: fruitModel
delegate: Text {
font.pixelSize: 20
text: name
width: 300
MouseArea {
anchors.fill: parent
onClicked: grid.model = attributes
}
}
}
GridView {
id: grid
x: 300; width: 300; height: 400
delegate: Text {
text: description
font.pixelSize: 20
}
}
ListModel {
id: fruitModel
ListElement {
name: "Apple"
cost: 2.45
attributes: [
ListElement { description: "Core" },
ListElement { description: "Deciduous" }
]
}
ListElement {
name: "Orange"
cost: 3.25
attributes: [
ListElement { description: "Citrus" }
]
}
ListElement {
name: "Banana"
cost: 1.95
attributes: [
ListElement { description: "Tropical" },
ListElement { description: "Seedless" }
]
}
}
}
This is an example of a nested model, but there are other possibilities. For example, if you're sourcing your data from a database, perhaps you just need to change the query used by the GridView's model, rather than setting a different model.
Depends on your models. Assuming CategoriesModel has category role, and ArticlesModel has setCategory method:
ListView {
model: CategoriesModel {}
delegate: Item {
MouseArea {
anchors.fill: parent
onClicked: {
grid_view.model.setCategory(model.category)
}
}
// ...
}
}
GridView {
id: grid_view
model: ArticlesModel {}
// ...
}
I'm using the following layout for my Dojo 1.5 DataGrid:
function getGridLayout() {
return [{
name: "Stylist",
field: "stylist",
width: "100px"
},
{
name: "Service",
field: "service",
width: "200px"
},
{
name: "Length",
field: "length",
width: "50px"
},
{
name: " ",
field: "remove",
width: "30px",
formatter: getRemoveFormatter
}];
}
And here's my callback definition:
function getRemoveFormatter(item) {
console.log(item);
}
And here's how I'm creating my DataGrid:
dojo.ready(function() {
var store = new dojo.data.ItemFileWriteStore({data:{items:[]}});
window.grid = new dojox.grid.DataGrid({store: store, structure: getGridLayout()}, document.createElement("div"));
dojo.byId("services_grid").appendChild(grid.domNode);
grid.startup();
observeAppointmentServiceAddClick(window.grid);
getAppointmentItems();
});
For some reason item is always undefined. Any idea why this could be?
The reason is that, whenever I would add a row, I wouldn't define anything for the "remove" column, so naturally the item in that cell would be undefined.