Products

[admin]

Hi Tullio,

The dropdownlist’s value is passed with the form when the ‘name’ property of the component is set.

Best regards,
Peter Stoev

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

[admin]

Hi,

Yes, there is. You can use the dataSource property to set the items instead of creating html element for each item.

Example:

` document.getElementById(‘dropDownListMethodsDemo’).dataSource =
[{
label: “Andrew”,
value: 1,
group: “Product Owners”
},
{
label: “Natalia”,
value: 2,
group: “Developers”
},
{
label: “Michael”,
value: 3,
group: “Developers”
},
{
label: “Angel”,
value: 4,
group: “Product Owners”
},
{
label: “Hristo”,
value: 5,
group: “Developers”
},
{
label: “Peter”,
value: 6,
group: “Developers”
},
{
label: “Albert”,
value: 7,
group: “Support”
},
{
label: “George”,
value: 8,
group: “Support”
}];`

Best regards,
Peter Stoev

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

[admin]

Hi Tullio,

if you have dropdownlists, by default the popup is part of the dropdownlist and if there is not enough available space, the dropdown will not be fully visible. You can optionally display it, if the dropdown is added to the document’s body. The dropdownlist has a property called ‘dropDownAppendTo’. If you set it to body, the dropdown will be added to the document’s body so it will always be on top of other elements.

Best regards,
Peter Stoev

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

[admin]

Hi tbettinazzi,

If you wish, you can create a function which styles a listbox and you can pass a listbox instance as a function parameter. Unfortunately, inline styles like that are not supported.

Best regards,
Peter Stoev

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

[admin]

Hi,

One common approach is to initialize elements on demand when they are necessary. I do not know what your application is, but for example, if you have tabs, initialize the elements which are inside the tabs when the tab is clicked. Similar approach can be applied if you use Accordion.

Hope this information helps.

Best regards,
Peter Stoev

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

[admin]

Hi Hugh,

The smart.ui.grid is a web component with shadow dom and it includes all the styles imported in the shadow root.
In the default case, the smart.grid.js is used instead as it includes only the scripts. In that case, the CSS styles file is referred usually from index page, angular.json in angular or import in react. The css file name is smart.default.css. In most of the demos on our website, we use smart.grid.js. In examples with stencil and where we want to demonstrate a web component with a shadow dom enabled, we use the wrapper web component smart.ui.grid.js. The smart.grid.js module is 2MB. The inline CSS used in smart.grid.js cannot be moved to a separate file, because it is related to things like rows & columns resize i.e we need dynamic width, height, left and top settings, the scrolling is also part of this. We have scrolling with fixed columns and many additional features which require small amount of inline css. Unfortunately, I do not think that you can make the bundle smaller. We have another option with the more lightweight smart.table component, but it does not have all the features of the Grid.

Best regards,
Peter Stoev

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

[admin]

Hi Kris,

The focus is much related to the keyboard navigation in order to inform the user where the keyboard navigation starts from. We will consider your comments by adding a property to disable the keyboard navigation so in that case, we would not add focus to elements.

Best regards,
Peter Stoev

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

[admin]

Hi Hugh Anderson,

This is a missing functionality for the ui-grid with shadow dom enabled. We will create a work item about this and resolve it in a future release.

Best regards,
Peter Stoev

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

[admin]

Hi Kristopher,

The behavior is actually by design. When you check/uncheck the row’s selection is changed. However, the row is on focus as it is the currently active element after you clicked it and if you press the arrow up/down you can notice that the focus selection starts from it. If you check more than 1 row, you will notice that the style of the selected rows and the focused row are different. If you want to turn off this, you can edit the CSS style for the smart-grid-cell element when the smart-grid-row has the focus attribute.

Best regards,
Peter Stoev

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

[admin]

Hi,

Thank you for your 1st post in our Forum. Unfortunately, it is a SPAM.
If you have any questions regarding our products, feel free to post here.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[admin]

Hi,

This is an issue in the Grid. It will be resolved as soon as possible.

Thank you for the feedback! We appreciate it!

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[admin]

Hi MikeB,

swipe on touch is still not implemented for the blazor carousel component. We have it as a feature in our TO DO list for the upcoming releases.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[admin]

Hi,

The Default theme is a Material design-based theme. If you need to switch to a different color scheme of that theme, you need to add a link to source/styles/smart.purple.css after smart.default.css in your app. The same is valid for the rest of the available color schemes.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[admin]

Hi,

We have a callback function – onRowDetailUpdated{(index: number, row: Smart.Grid.Row, details: HTMLElement): void}. It is called each time the row detail is expanded/collapsed and requests an update.

Best regards,
Peter Stoev

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

[admin]

Hi Martin,

These options work for cells not in view as well. For example:

Smart('#grid', class {
    get properties() {
        return {
            dataSource: new Smart.DataAdapter(
			{
			    dataSource: generateData(1000),
			    dataFields:
				[
					'id: number',
					'firstName: string',
					'lastName: string',
					'productName: string',
                    'available: bool',
					'quantity: number',
					'date: date',
					'price: number',
					'total: number'
				]
			}),
          selection: {
                            enabled: true,
                            allowCellSelection: true,
                            //allowRowHeaderSelection: true,
                            //allowColumnHeaderSelection: true,
                            mode: 'extended'
                        },
                        editing: {
                            enabled: true,
                            mode: 'cell'
                        },
                        sorting: {
                            enabled: true
                        },
                        filtering: {
                            enabled: true
                        },
                        behavior: { columnResizeMode: 'growAndShrink' },
                        appearance: {
                            alternationCount: 2,
                            allowHover: true
                        },
            columns: [
			{
			    label: 'First Name', dataField: 'firstName'
			},
			{
			    label: 'Last Name', dataField: 'lastName'
			},
			{ label: 'Product', dataField: 'productName', editor: 'autoComplete' },
			{ label: 'Order Date', width: 250, cellsFormat: 'dd-MM-yyyy', dataField: 'date', editor: {
				template: 'dateTimePicker',
				formatString: 'dd-MM-yyyy',
				onInit(index, dataField, editor){
				}
			}
			},
			{ label: 'Quantity', dataField: 'quantity', editor: 'numberInput' },
			{ label: 'Unit Price', dataField: 'price', editor: 'numberInput', cellsFormat: 'c2' }
            ]
        }
    }
});
window.onload = ()=> {
  window.grid.rows[100].cells[0].color = 'red';
}

The above code sets a ‘red’ color to the first cell in the row with index = 100 which is not in the view. When you scroll vertically to that row, you will see that the cell is in red.

For more details about styling the grid cells, you can look at: https://www.htmlelements.com/docs/grid-styling-cells/

Best regards,
Peter Stoev

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

[Author]

Posts