I am using an AntDesign Table with a selction. If I select a person, and use the right mouse click I want to show the popover of the selected row. I have already disabled the context menu if I use the right mouse click.
How is it possible to show excactly the popover of the selected row?
<div oncontextmenu="return false;" @onmouseup="HandleMouseUp">
<AntDesign.Table DataSource="@persons" TItem="Person" @bind-SelectedRows="@selectedRows">
<Selection Key="@(context.Id.ToString())"/>
<Column Title="Name">
@(context.Name)
</Column>
<Column Title="Surname">
@(context.Surname)
</Column>
<ActionColumn Title="Settings">
<Popover Trigger="@(new Trigger[] { Trigger.Click})">
<ContentTemplate>
<Button Type="@ButtonType.Text" @onclick="@(() => DeletePersonAsync(context))" />
Delete
</Button>
</ContentTemplate>
<ChildContent>
<Button type="primary" @onclick="@(() => HandleMoreActionsClicked(context))">Actions</Button>
</ChildContent>
</Popover>
</ActionColumn>
</AntDesign.Table>
</div>
@code
{
private List<Person> persons = new();
private IEnumerable<Person> selectedRows = new();
protected override void OnInitialized()
{
persons = GetListOfPersons();
}
private void HandleMouseUp(MouseEventArgs args)
{
if (args.Button == 2)
{
if(selectedRows.Count() == 0)
{
return;
}
else if(selectedRows.Count() == 1)
{
var currentRow = selectedRows.First();
//open Popover for this row
}
else
{
//TODO
}
}
}
private async Task DeletePersonAsync(Person person)
{
await Client.DeletePersonAsync(person);
}
private void HandleMoreActionsClicked(Person clickedRowItem)
{
if (!selectedRows.Any(r => r.Id == clickedRowItem.Id))
{
selectedRows = new List<Person> { clickedRowItem };
}
}
}