Reply To: allowHover only works on selected rows

[Yavor Dashev]

Hi Matias Galante,

I have prepared a code snippet which showcases how to have the functionalities that you need, however the ‘allowHover’ property should work even when you don’t select a row.
In your JS file:

window.Smart('#grid', class {
get properties() {
return {
dataSource: new window.Smart.DataAdapter({
dataSource: window.Data,
dataFields: [
'id: number',
'firstName: string',
'lastName: string',
'productName: string',
'available: bool',
'quantity: number',
'price: number',
'total: number'
]
}),
appearance: {
allowHover: true
},
columns: [
{
label: 'First Name', dataField: 'firstName'
},
{ label: 'Last Name', dataField: 'lastName' },
{ label: 'Product', dataField: 'productName' },
{ label: 'Available', dataField: 'available', template: 'checkBox' },
{ label: 'Quantity', dataField: 'quantity' },
{ label: 'Unit Price', dataField: 'price', cellsFormat: 'c2' }
]
};
}
});

And if you want to have another cursor style when you hover the row:

smart-grid-cell:hover {
cursor: pointer!important;
}

If this doesn’t work for you it will be best to share a code example of your use case in order to be able to give you proper solution.

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/