DataGrid column HeaderTooltip and CellTooltip

[Liero]

Hi,

it would be nice to have an easy way to set tooltip for 

1. column headers
   like this: https://www.ag-grid.com/javascript-grid-column-header/#header-tooltips
   <GridColumn Field="Name" HeaderText="Name" HeaderTooltip="First Name and Last Name" />
   
   
2. cells:
   <GridColumn Field="Name" @Tooltip="TooltipValueGetter" />
   

[Rahul Narayanasamy]

Hi Liero, 

Greetings from Syncfusion. 

Query: DataGrid column HeaderTooltip and CellTooltip 

We have validated your query and you want to show tooltip to Grid header and cells. You can achieve your requirement by using Column Template and HeaderTemplate feature. We have rendered tooltip in column template and header template to shown the values in tooltip. Find the below code snippets and sample for your reference. 

In the below example, we have shown the data in tooltip for FirstName column. 

 

<SfGrid DataSource="@Employees"> 

    <GridColumns> 

        <GridColumn Field=@nameof(EmployeeData.EmployeeID) HeaderText="Employee ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.FirstName) HeaderText="First Name" Width="130"> 

            <HeaderTemplate> 

                @{ 

                    var employee = (context as EmployeeData); 

                    <SfTooltip Target="#txt"> 

                        <TooltipTemplates> 

                            <Content> 

                                FirstName 

                            </Content> 

                        </TooltipTemplates> 

                        <span id="txt">FirstName</span> 

                    </SfTooltip> 

                } 

            </HeaderTemplate> 

            <Template> 

                @{ 

                    var employee = (context as EmployeeData); 

                    <SfTooltip Target="#txt"> 

                        <TooltipTemplates> 

                            <Content> 

                                @employee.FirstName 

                            </Content> 

                        </TooltipTemplates> 

                        <span id="txt">@employee.FirstName</span> 

                    </SfTooltip> 

                } 

            </Template> 

        </GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.HireDate) HeaderText="Hire Date" Format="d" TextAlign="TextAlign.Right" Width="150"></GridColumn> 

    </GridColumns> 

</SfGrid> 

Sample: https://www.syncfusion.com/downloads/support/forum/158895/ze/BlazorApp1Toolti[788534269  

Reference: 

https://blazor.syncfusion.com/documentation/datagrid/how-to/display-custom-tool-tip-in-grid-cell/ 

Please let us know if you have any concerns. 

Regards, 

Rahul 

 

[Liero]

Hi Rahul,

thanks for reply.

As you can see yourself, there is no easy way right now, because the markup can became messy quickly.

It would be nice to have such property.

[Vignesh Natarajan]

Hi Liero,  

Thanks for the patience  

Query: “It would be nice to have such property” 

We have analyzed your query and we have considered your requirement “Need to display Tooltip in Grid content and Header without templates” as feature and added to our feature table. Thank you for requesting this feature and helping us define it.  

We are always trying to make our products better and feature requests like yours are a key part of our product growth efforts. At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. It will be implemented in any of our upcoming releases.  

 

You can also communicate with us regarding the open features any time using our Feature Report page.    

    

https://www.syncfusion.com/feedback/19363/  

Till then we suggest you to use the solution provided in previous update.  

Regards, 

Vignesh Natarajan 

 

[Dallas Kostna]

I attempted to use the template solution you posted but ran into a challenge. When using pagination, the tooltips don't update to reflect the content when a page is changed - the tooltips always show the content of the items from the first page. The data in the cells themselves is correct when the page is changed - just not the tooltips. Is there something I can do to address that?

[Vignesh Natarajan]

Hi Dallas,  

 

Thanks for contacting Syncfusion support.  

 

Query: “The data in the cells themselves is correct when the page is changed - just not the tooltips.” 

 

We have analyzed the reported query and we are able to reproduce the reported behavior at our end also. We suggest you to overcome the reported issue by using @key property to TooltipTemplate. Refer the below codw example.  

 

<GridColumn Field=@nameof(EmployeeData.FirstName) HeaderText="First Name" Width="130"> 

    <HeaderTemplate> 

        @{ 

            var employee = (context as EmployeeData); 

            <SfTooltip> 

                <TooltipTemplates> 

                    <Content> 

                        FirstName 

                    </Content> 

                </TooltipTemplates> 

                <span>FirstName</span> 

            </SfTooltip> 

        } 

    </HeaderTemplate> 

    <Template> 

        @{ 

            var employee = (context as EmployeeData); 

            <SfTooltip> 

                <TooltipTemplates @key="@employee.FirstName"> 

                    <Content> 

                        @employee.FirstName 

                    </Content> 

                </TooltipTemplates> 

                <span>@employee.FirstName</span> 

            </SfTooltip> 

        } 

    </Template> 

</GridColumn> 

 

 

For your convenience we have prepared a sample which can be downloaded from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/158895/ze/F158895_-_tooltip1284090834  

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan 

[Dallas Kostna]

Works great - thanks!

[Vignesh Natarajan]

Hi Dallas, 

Thanks for the update.  

We are glad to hear that you have resolved your query using our solution.  

Kindly get back to us if you have further queries.  

Regards, 

Vignesh Natarajan  

[CharlesG]

Note that you can use the title html attribute as well:

<HeaderTemplate>
    <span title="Time Elapsed">Elapsed</span>
</HeaderTemplate>

[Prathap Senthil]

Hi CharlesG,

Thanks for the update

Yes, you can use the title HTML attribute within the HeaderTemplate to display a tooltip for your column header.

Regards,
Prathap Senthil

[Sandip Mane]

Hello,

Can you please tell me how to add a tooltip for below GridColumn for a Grid with TValue="ExpandoObject".

<SfGrid TValue="ExpandoObject" ID="Grid" @ref="Grid" Height="100%" Width="100%" >

        <SfDataManager AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="Adaptors.CustomAdaptor"></SfDataManager>

<GridColumn Field="Type" HeaderText="Type" TextAlign="TextAlign.Center" Width="70" AllowEditing="false" CustomAttributes="@(new Dictionary<string, object> { { "style", "white-space: nowrap;" } })">

                                       

[Sanjay Kumar Suresh]

Hi Sandip Mane,

To add tooltips to columns in a Blazor DataGrid when using TValue="ExpandoObject", you can utilize the column template feature in combination with the SfTooltip component. Since you're working with ExpandoObject, the column values need to be accessed dynamically using dictionary-style access.

Code Snippet:

<GridColumn Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120" />

<GridColumn Field="CustomerID" HeaderText="Customer ID" Width="120">

     <Template>

         @{

             var data = context as IDictionary<string, object>;

             var value = data["CustomerID"]?.ToString();

             <SfTooltip Position="Position.BottomLeft">

                 <ContentTemplate>

                     @value

                 </ContentTemplate>

                 <ChildContent>

                     <span>@value</span>

                 </ChildContent>

             </SfTooltip>

         }

     </Template>

</GridColumn>

We have attached the concern sample please check and get back to us if you have any questions.

Regards,

Sanjay Kumar Suresh

Attachment: Support_69730971.zip

[Sandip Mane]

Thanks

[Sanjay Kumar Suresh]

Hi Sandip Mane,

We are happy to hear that the provided solution was helpful. Please get back to us if you need any other assistance.

Regards,

Sanjay Kumar Suresh