or
0 answers
6 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();
}
}; 
0 answers
10 views
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>
1 answer
53 views
So we are building a component comprised of a high number of child components (think of a page with lots of controls on it). Ideally I want to use the TelerikTooltip for every child control component to display a tooltip on hover. However when we get above 140 child components the initial load performance of the ui gets significantly slower.
I am testing with a baseline of 500 child components and using the TelerikTooltip delays the render by about 13 seconds when compared to my own attempts at a tooltip (or not using it at all).
Are there any known performance tricks for the TelerikTooltip or anything in the pipeline for performance improvements with the TelerikTooltip?
Code snippet below where ComponentVM.ControlVMs has 500 objects:
foreach (IControlVM nextControl in ComponentVM.ControlVMs)
{
ControlName = nextControl.FormControlVM.FormControl.GetType().Name;
<TelerikTooltip TargetSelector=".tooltip-target" Class="menu-tooltip" />
<div style="position:absolute;
z-index:@nextControl.FormControlVM.ZIndex;
border-radius:2px; border-width:2px; border-color:red;
width:@string.Format("{0}cm", nextControl.FormControlVM.Width);
height:@string.Format("{0}cm", nextControl.FormControlVM.Height);
left:@string.Format("{0}cm", nextControl.FormControlVM.CanvasLeft);
top:@string.Format("{0}cm", nextControl.FormControlVM.CanvasTop);
overflow:hidden;">
@if (ControlRazors.ContainsKey(ControlName))
{
Dictionary<string, object> controlParams = new Dictionary<string, object>()
{
{nameof(ComponentVM), nextControl}
};
<DynamicComponent Type="ControlRazors[ControlName]" Parameters="controlParams" />
}
</div>
}
Georgi
Telerik team
answered
on
18 Oct 2023
0 answers
58 views
I am trying to create something I've seen a lot on other websites. I want to create a tooltip that shows "Copy to clipboard" when I hover over a <span> element, but when I click on the <span> I want the text to change to "Copied!"
This is what I am doing now
<TelerikTooltip TargetSelector="#propvalue>span[title]" Position="@TooltipPosition.Top" ShowOn="@TooltipShowEvent.Hover" @ref="@tooltipHover">
<Template>
@{
<div>
@copyToolTip
</div>
}
</Template>
</TelerikTooltip><span id="myCoolSpan"
style="cursor:pointer;"
onclick="@(()=>_copyButtonHandler(value as string))"
title="this is the title">
Text of my span
</span> private async Task _copyButtonHandler(string value)
{
copyToolTip = "Copied!";
await _clipboardService.WriteTextAsync(value);
}
1 answer
54 views
Hello. I would like to show a tooltip on a DropDownButtonItem, I tried but without success. This is the Repl link. May you kindly help me? Thank you.
Hristian Stefanov
Telerik team
answered
on
05 Sep 2023
2 answers
116 views
Apologies if duplicate. It seems that when Tooltip's ShowEvent is set to Click, you can click anywhere in the browser window except on the element that triggers the tooltip to open. I think it would be better behavior to have the triggering element toggle the tooltip instead of only opening. Is there perhaps a workwround?
1 answer
203 views
I'm using the Blazor Tooltip inside Scheduler ItemTemplates. The content of my Tooltips is defined inside a Template.
Intermittently, the tooltip is flickering very fast as the mouse hovers between Scheduler events. I've not observed any patterns to the flickering behavior, as it sometimes ceases entirely.
In the past, when using Javascript to render rich content in tooltips, I've added a delay, but that doesn't appear to be an option with this control.
Any recommendations or workarounds to address this behavior?
1 answer
104 views
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?
0 answers
112 views
I'm using a textbox in a grid and have a real estate issue where text is cut off because I'm limited on the width of the textbox. The end users will typically save special characters (e.g. '@, ( ), etc...'). These cause the tooltip to blow up as it appears to use a Jquery selector which doesn't like special characters.
Is there a workaround for this? I don't want to tell the end-users that they can't use characters they're used to using.
1 answer
59 views
How would I go about adding a tool tip on hover to items on a Telerik Menu using Telerik UI for Blazor?
Thanks.
