@boikom

@boikom

Forum Replies Created

Viewing 15 posts - 706 through 720 (of 918 total)
  • Author
    Posts
  • in reply to: how to get selected row data #100621
    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/

    in reply to: Use splitter for Vue-router navigation #100619
    admin
    Keymaster

    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>
    
    in reply to: how to get selected row data #100618
    admin
    Keymaster

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

    in reply to: how to get selected row data #100617
    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/

    in reply to: newbie question getting started on combobox #100610
    admin
    Keymaster

    Hi edwardsmarkf,
    Please, look at: https://www.htmlelements.com/docs/combobox/. The docs refers to which files are required in order to use the ComboBox.
    Hope this helps.
    Regards,
    Peter
    Smart HTML Elements
    https://www.htmlelements.com/

    in reply to: Typescript bindings #100592
    admin
    Keymaster

    Update:
    Typescript definitions are now part of the Smart Web Components download package.
    Best Wishes,
    Smart HTML Elements Team
    https://www.htmlelements.com

    in reply to: onCellUpdate #100584
    admin
    Keymaster

    Thank you very much

    in reply to: onCellUpdate #100583
    admin
    Keymaster

    Hi Fabio,
    Please, refer below to a sample implementation of the onCellUpdate callback function. It provides information about old and new cell value, the cell that is edited and also a confirm callback function which you may use to cancel the changes. In the example, when “test” is entered, the value is not saved, otherwise it is saved after editing.

    Smart('#grid', class {
    get properties() {
    return {
    onCellUpdate: function(cell, oldValue, newValue, confirm) {
    oldValue = cell.value;
    alert(cell.row.id + "/" + cell.column.dataField);
    if (newValue === "test") {
    confirm(false);
    }
    else {
    confirm(true);
    }
    },
    dataSource: new Smart.DataAdapter(
    {
    dataSource: generateData(1000),
    dataFields:
    [
    'id: number',
    'firstName: string',
    'lastName: string',
    'productName: string',
    'available: bool',
    'quantity: number',
    'price: number',
    'total: number'
    ]
    }),
    editing: {
    enabled: true,
    mode: 'cell'
    },
    columns: [
    {
    label: 'First Name', dataField: 'firstName'
    },
    { label: 'Last Name', dataField: 'lastName' },
    { label: 'Product', dataField: 'productName' },
    { label: 'Available', dataField: 'available', template: 'checkBox', editor: 'checkBox' },
    { label: 'Quantity', dataField: 'quantity', editor: 'numberInput' },
    { label: 'Unit Price', dataField: 'price', editor: 'numberInput', cellsFormat: 'c2' }
    ]
    }
    }
    });

    Hope this helps.
    Regards,
    Peter

    in reply to: Drop Down List With On Demand Ajax Calls #100533
    admin
    Keymaster

    Is there anything that needs to be down to initiate the data binding? Below is my code and it does not appear to be working (none of the console.log messages are being shown)

    groupDropDown.dataSource = function (query, callback) {
    console.log(‘here’);
    //The Ajax request goes here
    let xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
    console.log(‘here2’);
    if (this.readyState == 4 && this.status == 200) {
    console.log(result);
    callback(result);
    }
    };
    xhttp.open(“GET”, “/Ajax/Ajax_group.aspx/GetDeviceGroupsForSmartDropDown”, true);
    xhttp.send();
    }

     

    in reply to: Card View with Custom Card HTML #100531
    admin
    Keymaster

    Hello ctstrist,
    CardView is a component that displays tabular data in each card’s cells. You can completely customize the value in each cell by using the columns formatFunction callback, as shown in the following example: https://codepen.io/dimitar_jqwidgets/pen/KKwdpbB. However, if you wish each card to have completely different appearance, you can just use a collection of smart-card components in your own custom container.
    Best regards,
    Dimitar
    Smart HTML Elements Team
    https://www.htmlelements.com

    in reply to: Error on IE Edge #100509
    admin
    Keymaster

    Hi,
    Could you please, share codepen example?
    Regards,
    Peter

    in reply to: Error on IE Edge #100508
    admin
    Keymaster

    Hi, i have include  webcomponents-lite.js just now, but still getting the same error.
     

    in reply to: Error on IE Edge #100507
    admin
    Keymaster

    Web Components require polyfill for Edge. You can include webcomponents-lite.js.
    Please, refer to https://www.htmlelements.com/demos/accordion/basic/.

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Accordion Overview</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
        <link rel="stylesheet" type="text/css" href="../../source/styles/smart.default.css" />
        <link rel="stylesheet" type="text/css" href="../../styles/demos.css" />
        <link rel="stylesheet" type="text/css" href="styles.css" />
        <script type="text/javascript" src="../../source/webcomponents-lite.js"></script>
    </head>
    <body>
        <smart-accordion>
            <smart-accordion-item label="First Item">First Item Content.</smart-accordion-item>
            <smart-accordion-item label="Second Item">Second Item Content.</smart-accordion-item>
            <smart-accordion-item label="Third Item">Third Item Content.</smart-accordion-item>
            <smart-accordion-item label="Fourth Item">Fourth Item Content.</smart-accordion-item>
    	</smart-accordion>
        <!-- scripts -->
        <script type="module" src="../../source/modules/smart.accordion.js"></script>
        <script type="module" src="index.js"></script>
    </body>
    </html>

    Regards,
    Peter

    in reply to: Not able to apply xpand-mode="multiple" property to accordion #100499
    admin
    Keymaster

    Hi Nainar9294,
    We like the linked post. However, it is not written by our team. For using Smart HTML Elements, we recommend you to look for information in our documentation.
    Best Regards,
    George
    Smart HTML Elements Team
    https://www.htmlelements.com

    in reply to: Not able to apply xpand-mode="multiple" property to accordion #100498
    admin
    Keymaster

    On the below link it is wrong.
    https://vaadin.com/blog/wcw-23-smart-accordion

Viewing 15 posts - 706 through 720 (of 918 total)