Demos

[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>

[admin]

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

[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]

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/

[admin]

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

[admin]

Thank you very much

[admin]

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

[admin]

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();
}

 

[admin]

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

[admin]

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

[admin]

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

[admin]

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

[admin]

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

[admin]

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

[admin]

So silly mistake…thanks i got it…!

[Author]

Posts