Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #100616
    admin
    Keymaster
    Up
    0
    Down

    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>
    
    #100617
    admin
    Keymaster
    Up
    0
    Down

    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/

    #100618
    admin
    Keymaster
    Up
    0
    Down

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

    #100621
    admin
    Keymaster
    Up
    0
    Down

    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/

    #101040
    Ronak
    Member
    Up
    0
    Down

    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,

    #101041
    admin
    Keymaster
    Up
    0
    Down

    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/

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.