Vaadin-grid: Is it possible to use the grid inside a LitElement of a Polymer application?

[ghost]

What is the minimum example, if any, using the Polymer PWA (https://polymer.github.io/pwa-starter-kit/), to show correctly a vaadin-grid?
I tried many different combinations, but never a working one, with, often, this warning:
property-accessors.js:275 Polymer::Attributes: couldn't decode Array as JSON
Am I doing anything totally wrong?
Thanks
Andrea

[web-padawan]

Hi! Starting from the v5.2.0-beta1 we recommend using following Grid features:

• column helper elements (vaadin-grid-filter-column, vaadin-grid-sort-column)
• column convenience properties (path, header and text-align)
• renderers for more complex cases where you previously used templates

See the example here: https://glitch.com/edit/#!/lying-blanket?path=app.js:29:42
https://lying-blanket.glitch.me/

Note: I'm using fetch API here for simplicity only, you can use XHR if necessary.

[ghost]

Good example, I thank you for the support. I can see it running on the glitch host, but if I take all the sources, and I try to test it locally, I cannot even run 'npm install', giving some strange error, about:

608 silly fetchPackageMetaData error for babel-plugin-transform-remove-undefined@^0.4.0-alpha.caaefb4c Unexpected end of JSON input while parsing near '...th":"^0.5.0-alpha.01e'

[sebastianroming]

@web-padawan Is it possible to use a vaadin-grid-filter-column in combination with a vaadin-grid-sort-column to make use of both of the functions?

[web-padawan]

Updated the glitch: https://glitch.com/edit/#!/lying-blanket?path=app.js:73:2

Using the header renderer you can combine filter + sorter helper elements.
Note the .headerRenderer="${this.emailHeaderRenderer}" row: here the property should be assigned as a camelCase (as LitElement works with properties), not as dash-case.

We will consider adding this glitch as a separate line in the release notes for 5.2.0 stable release.

@andreabioli your problem is not related to the component but to the local setup you have. Try reinstalling the packages, could be also temporary npm downtime etc.

[web-padawan]

Closing as answered and as this is not an issue with the component. Please consider asking the questions like this in our Slack channel: https://polymer.slack.com/messages/C6ULJ2F7S

[ghost]

Yes. Just to clarify, I observed that starting from the PWA starter kit by Google Polymer, just upgrading the LitElement from version 0.5.2 to version 0.6.2 destroys the application! Nothing to do with the vaadin-grid, since reverting back to 0.5.2 brings back the correct behaviour as observed in the provided example. Thanks again!

[limonte]

@andreabioli from https://semver.org/#spec-item-4

Major version zero (0.y.z) is for initial development. Anything may change at any time. The public API should not be considered stable.

[ghost]

Thank you. We really needed a professor, here. :-)
I wrote it just to address other people in saving time, when finding the same problem.
Anyway, really thank you. Your message really helped!

[web-padawan]

@andreabioli in case if the installation error persists, consider submitting the issue to PWA starter kit repo. LitElement itself works, same as Grid.

[Maxreglez]

@web-padawan if i change the lit-html package or re import it on your example than <vaadin-grid-filter> and <vaadin-grid-sort> don't work together.

example where i only re import the lit-html

is there any thing that make it work again?

[web-padawan]

@Maxreglez try to modify the start script here:
https://glitch.com/edit/#!/seed-move-1?path=package.json:4:0

    "start": "npm dedupe && polyserve --npm --port $PORT"

That fixes the problem with 2 versions of lit-html installed.

[Maxreglez]

@web-padawan thank you very much. this works. i search a lot to fix the problem

[mittalvaibhav]

@web-padawan : I intend to use dataProvider(with afunction and callback thing) in the same scenario. Can you please tell me how to use that ?

[johnthad]

@web-padawan : I intend to use dataProvider(with afunction and callback thing) in the same scenario. Can you please tell me how to use that ?

Try this example: https://github.com/johnthad/paged-grid

[mittalvaibhav]

@web-padawan @johnthad Using renderer to display content, I am getting error as "render is not defined", any idea ?

[mittalvaibhav]

@web-padawan @johnthad - Got it resolved now. The issue was - import {render} from 'lit-html' was missing. Thanks.

[mittalvaibhav]

@web-padawan
In side the renderer functions, I have polymer 3 custom elements. For those polymer 3 elements, when I am doing event handling like e.g. @event-name = "${this.functionName}", then it shows error in console that "this.functionName is not a function". Can you please help ?

[web-padawan]

@mittalvaibhav looks like methods might not be automatically bound. Please try following steps:

1. Make sure the renderer function itself has bound this:
   https://glitch.com/edit/#!/cotton-felidae?path=app.js:26:0

2. Change the syntax to @event-name="${e => this.functionName(e)}"
   https://glitch.com/edit/#!/cotton-felidae?path=app.js:119:0

[mittalvaibhav]

Thanks @web-padawan . It works

[mittalvaibhav]

@web-padawan One more question: Inside the renderer function if I am using another custom lit element, what is the best way to send attributes to properties to of whose value are object and arrays
e.g. Tried below, it's not working.
rowDetailsRenderer(root, column, rowData) {
render(html <custom-lit-element .propertyName1="${this.dataObject}" .propertyName2="${this.dataArray}"></custom-lit-element> , root)
}

[web-padawan]

For any external changes in this.dataObject you need to call renderers manually:

grid.render()

It only works this way, because grid only observes for itemsand dataProvider change, but it has nothing to do with any external properties (so you need to trigger render() manually).

[mittalvaibhav]

@web-padawan Is the syntax correct for sending objects and arrays to custom lit element inside renderer function ?

[web-padawan]

Yes, the syntax is correct. But even if the lit-html template is updated after property change, renderer itself should be triggered and that's what you as a user are responsible of.

[mittalvaibhav]

Ok @web-padawan , I got your point. But before that the problem I am facing is:
when this.dataObject is an object {key: "value"}, then in custom lit-element the value in attributeChangedCallback is inconsistent.
So I tried:
.data="${this.dataObject}" --> With dot before attribute. Then in the attributeChangedCallback of lit-element, the value change is not detected
data="${this.dataObject}" -> Without dot. In this case, the value change is detected in attributeChangedCallback but value shown is "[object Object]"

Same is the case of this.dataArray is array of objects.

[web-padawan]

You need a dot as LitElement doesn't serialise object and array properties to attributes.
Therefore, you shouldn't use attributeChangedCallback.

See lifecycle methods guide. In particular, updated might be what you need:

https://lit-element.polymer-project.org/guide/lifecycle

[mittalvaibhav]

Ok, Let me check that. Thanks @web-padawan !!

[jantillonc]

@web-padawan @mittalvaibhav
Hey guys, I'm creating a custom element using the exact same sample from https://glitch.com/edit/#!/cotton-felidae but I keep getting this error: Uncaught (in promise) TypeError: Cannot set property 'checked' of null ----> root.firstElementChild.checked = this.grid.detailsOpenedItems.indexOf(root.item) > -1;

Any ideas what could be causing this issue? Also, i noticed that the address column and the checkbox are being rendered as [object Object] instead of the actual string/checkbox (seems like my renderers functions are not working as expected?) Any help will be greatly appreciated!