JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › allowHover only works on selected rows › Reply To: allowHover only works on selected rows
October 20, 2021 at 5:27 pm
#102451
Yavor Dashev
Participant
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/