Questions on UI for Blazor Forum

6 questions

0 answers

9 views

I have a grid that is populated with data from my Database using a DTO and a controller and I have the tooltip working but my issue is that it is the same tooltip for each row in my grid and I can't quite figure out what to do. Here is my grid code, I thought me doing the render would fix it but it doesnt. Any ideas at all would be appreciated

<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();
        }
    };

Grid

Tooltip

asked on 15 Apr 2024

0 answers

18 views

TelerikGrid not Pageable

I'm having trouble with my grid where I am unable to page through my results. I have 200 items in the grid and when I click on any of the buttons on the pager nothing happens. Here is my code

Bonus points if someone can make me understand why my Tooltip isnt working either lol.

<TelerikGrid class="NewPairsGrid" 
            Data="@Pairs" 
            AutoGenerateColumns="false"       
            RowHeight="15" 
            Height="1000px" 
            Pageable="true"
            PageSize="25"
            
><GridColumns><GridColumn Title="Pair Info" width="200px"><Template Context="dataItem"><div>
                @DisplayTokenImage(dataItem as EthPairTradeInfoVDto)
                @($"{(dataItem as EthPairTradeInfoVDto).TokenSymbol} / {(dataItem as EthPairTradeInfoVDto).LpTokenSymbol} - {(dataItem as EthPairTradeInfoVDto).TokenName}")
            </div></Template></GridColumn><GridColumn Title="Total Price ETH" width="150px"><Template Context="dataItem"><div>
                @FormatPrice(dataItem as EthPairTradeInfoVDto)
            </div><div>
                @if (dataItem is EthPairTradeInfoVDto ethPairTradeInfoVDto)
                {
                    var UsdPrice = ethPairTradeInfoVDto.CurrentPriceUsd.GetValueOrDefault();
                    @if (UsdPrice > 0)
                    {
                        @($"${UsdPrice} USD")
                        ;
                    }
                    else
                    {
                        @("Looking for USD Price.../")
                        ;
                    }
                }
            </div></Template></GridColumn><GridColumn Field="PairCreatedTimeStamp" Title="Token Age" width="75px"><Template Context="dataItem">
            @if (IsLessThanHour(dataItem as EthPairTradeInfoVDto))
            {
                <i class="fas fa-leaf"></i>
            }
            @if (dataItem is EthPairTradeInfoVDto ethPairTradeInfoVDto)
            {
                var timestamp = CalculateElapsedTime(dataItem as EthPairTradeInfoVDto);
                <span class="tooltip-target">@timestamp</span><TelerikTooltip TargetSelector=".tooltip-target" Width="250px" Height="150px" Position="@TooltipPosition.Right"><Template Context="ttipContext"><span>
                            Timestamp: @(ttipContext.DataAttributes)
                        </span></Template></TelerikTooltip>
            }                     
            @* @CalculateElapsedTime(dataItem as EthPairTradeInfoVDto) *@
        </Template></GridColumn></GridColumns></TelerikGrid>

Grid

Pager

Tooltip

asked on 11 Apr 2024

1 answer

119 views

Conditional Tooltip based on value

Hello,

I want to set the value of a tool tip based on a value of an item in my grid. I have tried this, but I get an error:

This is above all HTML taken from an example
<TelerikTooltip TargetSelector=".tooltip-target">
</TelerikTooltip>


        <GridColumn Editable=false Locked=true Visible="@isIDVisible" Field=@nameof(ProductDto.ProductId) Title="ID" Width="150px">
           <Template>
               @{
                     var item = (ProductDto)context; 
                }
               <TelerikButton ThemeColor="success" OnClick="() => SetAmtToAnotherCol(item)">Test</TelerikButton>
               <br />
            <TelerikButton FillMode="link" ThemeColor="info" Class="tooltip-target" 
                           Title="(@item.UnitsInStock < 0) ? 'neg' : 'pos'"
                           OnClick="() => SetAmtToAnotherCol(item)">@item.UnitsInStock</TelerikButton>
           
           </Template>
        </GridColumn>

I receive this error:

RZ9986

Component attributes do not support complex content (mixed C# and markup). Attribute: 'Title', text: '(item.UnitsInStock < 0) ? 'neg' : 'pos''

If I simply do this, it works:

Title=@item.UnitsInStock.ToString()

Is there a way for me to set a string based on a value?

Button

Grid

Tooltip

answered on 24 Apr 2023

1 answer

522 views

Access to Blazor components' source code

I recall being told I would have access to source code once I buy a licence.

Now that I have a licence, how do I get access to the source so I can do a local build?

answered on 30 Dec 2022

1 answer

373 views

Button Tooltip (title)?

I'm sure I'm just being stupid.. but.. I can't figure out how to add a title/tooltip to a button.... a <GridCommandButton> to be specific.

Button

Grid

Tooltip

answered on 22 Jun 2021

1 answer

140 views

Telerik Grid Expand Button Tooltip?

Hi,

Is there a tooltip option to add for the expend plus button on the left of a telerik grid row. Several of my clients have wondered if I could do this? Is there a function already in the Telerik Blazor Grid component? If not, are there any examples of someone attempting this on github? My clients have employees which they believe this option/concept would be very helpful.

Grid

Tooltip