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

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).