Reply To: Use splitter for Vue-router navigation

[admin]

hi,
The router-view is now filled sometimes.
When there is a grid on the view. The grid is not shown. Simple components like <h2> or <smart-button> are visible
Here is my vue template for the view using a smart grid:

<template>
  <div>
    <h1>GRID</h1>
    <smart-button>Text</smart-button>
    <smart-splitter>
      <smart-splitter-item size="50%">
        <smart-grid id="grid" @change="rowSelectionChanged"></smart-grid>
      </smart-splitter-item>
      <smart-splitter-item>
        <h1>{{ rowData }}</h1>
      </smart-splitter-item>
    </smart-splitter>
  </div>
</template>
<script>
import "@smarthtmlelements/smart-elements/source/styles/smart.default.css";
import "@smarthtmlelements/smart-elements/source/modules/smart.grid.js";
export default {
  data: () => ({ rowData: "" }),
  methods: {
    rowSelectionChanged(event) {
      if (event.detail.finished) {
        const grid = document.querySelector("smart-grid");
        this.rowData = grid.getSelection().rows[0].id;
      }
    }
  },
  created() {
    window.Smart(
      "#grid",
      class {
        get properties() {
          return {
            grouping: {
              enabled: true
            },
            sorting: {
              enabled: true
            },
            filtering: {
              enabled: true
            },
            selection: {
              mode: "one",
              enabled: true
            },
            change: {},
            columns: [
              { label: "First Name", dataField: "firstName" },
              { label: "Last Name", dataField: "lastName" },
              { label: "Product", dataField: "productName" },
              {
                label: "Quantity",
                dataField: "quantity",
                columnGroup: "order"
              }
            ],
            dataSource: new window.Smart.DataAdapter({
              dataSource: [{ "id": 0, "firstName": "Beate", "lastName": "Wilson", "productName": "Caramel Latte", "price": 3.8, "quantity": 6, "total": 22.799999999999997 }, { "id": 1, "firstName": "Ian", "lastName": "Nodier", "productName": "Caramel Latte", "price": 3.8, "quantity": 8, "total": 30.4 }, { "id": 2, "firstName": "Petra", "lastName": "Vileid", "productName": "Green Tea", "price": 1.5, "quantity": 2, "total": 3 }, { "id": 3, "firstName": "Mayumi", "lastName": "Ohno", "productName": "Caramel Latte", "price": 3.8, "quantity": 2, "total": 7.6 }, { "id": 4, "firstName": "Mayumi", "lastName": "Saylor", "productName": "Espresso con Panna", "price": 3.25, "quantity": 4, "total": 13 }, { "id": 5, "firstName": "Regina", "lastName": "Fuller", "productName": "Caffe Americano", "price": 2.5, "quantity": 4, "total": 10 }, { "id": 6, "firstName": "Regina", "lastName": "Burke", "productName": "Caramel Latte", "price": 3.8, "quantity": 8, "total": 30.4 }, { "id": 7, "firstName": "Andrew", "lastName": "Petersen", "productName": "Caffe Americano", "price": 2.5, "quantity": 6, "total": 15 }, { "id": 8, "firstName": "Martin", "lastName": "Ohno", "productName": "Espresso con Panna", "price": 3.25, "quantity": 3, "total": 9.75 }, { "id": 9, "firstName": "Beate", "lastName": "Devling", "productName": "Green Tea", "price": 1.5, "quantity": 9, "total": 13.5 }, { "id": 10, "firstName": "Sven", "lastName": "Devling", "productName": "Espresso Truffle", "price": 1.75, "quantity": 6, "total": 10.5 }, { "id": 11, "firstName": "Petra", "lastName": "Burke", "productName": "Peppermint Mocha Twist", "price": 4, "quantity": 11, "total": 44 }],
              dataFields: [
                "id: number",
                "firstName: string",
                "lastName: string",
                "productName: string",
                "quantity: number",
                "price: number",
                "total: number"
              ]
            })
          };
        }
      }
    );
  }
};
</script>
<style>
smart-grid {
  width: 100%;
  height: auto;
}
</style>