Tooltip in Grid

Environment

Product

Grid for Blazor, Tooltip for Blazor

Description

This KB article answers the following question:

• How to add Tooltips for elements in a Grid column?
• How to load Tooltip content on demand?

Solution

1. Use a Grid column (cell) template to wrap the cell content in a <span> or <div> with some CSS class.
2. Use the TargetSelector of the Telerik UI for Blazor Tooltip to attach it to the <span>.
3. Use the Tooltip's Template and its context to load Data on demand.

Using a Tooltip in the Grid

<p>This example shows how to load content on demand for a tooltip that targets elements inside a Grid. Hover over an employee name.</p>

<TelerikGrid Data="@GridData"
             Height="400px"
             Pageable="true">
    <GridColumns>
        <GridColumn Field="@(nameof(Employee.Id))" Width="120px" />
        <GridColumn Field="@(nameof(Employee.Name))" Title="Employee Name">
            <Template>
                @{
                    Employee employee = (Employee)context;
                    <span data-employeeId="@employee.Id" class="tooltip-target">@employee.Name</span>
                }
            </Template>
        </GridColumn>
        <GridColumn Field="@(nameof(Employee.Team))" Title="Team" />
    </GridColumns>
</TelerikGrid>

<TelerikTooltip TargetSelector=".tooltip-target"
                Width="250px" Height="250px"
                Position="@TooltipPosition.Right">
    <Template Context="ttipContext">
        <h6>Employee Details</h6>
        <hr />
        @{
            // in a real app, add defensive checks here or extract into a separate component
            // the key names is the data attribute, lowercase
            int EmployeeId = int.Parse(ttipContext.DataAttributes?["employeeid"] ?? string.Empty);

            var EmployeeDetailsData = GetEmplyeeDetails(EmployeeId);

            <div>
                <p><strong>Name</strong>: @EmployeeDetailsData.Name</p>
                <p><strong>Team</strong>: @EmployeeDetailsData.Team</p>
                <p><strong>Salary</strong>: $@EmployeeDetailsData.Salary</p>
                <p><strong>Hire date</strong>: @EmployeeDetailsData.HireDate.ToShortDateString()</p>
                <p><strong>Working on</strong>: @EmployeeDetailsData.ActiveProjects projects</p>
                <p><strong>Data loaded at</strong>: @DateTime.Now.ToString("HH:mm:ss")</p>
            </div>
        }
    </Template>
</TelerikTooltip>

@code {
    private List<Employee> GridData { get; set; } = new();

    // This shows that the Tooltip will work even if the Grid is bound after the Tooltip is initialized.
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            GridData = await GetEmployees();
            StateHasChanged();
        }
    }

    private async Task<List<Employee>> GetEmployees()
    {
        if (GridData == null || !GridData.Any())
        {
            GridData = Enumerable.Range(1, 90).Select(x => new Employee
            {
                Id = x,
                Name = "name " + x,
                Team = "team " + x % 5,
            }).ToList();
        }

        return await Task.FromResult(GridData);
    }

    private Employee GetEmplyeeDetails(int employeeId)
    {
        Random rnd = new Random();
        Employee employee = GridData.First(empl => empl.Id == employeeId);
        employee.Salary = rnd.Next(1000, 5000);
        employee.ActiveProjects = rnd.Next(2, 10);
        employee.HireDate = DateTime.Now.AddYears(-rnd.Next(1, 10)).AddMonths(-rnd.Next(0, 10)).AddDays(-rnd.Next(0, 10));

        return employee;
    }

    public class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Team { get; set; } = string.Empty;
        public DateTime HireDate { get; set; }
        public int ActiveProjects { get; set; }
        public decimal Salary { get; set; }
    }
}