@svetoslav_borislavov
@svetoslav_borislavov
Forum Replies Created
-
AuthorPosts
-
svetoslav_borislavov
ParticipantHi,
Thank you for reporting the problem, I have opened an issue for it!
Meanwhile, if you need further assistance, do not hesitate to contact us!Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/ParticipantHi,
The bug is fixed and the fix will be available with the new version!
Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/ParticipantHi,
In the onKey callback, you are already detecting the ‘Enter’ key, you can get the current selection and select the next cell. If the current cell is the last one, you will select the first cell of the next row
Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/ParticipantHi,
Sorry, I could not reproduce the problem, here is the exact same example as yours: https://codepen.io/svetoslavjqwidgets/pen/GRYEYEN
You may see that an error is not received.
May please check your version of Smart UI, you can also send us a demo with the problem.We are waiting for you!
Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/ParticipantHi,
You have an incorrect string. In the if statement of the onKey callback, there should be e.key === ‘Enter’, not e.key === ‘Ener’.
That’s why the selection of the next row is not prevented.
As for the end of the edit, you cannot prevent this.Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/ParticipantHi,
You can prevent it the same way as the Tab key, in the onKey function with a conditional.
Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/ParticipantHi,
Yes, you can do it, simply use the addRow method.
Here is an example: https://codepen.io/svetoslavjqwidgets/pen/GRYEKjrI hope this helps!
Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/ParticipantHi,
This is a bug, thank you for reporting it. As a workaround, you may use the onKey callback to detect the TAB keypress.
Here is an example: https://codepen.io/svetoslavjqwidgets/pen/XWxRMWVBest Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/ParticipantHi,
The onRowClass can be used as callback property of the Grid. Using the
onRowClassfunction you can dynamically apply a CSS class(es) to an entire row.onRowClassshould return a CSS class name string or an array of CSS class names divided by space.You can set the callback initially:
window.Smart(‘#grid’, class {
get properties() {
return {
behavior: { columnResizeMode: ‘growAndShrink’ },
dataSource: new Smart.DataAdapter({
dataSource: window.generateData(1000),
dataFields: [
‘id: number’,
‘firstName: string’,
‘lastName: string’,
‘productName: string’,
‘quantity: number’,
‘price: number’,
‘total: number’
]
}),
onRowClass(index, data, row) {
if (index % 2 === 0) {
return ‘row-class-1’
}
if (data.firstName === ‘Andrew’) {
return ‘row-class-2’;
}
},
columns: [
{ label: ‘First Name’, dataField: ‘firstName’ },
{ label: ‘Last Name’, dataField: ‘lastName’ },
{ label: ‘Product’, dataField: ‘productName’ },
{ label: ‘Quantity’, dataField: ‘quantity’ },
{ label: ‘Unit Price’, dataField: ‘price’ },
{ label: ‘Total’, dataField: ‘total’ }
]
}
}
});If you want to set it dynamically, you can do so:
const grid = document.querySelector(‘#grid’)grid.onRowClass = (index, data, row) => {
if (index % 2 === 0) {
return ‘row-class-1’
}
if (data.firstName === ‘Andrew’) {
return ‘row-class-2’;
}
}We have a topic for different ways of styling Grid rows, you can find it here:
https://www.htmlelements.com/docs/grid-styling-rows/Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/ParticipantHi,
The two options to have a nested grid are with a dialog or as dropdown when the main grid is in tree mode.
To see them, please visit the following demo: https://codepen.io/svetoslavjqwidgets/pen/OJBpMVX
When you load it initially, you will see on the left side arrows on each row. Clicking the arrow will expand the row detail with the nested grid.
To make it dialog, uncomment this code in the rowDetails object:
// dialog: {
// enabled: true
// }I hope this helps!
Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/ParticipantHi,
This is the default behaviour when the data is loading. Once the data load the spinner disappears and the data is shown.
You may see the same example here (the data loads 2.5sec): https://codepen.io/svetoslavjqwidgets/pen/zYmovebTo avoid this you can load the data without virtualization.
Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/ParticipantHi,
Yes, as I told you when you prevent the default behaviour you should manually select the next cell.
You can get the current selection and calculate the next cell based on the current selected.Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/ParticipantHi,
You can use the onKey callback to prevent default behaviour if the key is Tab.
Note that you should manually select the next cell if you prevent the default behaviour.https://codepen.io/svetoslavjqwidgets/pen/JjmRrwa
Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/ParticipantHi,
This is a custom behaviour which you cannot be built with Scheduler. You may get the events of the scheduler, do your calculations and visualize them as you want.
A custom row cannot be added to the Scheduler, you can modify the border of the cell between groups:
https://codepen.io/svetoslavjqwidgets/pen/QWZyjeLBest Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/ParticipantHi,
In the column definition object, you can pass an editor object containing the template (in your case dateInput or dateTimePicker).
The editor object should also have a settings object. The settings will be set to the template’s component (in this case dateInput or dateTimePicker).
Here is a quick example: https://codepen.io/svetoslavjqwidgets/pen/OJBMyqrBest Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/ -
AuthorPosts