diff --git a/tooltip/in-grid/Pages/Index.razor b/tooltip/in-grid/Pages/Index.razor index a0cb5eba..b3241d6a 100644 --- a/tooltip/in-grid/Pages/Index.razor +++ b/tooltip/in-grid/Pages/Index.razor @@ -5,7 +5,7 @@ @inject EmployeeService EmployeeService -

This example shows how to load content on demant for tooltips that target elements inside a grid.

+

This example shows how to load content on demand for a tooltip that targets elements inside a grid.

@{ BasicEmployee employee = context as BasicEmployee; - @employee.Name - - - + @employee.Name } @@ -31,6 +25,13 @@ + + + + @code { diff --git a/tooltip/in-grid/Pages/TooltipPerCell.razor b/tooltip/in-grid/Pages/TooltipPerCell.razor new file mode 100644 index 00000000..c839c33f --- /dev/null +++ b/tooltip/in-grid/Pages/TooltipPerCell.razor @@ -0,0 +1,53 @@ +@page "/tooltip-per-cell" + +@using TooltipForGridElements.Models +@using TooltipForGridElements.Services + +@inject EmployeeService EmployeeService + +

+ This example shows how to load content on demand for tooltips that target elements inside a grid. + The difference from the first page is that the example here uses an instance for every cell. +

+

+ The tooltip per cell approach offers a lot of extra flexibility if needed. +

+ + + + + + + + + + + + + +@code { + public List GridData { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + GridData = await EmployeeService.GetEmployees(); + // we update the data outside of the standard cycle, so we need this call + // if we did it in OnInitializedAsync we wouldn't. We do it here to load it only once + // and avoid loading during pre-rendering, just as an example + StateHasChanged(); + } +} diff --git a/tooltip/in-grid/Shared/NavMenu.razor b/tooltip/in-grid/Shared/NavMenu.razor index af0463c9..fed66569 100644 --- a/tooltip/in-grid/Shared/NavMenu.razor +++ b/tooltip/in-grid/Shared/NavMenu.razor @@ -12,6 +12,11 @@ Home + diff --git a/tooltip/in-grid/TooltipForGridElements.csproj b/tooltip/in-grid/TooltipForGridElements.csproj index 899cb7d4..e37a3e25 100644 --- a/tooltip/in-grid/TooltipForGridElements.csproj +++ b/tooltip/in-grid/TooltipForGridElements.csproj @@ -6,7 +6,7 @@ - + diff --git a/tooltip/in-grid/readme.md b/tooltip/in-grid/readme.md index 39fdff79..2d5a1913 100644 --- a/tooltip/in-grid/readme.md +++ b/tooltip/in-grid/readme.md @@ -1,6 +1,14 @@ # Tooltips for grid columns with load-on-demand -This example shows how you can add tooltips for elements in a grid column, and have those tooltips fetch their content on demand when they show up. +This sample project contains two examples of the `Tooltip` usage in `Grid`. You can navigate through them from the nav menu on the left side. + +The result from both examples is the same, but there is a difference in the implementation. + +* The first example uses one instance of the `Tooltip` for all cells. With this approach, the performance is improved. + +* The second example uses a separate instance of the `Tooltip` for every cell. This approach gives a lot of extra flexibility if needed. + +Both examples show how you can add tooltips for elements in a grid column, and have those tooltips fetch their content on demand when they show up. Key points: * one model describes the grid rows, another the data shown in the tooltips