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

@@ -5,7 +5,7 @@
 
 @inject EmployeeService EmployeeService
 
-<p>This example shows how to load content on demant for tooltips that target elements inside a grid.</p>
+<p>This example shows how to load content on demand for a tooltip that targets elements inside a grid.</p>
 
 <TelerikGrid Data="@GridData" Height="400px"
              Pageable="true" Sortable="true" Groupable="true"
@@ -17,20 +17,21 @@
             <Template>
                 @{
                     BasicEmployee employee = context as BasicEmployee;
-                    <span data-employeeId="@employee.Id" id="@( "tooltip-target" + employee.Id)">@employee.Name</span>
-                    <TelerikTooltip TargetSelector="@( "#tooltip-target" +  employee.Id)"
-                                    Width="350px" Height="250px" Position="@TooltipPosition.Right">
-                        <Template Context="ttipContext">
-                            <EmployeeDetails TargetData="@ttipContext.DataAttributes" />
-                        </Template>
-                    </TelerikTooltip>
+                    <span data-employeeId="@employee.Id" class="tooltip-target">@employee.Name</span>
                 }
             </Template>
         </GridColumn>
         <GridColumn Field="@(nameof(BasicEmployee.Team))" Title="Team" />
     </GridColumns>
 </TelerikGrid>
 
+<TelerikTooltip TargetSelector=".tooltip-target"
+                Width="350px" Height="250px" Position="@TooltipPosition.Right">
+    <Template Context="ttipContext">
+        <EmployeeDetails TargetData="@ttipContext.DataAttributes" />
+    </Template>
+</TelerikTooltip>
+
 
 
 @code {

tooltip/in-grid/Pages/TooltipPerCell.razor

@@ -0,0 +1,53 @@
+@page "/tooltip-per-cell"
+
+@using TooltipForGridElements.Models
+@using TooltipForGridElements.Services
+
+@inject EmployeeService EmployeeService
+
+<p>
+    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.
+</p>
+<p>
+    The tooltip per cell approach offers a lot of extra flexibility if needed.
+</p>
+
+<TelerikGrid Data="@GridData" Height="400px"
+             Pageable="true" Sortable="true" Groupable="true"
+             FilterMode="Telerik.Blazor.GridFilterMode.FilterRow"
+             Resizable="true" Reorderable="true">
+    <GridColumns>
+        <GridColumn Field="@(nameof(BasicEmployee.Id))" Width="120px" />
+        <GridColumn Field="@(nameof(BasicEmployee.Name))" Title="Employee Name" Groupable="false">
+            <Template>
+                @{
+                    BasicEmployee employee = context as BasicEmployee;
+                    <span data-employeeId="@employee.Id" id="@( "tooltip-target" + employee.Id)">@employee.Name</span>
+                    <TelerikTooltip TargetSelector="@( "#tooltip-target" +  employee.Id)"
+                                    Width="350px" Height="250px" Position="@TooltipPosition.Right">
+                        <Template Context="ttipContext">
+                            <EmployeeDetails TargetData="@ttipContext.DataAttributes" />
+                        </Template>
+                    </TelerikTooltip>
+                }
+            </Template>
+        </GridColumn>
+        <GridColumn Field="@(nameof(BasicEmployee.Team))" Title="Team" />
+    </GridColumns>
+</TelerikGrid>
+
+
+
+@code {
+    public List<BasicEmployee> 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();
+    }
+}

tooltip/in-grid/Shared/NavMenu.razor

@@ -12,6 +12,11 @@
                 <span class="oi oi-home" aria-hidden="true"></span> Home
             </NavLink>
         </li>
+        <li class="nav-item px-3">
+            <NavLink class="nav-link" href="/tooltip-per-cell" Match="NavLinkMatch.All">
+                <span class="oi oi-list-rich" aria-hidden="true"></span> Tooltip Per Cell
+            </NavLink>
+        </li>
     </ul>
 </div>
 

tooltip/in-grid/TooltipForGridElements.csproj

@@ -6,7 +6,7 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Telerik.UI.for.Blazor" Version="2.9.0" />
+    <PackageReference Include="Telerik.UI.for.Blazor" Version="2.30.0" />
   </ItemGroup>
 
   <ItemGroup>

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