Hi All,
Sorry if this post is not properly created in both, wrong places or wrong wording.
In my case what I want to create is a dynamic ‘vaadin-grid-column’ block that get the fields to be ‘painted as columns’ dynamically.
Basically the vaadin-grid receives one array with more columns than the ones to be displayed to the user. Instead of create one ‘vaadin-grid-column’ block per each column then I want to re-use just the same block by using a dom-repeat to make the loop on another array having the columns/fields names I want to display from the array.
This works properly on the header row but not on the body.
Basically the problem is that it seems like vaadin-grid does not use the alias (as=“” clause). It can be defined but then it creates a conflict of interest. Therefore the ‘item’ cannot be in-use for the dom-repeat, even when both (dom-repeat and vaadin-grid) using alias then it takes the value from just one of both, this causes my ‘fieldValue’ method to get the data in context from one row or the other but not from both as I expected.
In ‘fieldName’ it works fine because it receives the parameter from my dom-repeat loop only, what is a bit strange too. I mean, that this works but not the other, probably it is a bug in the code that ‘paints’ the but not affected, I guess.
I’m working in Polymer 3 and I downloaded the component using npm like 1 month ago.
Please let me know if any extra info is required.
See the code below
Thanks in advance
Regards,
import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import '@vaadin/vaadin-grid/vaadin-grid.js';
import '@vaadin/vaadin-grid/vaadin-grid-selection-column';
import '@vaadin/vaadin-grid/vaadin-grid-sort-column';
import '@vaadin/vaadin-grid/vaadin-grid-filter';
import '@polymer/paper-button/paper-button';
/**
* `vaadin-grid-bug`
*
*
* @customElement
* @polymer
* @demo demo/index.html
*/
class VaadinGridBug extends PolymerElement {
static get template() {
return html`
<style>
:host {
display: block;
}
</style>
<paper-toast id="toast"></paper-toast>
<template is="dom-repeat" items="{{myFieldsNames}}" as="currentfield">
[[currentfield]
]
</template>
<vaadin-grid id="mygrid" name="mygrid" items="[[myGridData]
]" as="gridData">
<template is="dom-repeat" items="{{myFieldsNames}}" as="fld">
<vaadin-grid-column>
<template class="header">{{fieldName(fld)}}</template>
<template>[[index]
] {{fieldValue(index, item, fld)}}</template>
</vaadin-grid-column>
</template>
</vaadin-grid>
`;
}
ready() {
super.ready();
}
resetColNum(){
this.colNum=0;
}
fieldValue(index, item, e){
console.log('ColNum:', this.colNum, 'index:', index, 'item:', item, 'fldItem', e);
return item[this.colNum]
[e]
;
}
fieldName(e){
console.log('ColNum:', this.colNum);
this.colNum=this.colNum+1;
console.log('ColNum:', this.colNum);
return e;
}
static get properties() {
return {
colNum: {
type: Number, value:0
},
myFieldsNames: {
type: Array,
value: ['name', 'value']
},
myGridData: {
type: Array,
value: [
{name: 'row 1', value: 'value 1', colExtra: 'colExtra in 1'},
{name: 'row 2', value: 'value 2', colExtra: 'colExtra in 2'},
{name: 'row 3', value: 'value 3', colExtra: 'colExtra in 3'}
]
}
};
}
}
window.customElements.define('vaadin-grid-bug', VaadinGridBug);