Popup for Datagrid Cell Element not working

Radzen.Blazor Components
1

@using Radzen.Blazor.Rendering
< style type="text/css">
.my-popup {
display: none;
position: absolute;
overflow: hidden;
height: 100px;
width: 300px;
border: var(--rz-panel-border);
background-color: var(--rz-panel-background-color);
box-shadow: var(--rz-panel-shadow);
border-radius: var(--rz-border-radius)
}
< /style>
<RadzenDataGrid @ref=@grid Data="DashData" Responsive="true" ExpandMode="DataGridExpandMode.Multiple" AllowRowSelectOnRowClick="false" ShowGroupExpandColumn="true" TItem="Models.DataFlows"
AllowGrouping="true" >
< Columns>
< RadzenDataGridColumn>
< Template Context="FlowItem">
<span class="entry load" style="@LoadClasses(FlowItem,Col2)" title="FlowItem1 - FlowSubItem1"
@ref=@span @onmouseover="@(args => onMouseOver(DataItem, span))">
[ ]
< /span>
< /Template>


< /RadzenDataGrid>
<Popup @ref=@popup id="popup" class="my-popup">
Test Popup
< /Popup>
@code {
RadzenDataGrid<Models.DataFlows> grid { get; set;>}
RadzenDataGridColumn<Models.DataFlows> col2 { get; set; }
ElementReference span;
Popup popup;
private string LoadClasses(Models.DataFlows data, RadzenDataGridColumn<Models.DataFlows> col )
{
string s = "width: 170px; "
return s;
}
private async Task onMouseOver(Models.DataFlows data, ElementReference ItemRef)
{
popup.ToggleAsync(ItemRef);
}
}

So i have created a Data Grid, where i would like to have a specific column with some information in it (being generated in the Column Template, using a simple span element).

The display of this is working perfectly fine. The issue I have is on the popup that i would like to show when hovering over the span element itself. On hovering on any of the elements the popup only shows on the very last element in the data grid (which on quick searching was discussed already here https://forum.radzen.com/t/radzen-datagrid-with-popup/18871/3). However the question here, is that due to this being a data grid with varying number of rows every time, that creating a dictionary of these items, is virtually impossible to then link a set number of references to be able to then refer to the correct element for the popup.

Is there anyway to do something similar and to then link these items together properly, by using any other method, or by using the CellRender of the Data Grid to achieve this? And if the CellRender is a possibility, any simplequick guidance on how to set that up would be great.

Thanks

2

This is how I solved it: gist:e8133f31b5b20cb0b2d316c2a9a5f459 · GitHub

There is a Dictionary<Guid,object> with unique customer GUID as key and <RadzenIcon> as object for later reference.
On each data load or DataGrid page change event the dictionary is cleared. It is automatically populated when the DataGrid rows are populated.
I have an <RadzenIcon> component on each row, that calls a custom CustomerNoteClick(Customer customer) method on click event that:

  1. Stores list of items to be shown in the popup into a private array based on Id of a Customer object passed to it from the <DataGridColumn> → <Template Context=”customer”> template
  2. Calls Popup.ToggleAsync() using dictionary[customer.Id].Element as the ElementReference with the key which is also used to store the Element object reference on grid population.