From a0433ab876803a5037cc7f160574f675bafdc5c5 Mon Sep 17 00:00:00 2001
From: Hristian Stefanov <72554148+xristianstefanov@users.noreply.github.com>
Date: Thu, 23 Dec 2021 16:47:37 +0200
Subject: [PATCH] kb(grid,tooltip):tooltip in grid example changes (#141)
* kb(grid,tooltip):tooltip in grid example changes
* kb(tooltip):fixes as per comment
* Update tooltip/in-grid/Pages/Index.razor
Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
* Update tooltip/in-grid/Pages/Index.razor
Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
---
tooltip/in-grid/Pages/Index.razor | 17 +++---
tooltip/in-grid/Pages/TooltipPerCell.razor | 53 +++++++++++++++++++
tooltip/in-grid/Shared/NavMenu.razor | 5 ++
tooltip/in-grid/TooltipForGridElements.csproj | 2 +-
tooltip/in-grid/readme.md | 10 +++-
5 files changed, 77 insertions(+), 10 deletions(-)
create mode 100644 tooltip/in-grid/Pages/TooltipPerCell.razor
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.
+
+
+
+
+
+
+
+ @{
+ BasicEmployee employee = context as BasicEmployee;
+ @employee.Name
+
+
+
+
+
+ }
+
+
+
+
+
+
+
+
+@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
+
+
+ Tooltip Per Cell
+
+
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