allowHover only works on selected rows

[Matias Galante]

On the grid I’ve been wanting to add an effect where hovering over a row gives a highlight effect. I found the allowHover property for appearance which says it does it but I noticed it only applies the effect if the rows are selected. Was that the intended way or is it supposed to highlight any row regardless of selection?

My other question is if there’s a way to change the cursor icon to pointer to show that a row can be clickable or if we should override the cursor: default rule in css for smart-grid-row instead?

Thanks!

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

[Matias Galante]

Thanks for the reply. Sorry I forgot to mention I’m using Angular 2+. Here is my code below of what I currently have for the allowHover problem:

component.ts

GridConfig = {
appearance: { alternationStart: 0, alternationCount: 2, placeholder: 'No ROI
Records', allowHover: true },
dataSource: [],
filtering: { enabled: true },
columnMenu: { enabled: false },
selection: { enabled: true, mode: 'one' },
sorting: { enabled: true },
columns: [
{ label: 'Organization', dataField: 'organization', sortOrder: 'asc' },
{ label: 'Created By', dataField: 'createdBy' },
{ label: 'Start Date', dataField: 'startDate', width: 100 },
{ label: 'End Date', dataField: 'endDate', width: 100 },
{ label: 'Status', dataField: 'status', width: 120 }
]
}

[Matias Galante]

when my mouse is over a row, nothing happens

my html looks like:

smart-grid
#grid
id="grid"
fxFlex
[appearance]="GridConfig.appearance"
[columns]="GridConfig.columns"
[columnMenu] = "GridConfig.columnMenu"
[dataSource]="GridConfig.dataSource"
[filtering]="GridConfig.filtering"
[selection]="GridConfig.selection"
[sorting]="GridConfig.sorting"
<div id="grid-spacer"></div>
smart-grid

[Yavor Dashev]

Hi Matias,

I have found an issue related with the appearance property of the SmartGrid and when you have set the alternationStart and alternationCount property the allowHover property doesn’t work as intended. If you remove those two properties it will function as intended.

Also I will add a work item for this use case and we will work to fix it as soon as we are able to.

Apologies for the cause inconvenience!

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

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

[Matias Galante]

That helped, thank you!

[Author]

Posts