Vaadin-grid: Columns defined with Polymer.html template literals are not rendered correctly
Description
When defining columns using the html template literal instead of a tag, the rendered cells in that column render [object HTMLTemplate] as string instead of stamping the template. See the 'icon' column in the picture below.
Expected outcome
The column cells should render normally.
Actual outcome
The column cell does not render normally.
Live Demo
https://jsbin.com/qiwufec/edit?html,output
Steps to reproduce
- Import polymer/lib/utils/html-tag.html (Polymer#^2.4.0)
- Put a
vaadin-gridelement in the page. - Add a
vaadin-grid-columnelement to the grid. - Define the column's body to a binding that returns a Polymer.html template.
- Open the page in a web browser.
- Witness the column is not rendering correctly.
Browsers Affected
- [X] Chrome
- [X] Firefox
- [X] Safari
- [X] Edge
- [X] IE 11
- [X] iOS Safari
- [X] Android Chrome
pdesjardins90
All 4 comments
Thanks for the issue and sorry for not answering earlier. We are working on the "renderers" feature which is expected to make it easier to define content imperatively. In case you are interested, you can check this branch: https://github.com/vaadin/vaadin-grid/tree/renderer-preview
Please note that this feature is still work in progress, but in the future all other components accepting templates (grid, dialog, combo-box etc) should get it so we appreciate any feedback.
web-padawan
on 29 Jul 2018
Closing as this is not a bug, it's just not supported yet. Keep up the good work folks!
pdesjardins90
on 24 Jan 2019
Thanks for understanding. After some thinking, I realised that your code snippet wouldn't work also because of the fact that Polymer data bindings do not allow injecting raw HTML (as it is generally considered insecure). So this could be marked as "won't fix".
Anyways, the column renderers are available since 5.2.0 stable release and allow to organise the code in a more convenient way, especially when working with LitElement, see this example:
https://glitch.com/edit/#!/lying-blanket?path=app.js:55:0
web-padawan
on 24 Jan 2019
I'll be sure to check it out! Thanks
pdesjardins90
on 25 Jan 2019
Related issues
dafky2000
路
4Comments
limonte
路
5Comments
stramel
路
5Comments
timeu
路
6Comments
Mika83AC
路
6Comments