|
| 1 | +--- |
| 2 | +title: Adding Tooltips to Grid Column Headers with Ellipsis in Blazor |
| 3 | +description: Learn how to display tooltips on Blazor Grid column headers when the text is truncated due to column resizing. |
| 4 | +type: how-to |
| 5 | +page_title: How to Show Tooltips on Truncated Grid Column Headers in Blazor |
| 6 | +slug: grid-kb-show-tooltip-on-column-header |
| 7 | +tags: grid, blazor, tooltip, column header, template, ellipsis |
| 8 | +res_type: kb |
| 9 | +ticketid: 1677858 |
| 10 | +--- |
| 11 | + |
| 12 | +## Description |
| 13 | + |
| 14 | +When the column headers in a [Telerik Grid for Blazor](slug:grid-overview) 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. |
| 15 | + |
| 16 | +This knowledge-base article also answers the following questions: |
| 17 | + |
| 18 | +- How to add Tooltip to Grid column header in Blazor? |
| 19 | +- How to show Tooltip only for truncated column headers in a Blazor Grid? |
| 20 | +- How to customize Grid column headers in Blazor? |
| 21 | + |
| 22 | +## Solution |
| 23 | + |
| 24 | +To display Tooltip for Grid column headers that are truncated, follow the steps below: |
| 25 | + |
| 26 | +1. Use the [Column Header Template](slug:components/grid/templates/column-header#column-header-template) to customize the header content. Wrap the header content in a `<span>` HTML element. |
| 27 | +2. [Monitor the column width changes](slug:grid-kb-column-state) by using the [Grid `OnStateChanged` event](slug:components/grid/state#onstatechanged) and the [`ColumnState`](slug:components/grid/state#information-in-the-grid-state) property of the `GridState`. |
| 28 | +3. Use a [TelerikTooltip](slug:components/tooltip/overview) component to display tooltip for each column header. |
| 29 | +4. Apply a custom CSS class to the column header content when the width of the column is insufficient to display its full content. |
| 30 | + |
| 31 | +>caption Show TelerikTooltip on the Grid column header |
| 32 | +
|
| 33 | +````RAZOR |
| 34 | +<p><strong>Resize and shrink some columns to observe the expected result</strong></p>. |
| 35 | +
|
| 36 | +<TelerikGrid @ref="@GridRef" |
| 37 | + Data="@MyData" |
| 38 | + Reorderable="true" |
| 39 | + Resizable="true" |
| 40 | + OnStateChanged="@((GridStateEventArgs<SampleData> args) => HandleColumnWidthChange(args))" |
| 41 | + Width="510px"> |
| 42 | + <GridColumns> |
| 43 | + <GridColumn Field="@nameof(SampleData.Id)" Width="130px"> |
| 44 | + <HeaderTemplate> |
| 45 | + <span title="Unique Identifier" |
| 46 | + class="@(ShowTooltip.GetValueOrDefault(nameof(SampleData.Id), false) ? "employee-header" : "")"> |
| 47 | + Unique Identifier |
| 48 | + </span> |
| 49 | + </HeaderTemplate> |
| 50 | + </GridColumn> |
| 51 | +
|
| 52 | + <GridColumn Field="@(nameof(SampleData.Name))" Width="165px"> |
| 53 | + <HeaderTemplate> |
| 54 | + <span title="Long Employee Name" |
| 55 | + class="@(ShowTooltip.GetValueOrDefault(nameof(SampleData.Name), false) ? "employee-header" : "")"> |
| 56 | + Long Employee Name |
| 57 | + </span> |
| 58 | + </HeaderTemplate> |
| 59 | + </GridColumn> |
| 60 | +
|
| 61 | + <GridColumn Field="@(nameof(SampleData.Team))" Width="210px"> |
| 62 | + <HeaderTemplate> |
| 63 | + <span title="Extremely Long Team Name" |
| 64 | + class="@(ShowTooltip.GetValueOrDefault(nameof(SampleData.Team), false) ? "employee-header" : "")"> |
| 65 | + Extremely Long Team Name |
| 66 | + </span> |
| 67 | + </HeaderTemplate> |
| 68 | + </GridColumn> |
| 69 | + </GridColumns> |
| 70 | +</TelerikGrid> |
| 71 | +
|
| 72 | +<TelerikTooltip TargetSelector=".employee-header" Class="my-callout"> |
| 73 | +</TelerikTooltip> |
| 74 | +
|
| 75 | +<style> |
| 76 | + .my-callout .k-callout { |
| 77 | + left: 30px !important; |
| 78 | + } |
| 79 | +</style> |
| 80 | +
|
| 81 | +@code { |
| 82 | + private TelerikGrid<SampleData>? GridRef { get; set; } |
| 83 | +
|
| 84 | + private IEnumerable<SampleData> MyData = Enumerable.Range(1, 10).Select(x => new SampleData |
| 85 | + { |
| 86 | + Id = x, |
| 87 | + Name = $"Name {x}", |
| 88 | + Team = $"Team {x % 3 + 1}" |
| 89 | + }); |
| 90 | +
|
| 91 | + // Define minimum width requirements for tooltips |
| 92 | + private static readonly Dictionary<string, double> MinColumnWidths = new() |
| 93 | + { |
| 94 | + { nameof(SampleData.Id), 125 }, |
| 95 | + { nameof(SampleData.Name), 160 }, |
| 96 | + { nameof(SampleData.Team), 205 } |
| 97 | + }; |
| 98 | +
|
| 99 | + // Store whether a tooltip should be shown for each column |
| 100 | + private Dictionary<string, bool> ShowTooltip = new(); |
| 101 | +
|
| 102 | + private async Task HandleColumnWidthChange(GridStateEventArgs<SampleData> args) |
| 103 | + { |
| 104 | + foreach (var column in args.GridState.ColumnStates) |
| 105 | + { |
| 106 | + string columnField = column.Field; |
| 107 | + if (MinColumnWidths.TryGetValue(columnField, out double minWidth)) |
| 108 | + { |
| 109 | + double currentWidth = double.Parse(column.Width.Replace("px", "")); |
| 110 | + ShowTooltip[columnField] = currentWidth < minWidth; |
| 111 | + } |
| 112 | + } |
| 113 | +
|
| 114 | + await GridRef!.SetStateAsync(args.GridState); |
| 115 | + } |
| 116 | +
|
| 117 | + public class SampleData |
| 118 | + { |
| 119 | + public int Id { get; set; } |
| 120 | + public string Name { get; set; } = string.Empty; |
| 121 | + public string Team { get; set; } = string.Empty; |
| 122 | + } |
| 123 | +} |
| 124 | +```` |
| 125 | + |
| 126 | +> 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. |
| 127 | +
|
| 128 | +## See Also |
| 129 | +- [Grid Column Header Template Documentation](slug:components/grid/templates/column-header#column-header-template) |
| 130 | +- [Telerik Tooltip Overview](slug:components/tooltip/overview) |
| 131 | +- [Tooltip Template Feature](slug:components/tooltip/template) |
| 132 | +- [Hide the Tooltip Callout or Change Its Position](slug:tooltip-callout-position) |
| 133 | +- [Show Tooltip in Grid](slug:tooltip-in-grid) |
0 commit comments