Hi, we are using a tile layout for charts and are having an issue where the tooltips for the second row of tiles are appearing at the bottom of the screen away from the chart or not at all. Then when we scroll back to the first row of tiles the tool tips are out of alignment as well. The following screen shot shows an example.
We have a component that has a tab strip and the tile layout with the following code
<TabStripTab Title="@tabName">
@((MarkupString)tabHeading)
<TelerikTileLayout Columns="6"
RowHeight="225px"
ColumnWidth="285px"
Reorderable="true"
Resizable="true"
OnResize="@ItemResize"
OnReorder="@ItemReorder"
@ref="@TileLayout">
<TileLayoutItems>
@foreach (CustomChartViewModel chart in tab.Charts)
{
int colSpan = 2;
int rowSpan = 2;
<TileLayoutItem RowSpan="@rowSpan" ColSpan="@colSpan">
<HeaderTemplate>
<div style="text-align: right">
<TelerikButton OnClick="@(() => onDeleteChart(chart.Id, tab.Id))">X</TelerikButton>
</div>
</HeaderTemplate>
<Content>
<ChartComponent ViewModel="@chart" @ref="@charts[chart.Id]" />
</Content>
</TileLayoutItem>
}
</TileLayoutItems>
</TelerikTileLayout>
</TabStripTab>
And then a chart component that renders the individual charts with a tooltip
<TelerikChart @ref="@ChartRef" Height="100%" Width="100%" OnSeriesClick="@OnSeriesClickHandler">
<ChartTooltip Visible="true">
<Template>
<TelerikIcon Icon="information" />
@(context.Percentage.ToString("P", nfi))<br />
@((context.DataItem as MyDataModel).toolTip)
</Template>
</ChartTooltip>
<ChartSeriesItems>
<ChartSeries Type="ChartSeriesType.Donut" Data="@Data" Field="value" CategoryField="category" ColorField="color">
<ChartSeriesLabels Position="ChartSeriesLabelsPosition.OutsideEnd"
Visible="@ViewModel.ShowLabels"
Background="transparent"
Template="#= category #: #= value#">
</ChartSeriesLabels>
</ChartSeries>
</ChartSeriesItems>
<ChartTitle Text="@ViewModel.Name"></ChartTitle>
<ChartLegend Position="ChartLegendPosition.Bottom" Visible="@ViewModel.ShowLegend"></ChartLegend>
</TelerikChart>
Hello,
I'm using a numeric textbox and when I test my page for accessibility, Allyable reports the following:
Category: Ensure button or link have discernible text that is not repeated as image description
Selector: .k-form-field-wrap > .k-numerictextbox.k-widget > .k-numeric-wrap > .k-select > [role="button"].k-link-decrease
Severity: Critical
Here is my source code:
<TelerikNumericTextBox @bind-Value="@cardCleaner.Quantity" Id="cleanerQty" Width="100px" />
Is this really an accessibility issue?
Thanks,
Bernard
Hi,
If Telerik can, at some point, develop a design tool like the Radzen Design Time, that would really be nice!
Thanks
I would like to be able to set the Id on any Blazor component for automated testing purposes.
---
ADMIN EDIT
If you need something different than automated testing selectors, please add your use case in the comments.
For automated testing, you can cascade selectors through a parent element (e.g., a div or span) that has the desired attributes (be that id, class, some data-* attribute, etc.). Adding ID parameters to Blazor components can easily make them brittle because they can be repeated and included in arbitrary hierarchy easily - that's the core concept of a razor component - so such IDs need to be unique, which defeats the predictability you will need for testing.
If you are interested in testing with Selenium, you may find useful this request: https://feedback.telerik.com/blazor/1513117-translators-for-selenium-testing-for-the-telerik-ui-for-blazor-components. If so, Vote for it and Follow it so we can know there is interest, and so you can get status updates.
You can also Follow a separate enhancement for the Grid Command buttons here : https://feedback.telerik.com/blazor/1463164-id-attribute-on-buttons-telerikbuttons-gridcommandbuttons-etc
---