Vaadin Grid with dynamic columns

Flow
1

Hi, Is there any example I can refer for vaadin grid using LitElement and build the grid dynamically? Thanks

2

Hi Jaleel,

What are you trying to do with the grid? (I’m not sure what a Li(s)tElement is…

Stuart

3

Hi Stuart, Thanks for replying. Let me try to explain. Usually when we create a grid we define columns in advance and bind the grid. But, in my case I do not know the number of columns in advance and I would know at the time of application started. An example would be, a grid where user can configure what all columns needed in the grid and at the time user logs in we get the configured columns from some persistent location (maybe a db) and build the columns dynamically and then bind the data. An example is here https://jsfiddle.net/webpadawan/zjLey3z6/ . This example uses Polymer.Element . But in my case, I use LitElement.

LitElemnt is a new way of writing web components in Polymer . More information here https://lit-element.polymer-project.org/

Thanks

4

Hi Jaleel,

I’m probably no help for you really. I do allow the my users to select which columns are shown at runtime, but I use the Java API. I init the grid with a bean type and then configure the columns based on a list of visible columns in the users settings.

Stuart.

5

Here’s an example of using vaadin-grid with LitElement, but without dynamic columns.

https://glitch.com/edit/#!/vaadin-grid-renderer?path=app.js:1:0

I think you should be able to generate the dynamic vaadin-grid-column elements with LitElement in a similar way as you would with Polymer though. You would just generate the DOM in the render() method using some loop or Array mapping methods. See https://lit-element.polymer-project.org/guide/templates#use-properties-loops-and-conditionals-in-a-template

If you need more help I can try to provide a working example later (probably some other day)

6

Thanks Stuart and Kari for the help. I will try as Kari suggested and let you know how it goes.

7

Ahm, vaadin-grid needs items object property, if you use lit-element like me

    <vaadin-grid.items=${this.vehiculosPage}>
        <vaadin-grid-selection-column auto-select frozen></vaadin-grid-selection-column>
        <vaadin-grid-filter-column width="9em" path="codVehiculo" header="Vehiculo"></vaadin-grid-filter-column>
        <vaadin-grid-filter-column width="9em" path="codMarca" header="Marca de Vehiculo"></vaadin-grid-filter-column>
        <vaadin-grid-filter-column width="9em" path="codModelo" flex-grow="2" header="Modelo de Vehiculo"></vaadin-grid-filter-column>
        <vaadin-grid-filter-column width="9em" path="codTipo" header="Tipo de Vehiculo"></vaadin-grid-filter-column>
        <vaadin-grid-filter-column width="9em" path="placa" header="Placa de Vehiculo"></vaadin-grid-filter-column>
        <vaadin-grid-filter-column width="9em" path="codConfiguracion" header="Configuracion de Vehiculo"></vaadin-grid-filter-column>
    </vaadin-grid>

you have to bind your data in the vaadin-grid, to do this dynamically you can map at least one object to get properties length
then the same way I map here:

${
html`
this.vehiculos.length >2?
Array.apply(
null,
{length: Math.ceil(this.vehiculos.length/this.pageSize)})
.map((item,index)=>html`<button @click=${(e)=>this.updateItemsFromPage(e.target.innerText)}>${index+1}</button>`):"false"`
}

Lit-Element is powerfull when you use highOrder Functions to render data