This is a migrated thread and some comments may be shown as answers.

Tooltip on the grid header

6 Answers 1540 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Peter
Top achievements
Rank 2
Iron
Veteran
Iron
Peter asked on 05 Feb 2021, 11:49 AM

Hi,

how can I show a Tooltip on the grid headers to replace short column title with a long description?

In Kendo UI I use this Javascript code:

grid.thead.kendoTooltip({
    filter: "th",
    content: function (e: any) {
        var text = e.target.text().trim();
        switch (text) {
            case "Länge":
                return "Zuglänge";
            case "Kateg.":
                return "Zugkategorie";
            case "Dauer":
                return "Expositionsdauer T<sub>TEL</sub>";
            case "Geschw.":
                return "Geschwindigkeit";
            case "LAmax":
            case "LAFmax":
                return "Maximalpegel";
            case "LAeq":
            case "TEL":
            case "Vorbeifahrtpegel":
                return "Vorbeifahrtexpositionspegel";
            default:
                return text;
        }
    }
});

Best regards,

Peter

 

6 Answers, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 05 Feb 2021, 01:51 PM

Hi Peter,

You can use the column header template to add a  node that has the title attribute (and style as desired, such as bold) and then you can point the tooltip to that element - it uses css selectors. Then, in the tooltip template you can define the text based on the metadata you get for the target (you can see examples in the Tooltip Template article).

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Accepted
Peter
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 06 Feb 2021, 10:19 AM

Hi Marin,

thank you. The column header template is required:

<GridColumn Field="ImageId">
<HeaderTemplate>
    <div title="The Id in table image">Id</div>
</HeaderTemplate>
</GridColumn>

Then a small Tooltip is shown on mouse hover:

https://pasteboard.co/JN5ejKO.png

Regards,
Peter

 

 

 

0
Accepted
Peter
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 06 Feb 2021, 10:23 AM

with TelerikTooltip it looks better and can customized:

<TelerikTooltip TargetSelector=".k-column-title div">
    <Template>
        @context.Title
    </Template>
</TelerikTooltip>
<TelerikGrid Data=@GridData
    <GridColumns>
        <GridColumn Field="ImageId">
        <HeaderTemplate>
            <div title="The Id in table image">Id</div>
        </HeaderTemplate>
        </GridColumn>

https://pasteboard.co/JN5gPCe.png

 

0
Marin Bratanov
Telerik team
answered on 06 Feb 2021, 11:16 AM

Indeed, Peter, that's the way to do this. I've marked your posts as answer to this thread too.

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Peter
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 07 Feb 2021, 10:08 AM

Hi Marin,

For a model with many fields I inherit GridColumn:

GridColTooltip.razor

@inherits GridColumn
 
@code{
    [Parameter]
    override public string Title { get; set; }
    [Parameter]
    public string Tooltip { get; set; }
 
    protected override void OnParametersSet()
    {
        base.OnParametersSet();
        var title = Title ?? base.Field; // if empty use fieldname 
        var tooltip = Tooltip ?? title; // if empty use Title as Tooltip
        base.HeaderTemplate =@<div title="@tooltip">@title</div>;
    }
}

And now I can use:

<GridColumns>
    <GridColTooltip Field=@nameof(ViewModel.ImageId) Width="20px" Title="Id" Tooltip="The Id in table image" />
    <GridColTooltip Field=@nameof(ViewModel.ImageNumber) Width="20px" />

The width 20px is enough for the numbers (<1000) but to short for the Header Title. But now I get the tooltip to show the full text.

It is safe to inherit a Telerik component? Events from the base component (GridColumn) should be avaliable in the derived component (GridColTooltip).

Best regards,

Peter

 

 

 

 

0
Marin Bratanov
Telerik team
answered on 07 Feb 2021, 03:26 PM

Hello Peter,

Inheriting our components is not something we support because it can lead to various behavior issues depending on what is done in the inheriting class and we can't influence this. Ultimately, razor components boil down to a C# class, so inheritance is as safe as any other inheritance in C# - as long as you don't break or override anything the base class uses things should work.

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Eric
Top achievements
Rank 1
Iron
Iron
Iron
commented on 08 Sep 2022, 08:29 AM | edited

Hi

 

Can you supply a small demo showing tooltip on eacht grid column?

 

Eric

Nadezhda Tacheva
Telerik team
commented on 13 Sep 2022, 06:25 AM

Hi Eric,

You may try the approach that Peter proposed. The solution suggests using ".k-column-title div" for the target selector of the Tooltip. You may as well add your custom class to the column header and use that as a selector. HeaderClass feature of the Grid is available as of UI for Blazor 3.4.

Here is a basic sample demonstrating the solution: https://blazorrepl.telerik.com/ccYNlxuA22DnqJov13.

I hope you will find it useful to move forward with your application.

Tags
Grid
Asked by
Peter
Top achievements
Rank 2
Iron
Veteran
Iron
Answers by
Marin Bratanov
Telerik team
Peter
Top achievements
Rank 2
Iron
Veteran
Iron
Share this question
or