how to get selected row data

[admin]

hi,
I want to use your grid in our Vue application.
I want the grid on the left side of the splitter.
On the right side I want to show its details.
Therefor I have added the changed event. This event triggers my method: rowSelectionChanged()
Here I want to get the rows data, But I cannot get all the data. I only get the id. How can I get the complete data for the row?
Here is my vue template:

<template>
  <div>
    <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>

[admin]

Hi olaf,
I see you have the following code:

this.rowData = grid.getSelection().rows[0].id;

. The Row object also has a “data” field which referts to the the data bound data.
Hope this helps.
Regards,
Peter
Smart HTML Elements
https://www.htmlelements.com/

[admin]

I don’t get it. grid.getSelection().rows[0].data is undefined.
Where should I find the Row object?

[admin]

Hi olaf,
Sorry, the correct code actually is:

 var rowMeta = grid.getSelection().rows[0];
 var data = rowMeta.row.data;

So if you have a firstName data field, you can access it like that:

data.firstName

Regards,
Peter
Smart HTML Elements
https://www.htmlelements.com/

[Ronak]

Hello,
Im using Angualr project and have grid tree with checkboxes in that and its working perfectly even if i select the parent row checkbox it will select the all child rows checkbox automatically thats relly nice features. But now i want to get all checked = true rows and i try with grid.getSelection().rows and its always undefined in my case. can you guide me how do i get all selected rows in angualr. I do go throught the doc but there is no specific mateiral for checkbox and this mention method is not working in my case.
Im following below link for reference.
https://www.htmlelements.com/angular/demos/grid/tree-grid-checkbox/
Thanks,

[admin]

Hi Ronak,
Checked and Selected are different. By using the “getSelection” DataGrid method will retrieve only the selected rows, if there are any.
Each data row in Smart.Grid has a “checked” boolean property. You can use it to determine whether a data row is “checked”.
Regards,
Peter
Smart HTML Elements
https://www.htmlelements.com/

[Author]

Posts