Products

[admin]

Hi,

We released an update of our React components with the fix for the DateRangeInput component. The sources for the demo are updated online, too.

Best regards,
Peter Stoev

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

[admin]

Hi,

Thank you for the feedback. We tested this with the latest React version and there is an error in the DateRangeInput React component. It is missing an important import in the references list. We will update this as soon as possible. When we update and resolve the issue, the topic will be updated, too.

Best regards,
Peter Stoev

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

[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

[Author]

Posts