Products

[admin]

Thanks a lot Chris. I managed to figure it out and it works exactly how I want it to! Just another thing, there is also a row above the months row which displays the year. Is there a way to turn that row off completely?

[admin]

Hi
It is possible to disable it by handling the “opening” event. It is also possible to completely customise the popup window. Please, refer to this new tutorial about gantt-chart https://www.htmlelements.com/docs/gantt-editing/
Regards,
Peter

[admin]

Hi edwardsmarkf,
Thank you for your feedback. Unfortunately, the scroll buttons are the only way to scroll through Smart.Menu items at he moment. However, we will take your feature request into consideration for future development.
Best regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hi ctstrist,
Please refer to the following example that demonstrates how to switch the Grid’s dataSource and columns dynamically: https://codepen.io/dimitar_jqwidgets/pen/eYNOPWE.
Best regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hi ctstrist,
Currently, Smart.DataAdapter cannot get data from a file, but we are working on this functionality and hope that it will soon be available.
In the meantime, you can use fetch (or XMLHttpRequest, or jQuery.ajax()) to request the file’s data and then pass it as an array to the Grid, as is done in the code snippet below:

fetch('../../../scripts/beverages.json', { method: 'GET' })
    .then(function (response) {
        if (response.ok) {
            return response.json();
        }
    })
    .then(function (data) {
        Smart('#grid', class {
            get properties() {
                return {
                    appearance: {
                        alternationCount: 2,
                        showRowHeader: true,
                        showRowHeaderSelectIcon: true,
                        showRowHeaderFocusIcon: true
                    },
                    paging: {
                        enabled: true
                    },
                    pager: {
                        visible: true
                    },
                    sorting: {
                        enabled: true
                    },
                    editing: {
                        enabled: true
                    },
                    selection: {
                        enabled: true,
                        allowCellSelection: true,
                        allowRowHeaderSelection: true,
                        allowColumnHeaderSelection: true,
                        mode: 'extended'
                    },
                    behavior: { columnResizeMode: 'growAndShrink' },
                    dataSource: new Smart.DataAdapter(
                        {
                            dataSource: data,
                            dataFields:
                                [
                                    'name: string',
                                    'type: string',
                                    'calories: int',
                                    'totalfat: string',
                                    'protein: string'
                                ]
                        }),
                    columns: [
                        { label: 'Name', dataField: 'name' },
                        { label: 'Beverage Type', dataField: 'type' },
                        { label: 'Calories', dataField: 'calories' },
                        { label: 'Total Fat', dataField: 'totalfat' },
                        { label: 'Protein', dataField: 'protein' }
                    ]
                }
            }
        });
    })
    .catch(function (error) {
    });

Best regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hi edwardsmarkf,
Thanks for the feedback.
I guess you downloaded the community version which was missing the source/modules folder. The community version does not include all files and components.
Regards,
Peter
Smart HTML Elements
https://www.htmlelements.com/

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

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

 

[Author]

Posts