我的 C# Blazor WebAssembly TelerikGrid 工具提示复制了我的所有行

问题描述 投票:0回答:1

我有一个网格,其中使用 DTO 和控制器填充了数据库中的数据,并且工具提示可以正常工作,但我的问题是网格中的每一行都有相同的工具提示,我不太清楚是什么去做。这是我的网格代码,我以为我进行渲染可以修复它,但事实并非如此。任何想法都将不胜感激。

<TelerikGrid class="NewPairsGrid" 
            Data="@Pairs" 
            AutoGenerateColumns="false"       
            RowHeight="15" 
            Height="1000px" 
            Pageable="true"
            PageSize="25"
            Sortable="true"
>
    <GridColumns>

        <GridColumn Field="PairCreatedTimeStamp" Title="Token Age" width="75px">
            <Template Context="dataItem">
                @if (dataItem is EthPairTradeInfoVDto ethPairTradeInfoVDto)
                {
                    var timestamp = CalculateElapsedTime(dataItem as EthPairTradeInfoVDto);
                    <span class="tooltip-target">@timestamp</span>
                    <TelerikTooltip TargetSelector=".tooltip-target" Width="auto" Height="auto" Position="@TooltipPosition.Right">
                    <Template Context="tooltipContext">
                        <span>
                            @RenderTooltipContent(ethPairTradeInfoVDto.PairCreatedTimeStamp)
                        </span>
                    </Template>
            </TelerikTooltip>                 
            </Template>
        </GridColumn>

RenderFragment RenderTooltipContent(DateTime? pairCreatedTimeStamp) => 
    builder =>
    {
        if (pairCreatedTimeStamp.HasValue)
        {
            builder.OpenElement(0, "span");
            builder.AddContent(1, $"Pair Timestamp: {pairCreatedTimeStamp.Value}");
            builder.CloseElement();
        }
    }; 
telerik tooltip blazor-webassembly telerik-grid
1个回答
0
投票

我有同样的问题,我发现我使用相同的 TargetSelector 和相同的类或 id,我使用唯一的 Id 或类(如 TrailerPlate 及其工作)进行更改

这是我的代码:

    <GridColumn Title="Info" Width="30px" TextAlign="@ColumnTextAlign.Center" HeaderClass="center-me">
    <Template >
        @{
            <TelerikButton Id="@((context as LoadingOrder).TractorPlate)" Icon="@FontIcon.InfoCircle" ThemeColor="primary">
            </TelerikButton>
            <TelerikTooltip TargetSelector="@($"#{((context as LoadingOrder).TractorPlate)}")" ShowOn="@TooltipShowEvent.Click" Position="TooltipPosition.Bottom" Context="TelerikTooltip">
                <Template >
                    @{
                        var dataAttributes = context as LoadingOrder;
                        <div>
                                <b>Transporteur:</b> @dataAttributes?.CarrierName<br/>
                                <b>Client:</b> @dataAttributes?.CustomerName
                        </div>
                    }
                </Template>
            </TelerikTooltip>
        }
    </Template>
</GridColumn>
© www.soinside.com 2019 - 2024. All rights reserved.