Products

[admin]

Hi Matias,

In order to style the buttons you can use CSS and set the background and color CSS properties.

.smart-upload-all-button – CSS class for upload button.
.smart-cancel-all-button – CSS class for cancel button.
.smart-pause-all-button – CSS class for pause button.
.smart-browse-button – CSS class for browse button.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[admin]

Hi coderelayer,

Unfortunately, we do not have integration help topics with Inertia.js and have not used it. I will create a work item for adding a doc topic about that in the future.
Basically, the Grid can display data from simple Javascript array so if you pass such, it will display it.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[admin]

Hi Christophe Weibel,

The methods which you used does not refresh the data source. They refresh the HTML Elements used in the grid i.e re-create them, update the layout, etc.

Here is an example which shows how to use the onRowUpdate

window.Smart('#grid', class {
    get properties() {
        return {
            dataSource: new window.Smart.DataAdapter({
                dataSource: window.generateData(100),
                dataFields: [
                    'id: number',
                    'firstName: string',
                    'lastName: string',
                    'productName: string',
                    'available: bool',
                    'quantity: number',
                    'price: number',
                    'total: number'
                ]
            }),
            editing: {
                enabled: true,
                mode: 'row'
            },
            onRowUpdate(index, row, oldValue, value, confirm) {
                if (value.firstName === 'Test') {
				   confirm(true);
                }
                else {
                    confirm(false);
                }
            },
            selection: {
                enabled: true,
                allowCellSelection: true,
                allowRowHeaderSelection: true,
                allowColumnHeaderSelection: true,
                mode: 'extended'
            },
            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' }
            ]
        };
    }
});

In the above code, when the firstName column’s value is ‘Test’, changes are saved, otherwise they are not.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[admin]

Hi Michele,

We investigated the item, but we are still unable to find a solution for it. It is related to the smart-tabs component with specific sizes in auto-hide mode only. Once the issue is resolved, the information will be published in the release notes section on our website.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[admin]

Hi,

Could you share a codepen example, because it would be hard to reproduce by using the provided code part. From ‘dataSource’ is undefined error I would guess that some kind of function context is not right which could be because of the async/await usage in the provided code.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[admin]

Hi,

Would you like to share what kind of details are missing? The docs are constantly improved and is a top priority for us. For example, two days ago we added 70+ help tutorials to our Blazor docs.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[admin]

Hi Joko,

We do not have support for Cascade tabs at present. We will add support for such scenario in one of the upcoming releases. Once the feature is available, the information will be published in the release notes.

Update. The reported issue would be resolved in the next release.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[admin]

Hi,

I would suggest you using the Editor component instead which has such built-in functionality – https://www.htmlelements.com/demos/editor/editor-char-counter/

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[admin]

Hi James,

onCellUpdate is a property so in angular in app.component.ts it would be:

` onCellUpdate = function(cell, oldValue, newValue, confirm) {
oldValue = cell.value;
alert(cell.row.id + “/” + cell.column.dataField);
if (newValue === “test”) {
confirm(false);
}
else {
confirm(true);
}
}`

in the template, you will need to set the onCellUpdate grid property to point to the property in the app.component.ts.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[admin]

Hi,

There are several things wrong in the provided code:

objRow.cells[0].value=arrData[0]; within the addRow callback function.
objGrid.dataSource.dataSource=_data; – dataSource.dataSource is incorrect way to update a data adapter.

For adding & updating rows we have an online example: https://www.htmlelements.com/demos/grid/dynamic-rows/.

To add a row to the first position, simply modify it to use splice instead of push:

rows.splice(0,0,createRow());

or addRow method like that:

document.querySelector('smart-grid').addRow(createRow(), false);. The second parameter instructs the datagrid to add the new row to the top.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[admin]

Hi Dark Beccio,

To select multiple values at once, the selectedValues or selectedIndexes properties should be used.

Example:

    <smart-combo-box selected-values=["1","2"] selection-mode="checkBox">
        <smart-list-item value="1">Affogato</smart-list-item>
        <smart-list-item value="2">Americano</smart-list-item>
        <smart-list-item value="3">Bicerin</smart-list-item>
        <smart-list-item value="4">Breve</smart-list-item>
        <smart-list-item value="5">Cappuccino</smart-list-item>
        <smart-list-item value="6">Cafe Crema</smart-list-item>
        <smart-list-item value="7">Cafe Corretto</smart-list-item>
        <smart-list-item value="8">Cafe macchiato</smart-list-item>
        <smart-list-item value="9">Cafe mocha</smart-list-item>
        <smart-list-item value="10">Cortado</smart-list-item>
        <smart-list-item value="11">Cuban espresso</smart-list-item>
        <smart-list-item value="12">Espresso</smart-list-item>
        <smart-list-item value="13">Eiskaffee</smart-list-item>
        <smart-list-item value="14">Frappuccino</smart-list-item>
        <smart-list-item value="15">Galao</smart-list-item>
        <smart-list-item value="16">Greek frappe coffee</smart-list-item>
        <smart-list-item value="17">Iced Coffee</smart-list-item>
        <smart-list-item value="18">Instant Coffee</smart-list-item>
        <smart-list-item value="19">Latte</smart-list-item>
        <smart-list-item value="20">Liqueur coffee</smart-list-item>
    </smart-combo-box>

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[admin]

Hi Oleg Ilin,

The fix for that item is scheduled for Q1 2022.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[admin]

Hi,

Thanks for the feedback. Could you please elaborate on this? Which props are not described well compared to our other product. We are improving the docs and working on that every day.

Regards,
Peter

Smart UI
Htmlelements.com

[admin]

Hi Joko,

If you set the value programmatically then you will probably know when in your code you set it. Each value change results in ‘change’ event trigger. We do not have API which tells whether the value is set by programmatic setting. That can be achieved in your code where you set the Slider’s value. I would suggest you to use a boolean variable to add such logic.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[admin]

Hi,

By using const tree = document.querySelector(“smart-tree”) you can get the Tree’s HTML Element instance. Then you get all tree items or tree item groups, you can use tree.querySelectorAll(“smart-tree-item”); or tree.querySelectorAll(“smart-tree-items-group”); You can also query select by ID or CSS class if you set such to your tree items or groups. By having the HTML Elements stored in a variable, you can then use Smart.Tree’s API to add or remove items. I would like to suggest you to look at https://www.htmlelements.com/demos/tree/context-menu/. This example shows how to add or remove tree items dynamically depending on user selection through a context menu.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts