grid-show-tooltip-on-column-header.md

title	description	type	page_title	slug	tags	res_type	ticketid
Adding Tooltips to Grid Column Headers with Ellipsis in Blazor	Learn how to display tooltips on Blazor Grid column headers when the text is truncated due to column resizing.	how-to	How to Show Tooltips on Truncated Grid Column Headers in Blazor	grid-kb-show-tooltip-on-column-header	grid, blazor, tooltip, column header, template, ellipsis	kb	1677858

Description

When the column headers in a Telerik Grid for Blazor are too long for the column width, they may be truncated with an ellipsis. In such cases, adding tooltips to the headers can help display the full text.

This knowledge-base article also answers the following questions:

• How to add Tooltip to Grid column header in Blazor?
• How to show Tooltip only for truncated column headers in a Blazor Grid?
• How to customize Grid column headers in Blazor?

Solution

To display Tooltip for Grid column headers that are truncated, follow the steps below:

1. Use the Column Header Template to customize the header content. Wrap the header content in a <span> HTML element.
2. Monitor the column width changes by using the Grid OnStateChanged event and the ColumnState property of the GridState.
3. Use a TelerikTooltip component to display tooltip for each column header.
4. Apply a custom CSS class to the column header content when the width of the column is insufficient to display its full content.

caption Show TelerikTooltip on the Grid column header

<p><strong>Resize and shrink some columns to observe the expected result</strong></p>.

<TelerikGrid @ref="@GridRef"
             Data="@MyData"
             Reorderable="true"
             Resizable="true"
             OnStateChanged="@((GridStateEventArgs<SampleData> args) => HandleColumnWidthChange(args))"
             Width="510px">
    <GridColumns>
        <GridColumn Field="@nameof(SampleData.Id)" Width="130px">
            <HeaderTemplate>
                <span title="Unique Identifier"
                      class="@(ShowTooltip.GetValueOrDefault(nameof(SampleData.Id), false) ? "employee-header" : "")">
                    Unique Identifier
                </span>
            </HeaderTemplate>
        </GridColumn>

        <GridColumn Field="@(nameof(SampleData.Name))" Width="165px">
            <HeaderTemplate>
                <span title="Long Employee Name"
                      class="@(ShowTooltip.GetValueOrDefault(nameof(SampleData.Name), false) ? "employee-header" : "")">
                    Long Employee Name
                </span>
            </HeaderTemplate>
        </GridColumn>

        <GridColumn Field="@(nameof(SampleData.Team))" Width="210px">
            <HeaderTemplate>
                <span title="Extremely Long Team Name"
                      class="@(ShowTooltip.GetValueOrDefault(nameof(SampleData.Team), false) ? "employee-header" : "")">
                    Extremely Long Team Name
                </span>
            </HeaderTemplate>
        </GridColumn>
    </GridColumns>
</TelerikGrid>

<TelerikTooltip TargetSelector=".employee-header" Class="my-callout">
</TelerikTooltip>

<style>
    .my-callout .k-callout {
        left: 30px !important;
    }
</style>

@code {
    private TelerikGrid<SampleData>? GridRef { get; set; }

    private IEnumerable<SampleData> MyData = Enumerable.Range(1, 10).Select(x => new SampleData
        {
            Id = x,
            Name = $"Name {x}",
            Team = $"Team {x % 3 + 1}"
        });

    // Define minimum width requirements for tooltips
    private static readonly Dictionary<string, double> MinColumnWidths = new()
    {
        { nameof(SampleData.Id), 125 },
        { nameof(SampleData.Name), 160 },
        { nameof(SampleData.Team), 205 }
    };

    // Store whether a tooltip should be shown for each column
    private Dictionary<string, bool> ShowTooltip = new();

    private async Task HandleColumnWidthChange(GridStateEventArgs<SampleData> args)
    {
        foreach (var column in args.GridState.ColumnStates)
        {
            string columnField = column.Field;
            if (MinColumnWidths.TryGetValue(columnField, out double minWidth))
            {
                double currentWidth = double.Parse(column.Width.Replace("px", ""));
                ShowTooltip[columnField] = currentWidth < minWidth;
            }
        }

        await GridRef!.SetStateAsync(args.GridState);
    }

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Team { get; set; } = string.Empty;
    }
}

The additional CSS is used to adjust the position of the tooltip callout. Modify this CSS based on your application's specific layout and design requirements.

See Also

• Grid Column Header Template Documentation
• Telerik Tooltip Overview
• Tooltip Template Feature
• Hide the Tooltip Callout or Change Its Position
• Show Tooltip in Grid