Duble rows when use row details in Vaadin-grid polymer 2 - polymer

Question

I try implement row-datails in webcomponnet written in polymer 2. For this I use example : https://vaadin.com/components/vaadin-grid/html-examples/grid-row-details-demos#row-details-with-polymer-template
I try show row details in two ways: _onActiveItemChanged end expanded.
When I use it the lines have doubled.
How to show my template?
My code
<link rel="import" href="./bower_components/vaadin-button/vaadin-button.html" />
<link
rel="import"
href="./bower_components/vaadin-text-field/vaadin-text-field.html"
/>
<link
rel="import"
href="./bower_components/vaadin-checkbox/vaadin-checkbox-group.html"
/>
<link
rel="import"
href="./bower_components/vaadin-combo-box/vaadin-combo-box.html"
/>
<link
rel="import"
href="./bower_components/vaadin-checkbox/vaadin-checkbox.html"
/>
<link rel="import" href="./bower_components/vaadin-grid/vaadin-grid.html" />
<link
rel="import"
href="./bower_components/vaadin-grid/vaadin-grid-column.html"
/>
<link
rel="import"
href="./bower_components/paper-checkbox/paper-checkbox.html"
/>
<dom-module id="grid-wraper">
<template>
<style>
:host {
display: block;
}
.details {
padding: 10px;
margin: 10px;
display: flex;
justify-content: space-around;
align-items: center;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
font-size: 20px;
}
img {
width: 80px;
height: 80px;
}
</style>
<div class="card card-scale-anim">
<div class="card-titleBlue">
<iron-icon class="icon-user" icon="account-circle"></iron-icon>
<h2 class="title">Lista użytkowników e-usług</h2>
</div>
<div class="org-users-table">
<vaadin-grid
class="users-grid"
id="grid"
height-by-rows
data-provider="[[_gridDataProvider]]"
style="height: auto"
selected-items="{{_selectedItems}}"
active-item="{{_activeUser}}"
on-active-item-changed="_onActiveItemChanged"
>
<template class="row-details">
<div class="details">
<img src="[[item.picture.large]]" />
<p>Hi! My name is [[item.name]]!</p>
</div>
</template>
<vaadin-grid-column resizable width="100px">
<template>[[item.name]]</template>
</vaadin-grid-column>
<vaadin-grid-column width="100px">
<template class="header"></template>
<template>
<paper-checkbox
aria-label$="Show Details for [[item.name]]"
checked="{{expanded}}"
>Show Details</paper-checkbox
>
</template>
</vaadin-grid-column>
</vaadin-grid>
</div>
</div>
</template>
<script>
class GridWraper extends Polymer.Element {
static get is() {
return "grid-wraper";
}
static get properties() {
return {
dataProvider: { type: Function, notify: true },
};
}
_onActiveItemChanged(e) {
console.log("Active item", e);
this.$$("#grid").expandedItems = [e.detail.value];
}
$$(selector) {
return this.shadowRoot.querySelector(selector);
}
ready() {
super.ready();
Polymer.RenderStatus.afterNextRender(this, function () {});
}
}
window.customElements.define(GridWraper.is, GridWraper);
</script>
</dom-module>

Answer 1

If you want to expand the items on active change (ie. when user clicks on the row), then your _onActiveItemChanged method should use Grid's detailsOpenedItems property like so:
_onActiveItemChanged(e) {
this.$.grid.detailsOpenedItems = [e.detail.value];
}
However, if you want to open the detail with the checkbox, then you would need to bind the checked attribute to detailsOpened:
<paper-checkbox aria-label$="Show Details for [[item.firstName]]" checked="{{detailsOpened}}">Show Details</paper-checkbox>
A small note:
Polymer components bind all elements with id to a $ object, so instead of this.$$("#grid"), you can use this.$.grid (as seen on my code above).