This topic contains 5 replies, has 3 voices, and was last updated by Avatar admin 10 months, 4 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #100616
    Avatar
    olaf@xso
    Participant

    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
    Avatar
    admin
    Keymaster

    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
    Avatar
    olaf@xso
    Participant

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

    #100621
    Avatar
    admin
    Keymaster

    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
    Avatar
    Ronak
    Participant

    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
    Avatar
    admin
    Keymaster

    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.