@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