Products

[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/

[admin]

Hi oliver.aldrian,

Thanks for writing.

After smart.default.css, you can include any of the following CSS files which are included in the Blazor Nuget package:

smart.cyan.css
smart.green.css
smart.indigo.css
smart.orange.css
smart.pink.css
smart.purple.css
smart.red.css
smart.teal.css
smart.turquoise.css
smart.dark-cyan.css
smart.dark-green.css
smart.dark-indigo.css
smart.dark-orange.css
smart.dark-pink.css
smart.dark-purple.css
smart.dark-red.css
smart.dark-teal.css
smart.dark-turquoise.css
smart.bootstrap.css

You can use CSS variables to update the styles of the Grid, too. Please, refer to https://www.htmlelements.com/docs/grid-css/. It lists all CSS variables used by the Datagrid component.

Best regards,
Peter Stoev

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

[admin]

Hi,

The feature with toggling the checkboxes will be available in the next version of the Grid component. We will have a patch release the last week of this month.

Best regards,
Peter Stoev

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

[admin]

Hi,

I updated the sample – https://stackblitz.com/edit/github-kap7fe-vfqtjf?file=pages%2Findex.tsx

Best regards,
Peter Stoev

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

[admin]

Hi Bilal Yasin,

We will need a complete sample which either in stackblitz or codesandbox which shows the reported behavior.

Best regards,
Peter Stoev

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

[admin]

Hi,

We have an example for data binding to XML. You can take a look at https://www.htmlelements.com/demos/grid/datagrid-bind-to-xml/. The data binding approach for Table and Grid is the same.

Hope this helps.

Best regards,
Peter Stoev

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

[admin]

Hi,

Regarding your questions:

1. JSX cannot be used as column template. The column template expects HTML String to be set to formatObject’s template property.
2. The column’s template property is indeed ‘any’ by design, because it could be multiple different things like ‘string’, ‘id’, ‘HTMLTemplateElement’ or function.
3. This is a missing functionality. We will create a work item for implementing it.

Best regards,
Peter Stoev

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

[Author]

Posts