Documentation references row hover but none found #860
JoshuaHintze
started this conversation in
General
Replies: 1 comment
-
|
Thanks for pointing this out. There is no dedicated For this specific case, the recommended approach is to render the delete action in the first/action column and show it with CSS on the rendered row hover: const grid = document.querySelector('revo-grid');
let source = [
{ id: 1, name: 'Steve' },
{ id: 2, name: 'John' },
];
function deleteRow(id: number) {
source = source.filter(row => row.id !== id);
grid.source = source;
}
grid.source = source;
grid.columns = [
{
prop: 'actions',
name: '',
size: 48,
readonly: true,
cellTemplate: (h, { model }) =>
h(
'button',
{
class: 'row-delete-action',
title: 'Delete row',
onMouseDown: (e: MouseEvent) => e.stopPropagation(),
onClick: (e: MouseEvent) => {
e.stopPropagation();
deleteRow(model.id);
},
},
'×',
),
},
{ prop: 'name', name: 'Name' },
];revo-grid .row-delete-action {
opacity: 0;
pointer-events: none;
}
revo-grid .rgRow:hover .row-delete-action,
revo-grid .row-delete-action:focus-visible {
opacity: 1;
pointer-events: auto;
}A couple of notes:
Closing this as answered. We can adjust the docs wording separately so it does not imply a dedicated row-hover event exists. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Describe the issue
On the docs page it mentions here: https://rv-grid.com/guide/patterns#Event-Handling-and-Customization the following:
Pattern: Hook into various events (e.g., cell click, row hover) for custom behaviors.However looking through the events and hooks page I didn't see any mention of
hoverI would like to be able to hover over a row and have an icon show up in the first cell for deletion of the entire row.
Beta Was this translation helpful? Give feedback.
All reactions