Products

[admin]

Hi Pavan,

The query builder uses smart-input internally. In smart-input, the auto-complete logic displays results matching a query and the maximum number of items is determined by the smart-input’s items property which defaults to 8. If you want to change the behavior of the query builder, you can make queryBuilder.querySelectorAll(‘smart-input’), loop through the found elements and update the “items” property to a value which you need.

Hope this helps.

Best regards,
Peter Stoev

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

[admin]

Hi Angel,

I checked our support mail and could not find an email by you. If it is more convenient, you can also share a small stackblitz example which uses dummy data and just shows an issue. That will be enough for us.

Best regards,
Peter Stoev

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

[admin]

Hi Ali,

Multi column header is demonstrated in our Grid Overview example – https://www.htmlelements.com/blazor/blazor-ui/demos/blazor-grid?id=overview

Best regards,
Peter Stoev

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

[admin]

Hi Oleg,

The reported issues are already resolved in the current version.

Example:

function GetData() {
    const data = new Array();
    const generatekey = function () {
        const S4 = function () {
            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        };
        return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
    };
    for (let i = 0; i < 100; i++) {
        const row = {};
        const tasks = ["Shopping", "Housewares", "Kitchen supplies", "Groceries", "Cleaning supplies", "Office supplies", "Remodeling", "Paint bedroom", "Paint wall", "Fitness", "Decorate living room",
            "Fix lights", "Fix front door", "Clean kitchen"];
        const firstNames = [
            "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
        ];
        const lastNames = [
            "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
        ];
        const taskindex = Math.floor(Math.random() * tasks.length);
        row["id"] = generatekey();
        row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
        row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
        row["name"] = row["firstname"] + " " + row["lastname"];
        row["task"] = tasks[taskindex];
        row["duration"] = 1 + Math.floor(Math.random() * 10);
        data.push(row);
    }
    return data;
}
Smart('#grid', class {
    get properties() {
        return {
            dataSource: new Smart.DataAdapter({
                virtualDataSourceLength: 20,
                virtualDataSourceCache: true,
                virtualDataSourceOnExpand: function (resultCallbackFunction, details) {
                    setTimeout(function () {
                        const data = GetData().slice(0, 3);
                        if (details.row.level === 1) {
                            for (let i = 0; i < data.length; i++) {
                                data[i].leaf = true;
                            }
                            resultCallbackFunction({
                                dataSource: data
                            });
                        }
                        else {
                            resultCallbackFunction({
                                dataSource: data
                            });
                        }
                    }, 300);
                },
                virtualDataSource: function (resultCallbackFunction, details) {
                    setTimeout(function () {
                        resultCallbackFunction({
                            dataSource: GetData().slice(0, 20)
                        });
                    }, 300);
                },
                id: 'id',
                dataFields: [
                    'id: string',
                    'name: string',
                    'duration: number',
                    'task: string'
                ]
            }),
            layout: {
                rowHeight: 'auto',
                allowCellsWrap: true
            },
            behavior: { columnResizeMode: 'growAndShrink' },
            columns: [
                { label: 'Task', dataField: "task", align: 'center', width: 300 },
                { label: 'Person Name', dataField: "name", cellsAlign: 'center', align: 'center', width: 300 },
                {
                    label: 'Duration', dataField: "duration", cellsAlign: 'center', align: 'center', formatFunction: function (row, column, value) {
                        const hour = value > 1 ? " hours" : " hour";
                        return value + hour;
                    }
                }
            ]
        };
    }
});

Best regards,
Peter Stoev

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

[admin]

Hi Dark Beccio,

Thanks, we will take a look. Grazie.

Best regards,
Peter Stoev

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

[admin]

Hi Angel,

Could you share stackblitz sample as it seems you’re using a combination of components like toast, grid, dropdownlist and it is not easy to reproduce this?

For example, you can modify and share this sample https://stackblitz.com/github/htmlelements/smart-webcomponents-angular/tree/master/demos/dropdownlist/basic/?file=src%2Fapp%2Fapp.component.ts

Looking forward to your reply.

Best regards,
Peter Stoev

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

[admin]

Hi Joseph,

There is some misunderstanding here. All the code samples are runnable as is. We shared a code sample in codesandbox without errors so we do not understand what is different in our environment and yours. In fact the ListItem has value attribute and all components have theme attribute, too. Sorry to learn that your evaluation is not going well.

Best regards,
Peter Stoev

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

[admin]

Hi,

Unfortunately, we cannot reproduce this and we will need a complete codepen sample or something similar. Here is our test code based on your last post:

Smart('#grid', class {
    get properties() {
        return {
            sorting: {
                enabled: true
            },
            editing: {
                enabled: true,
                mode: 'row',
                action: 'none',
                dialog: {
                    enabled: true
                },
                commandColumn: {
                    visible: true,
                    position: "near",
                    dataSource: {
                        commandColumnMenu: {
                            visible: true
                        },
                        commandColumnRowMenu: {
                            visible: true
                        }
                    }
                }
            },
            locale: 'de',
            selection: {
                enabled: false,
                allowRowSelection: false,
                checkBoxes: {
                    enabled: true
                }
            },

            filtering: {
                enabled: true
            },
            behavior: { allowColumnReorder: true },
            onCommand: function (args) {
                if (args.name === "commandColumnRowMenuCommand") {
                    const row = args.details;
                    const menu = document.getElementById("grid");
                    args.event.preventDefault();
                    let contextMenuGridOpenedOn = args.details;
                    window.numOrdine = contextMenuGridOpenedOn.data.NumeroOrdine;
                    menu.open(args.event.pageX - 30, args.event.pageY - 80);
                    args.handled = true;
                }
            },
            dataSource: [],
            columns: [
                {
                    label: 'First Name', dataField: 'firstName', filterMenuMode: 'excel'
                },
                { label: 'Last Name', dataField: 'lastName' },
                { label: 'Date', dataField: 'date', align: 'right', cellsAlign: 'right', },
                { label: 'Product', dataField: 'productName' },
                { label: 'Quantity', dataField: 'quantity', align: 'right', cellsAlign: 'right', }
            ]
        }
    }
});

No errors in the console. The grid displays with columns and empty data source.

Best regards,
Peter Stoev

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

[admin]

Hi Joseph,

Online example using the provided code and the current version of Smart UI for React: https://codesandbox.io/s/happy-resonance-tt2vek?file=/src/App.js

Best regards,
Peter Stoev

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

[admin]

Hi Joseph,

How do you use these components? The sample code is available in the download package and does not produce such errors.

Best regards,
Peter Stoev

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

[admin]

Hi,

The Dropdownlist’s basic sample is like that:

import React from "react";
import ReactDOM from "react-dom";
import { DropDownList, ListItem, ListItemsGroup } from 'smart-webcomponents-react/dropdownlist';

class App extends React.Component {

	componentDidMount() {

	}

	render() {
		return (
			<div>
			    <DropDownList  selectedIndexes={[0]}>
			        <ListItem value="1">Affogato</ListItem>
			        <ListItem value="2">Americano</ListItem>
			        <ListItem value="3">Bicerin</ListItem>
			        <ListItem value="4">Breve</ListItem>
			        <ListItem value="5">Cappuccino</ListItem>
			        <ListItem value="6">Cafe Crema</ListItem>
			        <ListItem value="7">Cafe Corretto</ListItem>
			        <ListItem value="8">Cafe macchiato</ListItem>
			        <ListItem value="9">Cafe mocha</ListItem>
			        <ListItem value="10">Cortado</ListItem>
			        <ListItem value="11">Cuban espresso</ListItem>
			        <ListItem value="12">Espresso</ListItem>
			        <ListItem value="13">Eiskaffee</ListItem>
			        <ListItem value="14">Frappuccino</ListItem>
			        <ListItem value="15">Galao</ListItem>
			        <ListItem value="16">Greek frappe coffee</ListItem>
			        <ListItem value="17">Iced Coffee</ListItem>
			        <ListItem value="18">Instant Coffee</ListItem>
			        <ListItem value="19">Latte</ListItem>
			        <ListItem value="20">Liqueur coffee</ListItem>
			    </DropDownList>
			</div>
		);
	}
}

ReactDOM.render(<App />, document.querySelector("#root"));

export default App;

It does not produce errors. In case you encounter an error, please share details how we can reproduce it.

Best regards,
Peter Stoev

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

[admin]

Hi,

Would not it better if you use the smart-input in that case instead? Otherwise with CSS you can hide it. The ‘.smart-drop-down-button’ CSS class is applied to the dropdown button.

Best regards,
Peter Stoev

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

[admin]

Hi Joseph Norris,

-–smart-accordion-item-header-height defaults to 48px everywhere in our code. The -–smart-accordion-expanded-content-height is 0 by design as it is automatically calculated when the control is created. If there is any sample which does not run, please point it out and we will check it. All the samples available online are using the latest version of the sources and styles.

Best regards,
Peter Stoev

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

[admin]

Hi Oliver,

It is easily possible to get a row id by index by using the getRowId( rowIndex: number) method of the Grid, if row id is necessary. In the next version, we will also introduce selection methods by index as it seems to be much requested functionality by our customers.

Best regards,
Peter Stoev

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

[admin]

Hi,

We will need more information about that, because we are unable to reproduce it https://codepen.io/jqwidgets/pen/OJQNmZJ?editors=1112

Best regards,
Peter Stoev

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

[Author]

Posts