@boikom
@boikom
Forum Replies Created
-
AuthorPosts
-
adminKeymaster
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/adminKeymasterhi,
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>
adminKeymasterI don’t get it.
grid.getSelection().rows[0].data
is undefined.
Where should I find the Row object?adminKeymasterHi 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/adminKeymasterHi 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/adminKeymasterUpdate:
Typescript definitions are now part of the Smart Web Components download package.
Best Wishes,
Smart HTML Elements Team
https://www.htmlelements.comadminKeymasterThank you very much
adminKeymasterHi 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,
PeteradminKeymasterIs 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();
}adminKeymasterHello 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.comadminKeymasterHi,
Could you please, share codepen example?
Regards,
PeteradminKeymasterHi, i have include webcomponents-lite.js just now, but still getting the same error.
adminKeymasterWeb 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,
PeterNovember 13, 2019 at 11:26 am in reply to: Not able to apply xpand-mode="multiple" property to accordion #100499adminKeymasterHi 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.comNovember 13, 2019 at 11:07 am in reply to: Not able to apply xpand-mode="multiple" property to accordion #100498adminKeymasterOn the below link it is wrong.
https://vaadin.com/blog/wcw-23-smart-accordion -
AuthorPosts