admin's Replies

@boikom

Forum Replies Created

Viewing 15 posts - 721 through 735 (of 929 total)

← 1 2 3 … 48 49 50 … 60 61 62 →

Author

Posts

January 28, 2020 at 5:51 am 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/

January 23, 2020 at 2:39 pm 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

January 23, 2020 at 9:12 am in reply to: onCellUpdate #100584

admin

Keymaster

Thank you very much

January 19, 2020 at 9:33 am 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

December 6, 2019 at 6:14 pm 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();
}

December 6, 2019 at 12:48 pm 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

November 18, 2019 at 6:05 am in reply to: Error on IE Edge #100509

admin

Keymaster

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

November 15, 2019 at 12:57 pm 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.

November 15, 2019 at 12:46 pm 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

November 13, 2019 at 11:26 am 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

November 13, 2019 at 11:07 am 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

November 13, 2019 at 11:02 am in reply to: Not able to apply xpand-mode="multiple" property to accordion #100497

admin

Keymaster

So silly mistake…thanks i got it…!

November 13, 2019 at 10:59 am in reply to: Not able to apply xpand-mode="multiple" property to accordion #100496

admin

Keymaster

Hi Nainar9294,
seems like you have misspelled the property name, the correct name of the property is “expand-mode”.
Best Regards,
Denis
Smart HTML Elements Team
https://www.htmlelements.com

October 30, 2019 at 6:07 pm in reply to: localization #100481

admin

Keymaster

Hello FabioNicc,
we prepared a localization demo for you. Here is how you can set the messages property:

grid.messages = {
        'en': {
            'columnMenuItemSortAsc': 'Sort {{mode}}',
            'columnMenuItemSortDesc': 'Sort {{mode}}', //Sort A → Z
            'columnMenuItemRemoveSort': 'Remove Sort',
            'currencySymbol': '£',
        },
        'de': {
            'columnMenuItemSortAsc': 'Sortieren {{mode}}',
            'columnMenuItemSortDesc': 'Sortieren {{mode}}',
            'columnMenuItemRemoveSort': 'Sortierung entfernen',
            'currencySymbol': '€',
        },
    };

and by switching the “locale” property, you can change the language code:

grid.locale = 'de';

grid.locale = 'en';

We also implemented two format functions. The first one translates the month of the date, and the second one switch the currency symbol according to the selected language.
Here is the index.htm file for the demo:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Grid Localization Example</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 src="../../../scripts/data.js"></script>
</head>
<body class="viewport">
    <smart-grid id="grid"></smart-grid>
    <div class="options">
        <div class="caption">
            Language:
        </div>
        <div class="option"><br />
            <smart-radio-button class="language" id="en" enable-container-click>English</smart-radio-button><br/>
            <smart-radio-button class="language" id="de" enable-container-click checked>Deutsch</smart-radio-button>
        </div>
    </div>
    <!-- scripts -->
    <script type="module" src="../../../source/modules/smart.grid.js"></script>
    <script type="module" src="../../../source/modules/smart.radiobutton.js"></script>
    <script type="module" src="index.js"></script>
</body>
</html>

Here is the index.js file:

function setLocalizationCurrency(grid, currency) {
    return grid.localize('currencySymbol') + currency.toFixed(2);
}
function setLocalizationDate(grid, date) {
    let dateLocale = 'de-DE';
    if (grid.locale === 'en') {
        dateLocale = 'en-GB';
    }
    return date.toLocaleString(dateLocale, { timeZone: 'UTC', weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
}
let localizationColumnLabelsDe = [
    {
        label: 'Vorname' //First Name
    },
    {
        label: 'Familienname' //Last Name
    },
    {
        label: 'Datum' //Date
    },
    {
        label: 'Gesamt' //Total
    },
];
let localizationColumnLabelsEn = [
    {
        label: 'First Name'
    },
    {
        label: 'Last Name'
    },
    {
        label: 'Date'
    },
    {
        label: 'Total'
    },
];
let defaultLocalizationColumnLabels = localizationColumnLabelsDe;
window.onload = function () {
    const radioButtons = document.querySelectorAll('smart-radio-button.language');
    const grid = document.getElementById('grid');
    grid.locale = 'de'; //Settings default locale
    grid.messages = {
        'en': {
            'columnMenuItemSortAsc': 'Sort {{mode}}',
            'columnMenuItemSortDesc': 'Sort {{mode}}', //Sort A → Z
            'columnMenuItemRemoveSort': 'Remove Sort',
            'currencySymbol': '£',
        },
        'de': {
            'columnMenuItemSortAsc': 'Sortieren {{mode}}',
            'columnMenuItemSortDesc': 'Sortieren {{mode}}',
            'columnMenuItemRemoveSort': 'Sortierung entfernen',
            'currencySymbol': '€',
        },
    };
    for (let i = 0; i < radioButtons.length; i++) {
        const radioButton = radioButtons[i];
        radioButton.addEventListener('change', function (event) {
            let localizationColumnLabels = defaultLocalizationColumnLabels;
            if (event.detail.value) {
                if (this.id === 'en') {
                    localizationColumnLabels = localizationColumnLabelsEn;
                }
                //Update column labels
                for (let i = 0; i < localizationColumnLabels.length; i++) {
                    grid.columns[i].label = localizationColumnLabels[i].label;
                }
                grid.locale = this.id;
            }
        });
    }
}
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: false,
            },
			selection: {
				enabled: true,
				allowCellSelection: true,
				allowRowHeaderSelection: true,
				allowColumnHeaderSelection: true,
				mode: 'extended'
			},
			behavior: { columnResizeMode: 'growAndShrink' },
            dataSource: new Smart.DataAdapter(
                {
                    dataSource: generateData(32),
				dataFields:
				[
					'id: number',
					'firstName: string',
					'lastName: string',
					'date: string',
					'total: number'
				]
			}),
			columns: [
			{ label: defaultLocalizationColumnLabels[0].label, dataField: 'firstName' },
            { label: defaultLocalizationColumnLabels[1].label, dataField: 'lastName' },
            {
                label: defaultLocalizationColumnLabels[2].label, dataField: 'date', formatFunction(settings) {
                    settings.value = new Date(settings.value);
                    settings.value = setLocalizationDate(grid, settings.value);
                }
            },
            {
                label: defaultLocalizationColumnLabels[3].label, dataField: 'total', cellsFormat: 'c2',
                formatFunction(settings) {
                    settings.value = setLocalizationCurrency(grid, settings.value);
                }
            }
			],
		}
	}
});

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

October 29, 2019 at 6:35 am in reply to: Dynamically add new data bound elements and variables #100467

admin

Keymaster

Hi Starlight Sparkle,
Injecting spans into body is OK, if it is in the APP’s context. Otherwise, they won’t be rendered, as they are outside the App. Please, refer to the examples in the Framework demo section(ex: https://www.htmlelements.com/demos/framework/data-binding/) and the code we posted here in order to get the desired results.
Best Regards,
George
Smart HTML Elements Team
https://www.htmlelements.com

Author

Posts

Viewing 15 posts - 721 through 735 (of 929 total)

← 1 2 3 … 48 49 50 … 60 61 62 →