Hi,
I'm trying to add a tooltip to a datagrid with real-time data but the tooltip is showing in the upper left corner of the browser instead of below the field in the grid. I have modified a local copy of Blazor DataGrid Component - Real-time Data | Free UI Components by Radzen with
@using System.Linq.Dynamic.Core
@inject TooltipService tooltipService
<RadzenDataGrid @ref=grid Data="@data" TItem="IDictionary<string, object>" AllowFiltering="true" AllowPaging="true" AllowSorting="true">
<Columns>
@foreach (var column in columns)
{
<RadzenDataGridColumn @key=@column.Key Title="@column.Key" Type="column.Value"
Property="@PropertyAccess.GetDynamicPropertyExpression(column.Key, column.Value)">
<Template>
<RadzenText MouseEnter="@(args => ShowTooltip(args))" MouseLeave="@(_ => tooltipService.Close())">
@context[@column.Key]
</RadzenText>
</Template>
</RadzenDataGridColumn>
}
</Columns>
</RadzenDataGrid>
@code {
void ShowTooltip(ElementReference elementReference, TooltipOptions options = null) => tooltipService.Open(elementReference, "TOOLTIP!!!!!", options);
}
@code {
RadzenDataGrid<IDictionary<string, object>> grid;
public IEnumerable<IDictionary<string, object>> data
{
get
{
return Enumerable.Range(0, 5).Select(i =>
{
var row = new Dictionary<string, object>();
foreach (var column in columns)
{
row.Add(
column.Key,
column.Value == typeof(Guid) ? Guid.NewGuid()
: column.Value == typeof(DateTime) ? DateTime.Now.AddMonths(i)
: $"{column.Key}{i}"
);
}
return row;
});
}
}
public IDictionary<string, Type> columns { get; set; }
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
columns = new Dictionary<string, Type>()
{
{ "ID", typeof(Guid) },
{ "Date", typeof(DateTime) },
};
var timer = new System.Timers.Timer(1000);
timer.Elapsed += (s, e) =>
{
InvokeAsync(grid.Reload);
};
timer.Start();
}
private IEnumerable<Dictionary<string, object>> GetData()
{
var data = Enumerable.Range(0, 5).Select(i =>
{
var row = new Dictionary<string, object>();
foreach (var column in columns)
{
row.Add(
column.Key,
column.Value == typeof(Guid) ? Guid.NewGuid()
: column.Value == typeof(DateTime) ? DateTime.Now.AddMonths(i)
: $"{column.Key}{i}"
);
}
return row;
});
return data;
}
}
and getting this:
Is there a way to get the tooltip positioned in the correct position?
Btw. If I run the code at Blazor DataGrid Component - Real-time Data | Free UI Components by Radzen I get the following error when pressing "Run":
Regards
Søren