@boikom

@boikom

Forum Replies Created

Viewing 15 posts - 676 through 690 (of 879 total)
1 2 3 … 45 46 47 … 57 58 59
  • Author
    Posts
  • 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';

    or

    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

    October 29, 2019 at 4:20 am in reply to: Dynamically add new data bound elements and variables #100466
    admin
    Keymaster

    I have tried doing things in the following order

    1. Construct Smart.App object with blank parameter (aka {})
    2. Inject new span with double bracket into body after page load
    3. Set data value

    It does not appear to replace the value contained in double brackets — it just continues to display the double brackets.
    Adding the data value before the span has been injected, but after page load, does not appear to have any difference.
    In addition, swapping the order of steps 1 and 2 appears to cause the entire page to blank out, including elements unrelated to the operation.

    October 29, 2019 at 3:19 am in reply to: Dynamically add new data bound elements and variables #100465
    admin
    Keymaster

    Hi,
    smart-model is compatible with sub-property binding and we have demo about that: https://www.htmlelements.com/demos/framework/sub-property-binding/.
    It is also possible to dynamically add additional objects to app.data.
    For example:

    window.onload = function() {
    	const app = new Smart.App(
    		{
    			data: {
    				details: {
    					subject: "About Transaction",
    					message: "Hey, Peter. Take a look at the items, I sent you earlier."
    				}						
    			}
    		}
    	)		
      
      app.data.test = 'test';
    }

    HTML

    	<div class="demo-description">
    	TextBox and MultilineTextBox are bound to sub properties. 
    	</div>
    	<br/>
    	<smart-text-box smart-model="details.subject" id="textBox1"></smart-text-box>	<br/><br/>
    	<smart-multiline-text-box  smart-model="details.message" id="textBox2"></smart-multiline-text-box>	
    	<br/>	
    	<span>{{details.subject}}</span>
    	<br/>	
    	<span>{{details.message}}</span>
    	<span>{{test}}</span>

    Demo: https://codepen.io/boyko-markov/pen/NWWvBRx?&editable=true
    If it is array and you add it like that:

     app.data.array = ['hi', 'bye'];

    in HTML you can refer it like that:

    	<span>{{array.0}}</span>

    Best Regards,
    George
    Smart HTML Elements Team
    https://www.htmlelements.com

    October 28, 2019 at 8:22 am in reply to: Change tab title #100463
    admin
    Keymaster

    Hi Starlight Sparkle,
    the newly added item via the “addNewTab” button always has a label of “New Tab” and it’s not possible to change that via API. However since the new item becomes the selected item by default you can accomplish the same result by binding to the change event and calling update method on it. Here’s how to do it:

    
document.querySelector('smart-tabs').addEventListener('change', function (event) {
        const newTabIndex = event.detail.index;
        //Get all tab items inside the element
        const allTabItems = this.querySelectorAll('smart-tab-item');
        //Update the label
        if (allTabItems[newTabIndex].label === 'New Tab') {
            this.update(newTabIndex, 'New Custom Label');
        }
    });

    Best Regards,
    Christopher
    Smart HTML Elements Team
    https://www.htmlelements.com

    October 26, 2019 at 8:47 am in reply to: Change tab title #100458
    admin
    Keymaster

    Damn, can’t believe I missed that in the documentation. Sorry and thanks!
    But on a related note, is it possible to set the default label that will be used by new tabs created through the built-in “new tab” button?

    October 24, 2019 at 5:41 am in reply to: Change tab title #100448
    admin
    Keymaster

    Hello Starlight Sparkle,
    Thank you for your interest. The proper way to update a tab item’s label and/or content is by calling the method update. Here is an example of setting only the title:
    document.getElementById('tabs').update(0, 'Updated title');
    If you wish to change the content, too, pass a third argument, e.g.:
    document.getElementById('tabs').update(0, 'Updated title', 'Updated content');
    Here is also a demo that showcases this method among others: https://www.htmlelements.com/demos/tabs/insert-remove-update/.
    Best regards,
    Dimitar
    Smart HTML Elements Team
    https://www.htmlelements.com

  • Author
    Posts
Viewing 15 posts - 676 through 690 (of 879 total)
1 2 3 … 45 46 47 … 57 58 59