Insert dynamic tooltip for every Grid row

[Gaspropot]

Hello.

What I'm trying to do is, create a dynamic tooltip for each row of my grid, which will show additional information about each record(by additional information I mean properties of each object that I do not show in my grid cells). So far, following what you have showed to some other users, I have managed to do what I need except for making the tooltip content dynamic depending on which grid column I hover over. I will show you my code, please let me know how to show object properties inside the tooltip.

                                    <SfTooltip Target=".e-row" Position="Syncfusion.Blazor.Popups.Position.TopCenter">
                                        <TooltipTemplates>
                                            <Content>
                                                <div class="info">
                                                    <p>DummyTooltipText</p>
                                                </div>
                                            </Content>
                                        </TooltipTemplates>
                                        <SfGrid DataSource="@LiveAgents" AllowTextWrap="true">
                                            <GridTextWrapSettings WrapMode="WrapMode.Header"></GridTextWrapSettings>
                                            <GridEvents QueryCellInfo="CustomizeCell" TValue="TestLiveAgent"></GridEvents>
                                            <GridGroupSettings ShowGroupedColumn="true"></GridGroupSettings>
                                            <GridColumns>
                                                <GridColumn Visible="false" Field="@nameof(TestLiveAgent.Id)" IsPrimaryKey="true" TextAlign="TextAlign.Center"></GridColumn>
                                                <GridColumn On Field="@nameof(TestLiveAgent.Status)" TextAlign="TextAlign.Center" Width="15"></GridColumn>
                                                <GridColumn ShowColumnMenu="false" Field="@nameof(TestLiveAgent.Name)" TextAlign="TextAlign.Center" Width="20">
                                                    <Template>
                                                        @{ TestLiveAgent test = (context as TestLiveAgent);}
                                                        <div id="agentname">@test.Name</div>
                                                    </Template>
                                                </GridColumn>
                                                <GridColumn ShowColumnMenu="false" Field="@nameof(TestLiveAgent.TalkingTo)" HeaderText="Talking to" TextAlign="TextAlign.Center" Width="20"></GridColumn>
                                                <GridColumn ShowColumnMenu="false" Field="@nameof(TestLiveAgent.CallDuration)" HeaderText="Call Duration" TextAlign="TextAlign.Center" Width="15"></GridColumn>
                                            </GridColumns>
                                        </SfGrid>
                                    </SfTooltip>

[Vignesh Natarajan]

Hi Georgios,  

 

Greetings from Syncfusion support.  

 

Query: “I have managed to do what I need except for making the tooltip content dynamic depending on which grid column I hover over” 

 

We have analyzed your query and we have achieved your requirement to display the row details in the tooltip dynamically by binding the onmouseover Blazor native event to Grid component. In that event we have sent a client x and Client y value to JavaScript side using IJSRuntime to find the row index. Based on the row Index, we have displayed corresponding value in tooltip using property binding.  

 

Refer the below code example. 

 

<SfTooltip Target=".e-row" Position="Syncfusion.Blazor.Popups.Position.TopCenter"> 

    <TooltipTemplates> 

        <Content> 

            <div class="info"> 

                <p>Status: @Value.Status,Name: @Value.Name, TalkingTo: @Value.TalkingTo, CallDuration: @Value.CallDuration</p> 

            </div> 

        </Content> 

    </TooltipTemplates> 

    <SfGrid DataSource="@LiveAgents" @onmouseover="onover" AllowTextWrap="true"> 

. . . . .  

    </SfGrid> 

</SfTooltip> 

  

@code{ 

    public List<TestLiveAgent> LiveAgents { get; set; } 

    public TestLiveAgent Value { get; set; } = new TestLiveAgent();  

    [JSInvokable("ChangePageGrid")] 

    public async Task ChangePageGrid(string rowIndex) 

    { 

        Value = LiveAgents[Convert.ToInt32(rowIndex)]; // update the tooltip content 

    }  

    public void onover(MouseEventArgs Args) 

    { 

        var dotNetReference = DotNetObjectReference.Create(this); 

        Runtime.InvokeVoidAsync("getelement", Args.ClientX, Args.ClientY, dotNetReference); // send the target location and dotnetreference 

    } 

 

[javascript.js] 

function getelement(x, y, dotnetref) {    //find the rowindex    var rowIndex = document.elementFromPoint(x, y).closest("tr")?.getAttribute("aria-rowindex");    //call C# method along with rowindex     dotnetref.invokeMethodAsync('ChangePageGrid', rowIndex); // call C# method from javascript function}

 

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

 

Sample: https://www.syncfusion.com/downloads/support/forum/160308/ze/DataGrid394344048  

 

Please get back to us if you have further queries.  

 

Regards,
Vignesh Natarajan 

[Gaspropot]

This was extremely helpful, thank you.

[Vignesh Natarajan]

Hi Georgios,  

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