Description
When going fast over the Grid rows with the mouse cursor, the rows are highlighted after a delay. The delay is more noticeable on higher resolutions (2560x1440 or higher).
Steps To Reproduce
- Hover the first Grid row and move the mouse cursor towards the last row (or vice versa).
Actual Behavior
In the app that targets .NET10 the row hover styles are applied with a delay, whereas in the app that targets .NET8 the hover styles are applied as soon as the mouse enters the boundaries of a row.
Expected Behavior
Similar performance in applying hover-related styles.
Browser
All
Last working version of Telerik UI for Blazor (if regression)
No response
The appointments at the start of the day seem accurate. If you scroll down, the position of the appointments does not line up with the grid line for the hour that it starts at or ends at. The issue can be observed in the live demo.
Description
A pane that has Closeable="false" set does not render a "close" button and should not be closeable through any user interaction. However, pressing the Esc keyboard key (while the pane is floating and has the focus) closes the pane.
Steps To Reproduce
Run the following REPL example: https://blazorrepl.telerik.com/QTkgmKuM23c0uPv125
- Focus the floating pane.
- Press the Esc keyboard key.
A slightly different scenario: there are no panes declared in a DockManagerFloatingPanes tag. The user drags a DockManagerContentPane making it float, then presses Esc key: https://blazorrepl.telerik.com/QJuUGUlv43toAJhk40
Actual Behavior
The floating pane closes.
Expected Behavior
The floating pane remains open.
Workaround:
Add the following script to the view:
<script suppress-error="BL9992">
document.addEventListener(
"keydown",
function (e) {
if (e.key === "Escape" && e.target.classList.contains("k-dock-manager-window")) {
e.stopImmediatePropagation();
e.preventDefault();
}
},
true
);
</script>Browser
All
Last working version of Telerik UI for Blazor (if regression)
No response
I am creating a Donut Chart and believe I have found a bug. On the initial load of the page, the donut chart element is not playing its animation when the label property "Visible=false". Instead, it pops on with no animation. The animations do play on the drilldown elements on their initial loads, but clicking the refresh chart button also causes this behavior even on drilldown levels. Resetting the drilldown also causes this behavior. The chart legend remains visible during the time when the chart is not. Setting the labels visible property to true causes the animations to play correctly. This proof of concept utilizes static data. The application was created using the telerik templates and is correctly injecting the telerik components as all other telerik components, including other chart components, are functioning as expected. I have isolated the code for the donut chart and posted it here.
<TelerikButton OnClick="@(() => DonutChart.Refresh())">Refresh Donut Chart</TelerikButton>
<TelerikButton OnClick="@(() => DonutChart.ResetDrilldownLevel(0))">Reset DrillDown</TelerikButton>
<!-- Donut Chart -->
<TelerikChart @ref="DonutChart">
<ChartTitle Text="Donut Chart" />
<ChartLegend Position="Telerik.Blazor.ChartLegendPosition.Right" />
<ChartSeriesItems>
<ChartSeries Type="ChartSeriesType.Donut"
Data="@donutData"
Field="@nameof(DonutModel.Number)"
CategoryField="@nameof(DonutModel.Category)"
ColorField="@nameof(DonutModel.SegmentColor)"
DrilldownField="@nameof(DonutModel.DrillDown)">
<ChartSeriesBorder Color="white" Width="2" />
<ChartSeriesLabels Position="ChartSeriesLabelsPosition.Above"
Visible="false"
Background="transparent">
</ChartSeriesLabels>
</ChartSeries>
</ChartSeriesItems>
</TelerikChart>
@code {
// Donut Chart
public TelerikChart DonutChart;
public class DonutModel
{
public string Category { get; set; }
public int Number { get; set; }
public string SegmentColor { get; set; }
public ChartSeriesDescriptor? DrillDown { get; set; }
}
public List<DonutModel> donutData = new List<DonutModel>
{
new DonutModel
{
Category = "Category 1 with Drilldown",
Number = 263,
SegmentColor = "#9d3cc7",
DrillDown = new ChartSeriesDescriptor
{
Name = "Drilldowns",
Type = ChartSeriesType.Donut,
Field = nameof(DonutModel.Number),
CategoryField = nameof(DonutModel.Category),
DrilldownField = nameof(DonutModel.DrillDown),
Data = new List<DonutModel>()
{
new DonutModel
{
Category = "Drill Down 1",
Number = 102,
SegmentColor = "#9d3cc7",
DrillDown = new ChartSeriesDescriptor
{
Name = "People",
Type = ChartSeriesType.Donut,
Field = nameof(DonutModel.Number),
CategoryField = nameof(DonutModel.Category),
Data = new List<DonutModel>()
{
new DonutModel
{
Category = "John Doe",
Number = 27,
SegmentColor = "#9d3cc7"
},
new DonutModel
{
Category = "David Smith",
Number = 45,
SegmentColor = "green"
},
new DonutModel
{
Category = "Mary Johnson",
Number = 63,
SegmentColor = "yellow"
},
new DonutModel
{
Category = "Robert Brown",
Number = 56,
SegmentColor = "orange"
}
}
}
},
new DonutModel
{
Category = "Drilldown 2",
Number = 67,
SegmentColor = "green",
DrillDown = new ChartSeriesDescriptor
{
Name = "People",
Type = ChartSeriesType.Donut,
Field = nameof(DonutModel.Number),
CategoryField = nameof(DonutModel.Category),
Data = new List<DonutModel>()
{
new DonutModel
{
Category = "John Doe",
Number = 15,
SegmentColor = "#9d3cc7"
},
new DonutModel
{
Category = "David Smith",
Number = 17,
SegmentColor = "green"
},
new DonutModel
{
Category = "Mary Johnson",
Number = 19,
SegmentColor = "yellow"
},
new DonutModel
{
Category = "Robert Brown",
Number = 16,
SegmentColor = "orange"
}
}
}
},
new DonutModel
{
Category = "Drilldown 3",
Number = 10,
SegmentColor = "orange",
DrillDown = new ChartSeriesDescriptor
{
Name = "People",
Type = ChartSeriesType.Donut,
Field = nameof(DonutModel.Number),
CategoryField = nameof(DonutModel.Category),
Data = new List<DonutModel>()
{
new DonutModel
{
Category = "John Doe",
Number = 3,
SegmentColor = "#9d3cc7"
},
new DonutModel
{
Category = "David Smith",
Number = 4,
SegmentColor = "green"
},
new DonutModel
{
Category = "Mary Johnson",
Number = 1,
SegmentColor = "yellow"
},
new DonutModel
{
Category = "Robert Brown",
Number = 2,
SegmentColor = "orange"
}
}
}
}
}
}
},
new DonutModel
{
Category = "Category 2 with no Drilldown",
Number = 31,
SegmentColor = "#fab933"
}
};
It does not happen always and I think it is happenning when the internet connection is slow and it shows a Javascript error as well (screenshots below)
In the case of a sorted column, NVDA is not narrating the correct column name and narrating the incorrect Roles for the column headers.
In the case of an unsorted column, NVDA is narrating the column name twice and repeating the information.
Description
Regression introduced in v9.0.0.
Initial binding to a property works, but when either the RemoveAttributes or the StripTags parameter is set, on changing the Editor value, two-way binding does not work and the new Editor value is not reflected in the property value.
Potentially related to #3887
Steps To Reproduce
- Run the following example:
<p role="status">Current Editor value: @CurrentEditorText</p>
<TelerikEditor @bind-Value="@CurrentEditorText">
<EditorSettings>
<EditorPasteSettings ConvertMsLists="@true"
RemoveAllAttributes="@true"
RemoveAttributes="@(new List<string> { "lang" })"
RemoveHtmlComments="@true"
RemoveMsClasses="@true"
RemoveMsStyles="@true"
StripTags="@( new List<string> { "h1" })">
</EditorPasteSettings>
</EditorSettings>
</TelerikEditor>
@code {
private string CurrentEditorText { get; set; } = @"<strong>initial</strong><span>value</span>";
public List<string> RemoveAttributes { get; set; } = new List<string>() { "data-id" };
public List<string> StripTags { get; set; } = new List<string>() { "font" };
}
- Type in the Editor's content area
Actual Behavior
The CurrentEditorText property value is not updated.
Expected Behavior
The CurrentEditorText property value is updated.
Browser
All
Last working version of Telerik UI for Blazor (if regression)
8.1.1
---
ADMIN EDIT
A workaround is to initialize the RemoveAttributes list:
<TelerikEditor @bind-Value="@EditorContent">
<EditorSettings>
<EditorPasteSettings
RemoveAttributes="@( new List<string>() )"
>
</EditorPasteSettings>
</EditorSettings>
</TelerikEditor>
@EditorContent
@code{
string EditorContent { get; set; }
}---
When copy-pasting a cell from Excel to the Spreadsheet, our component then generates an invalid horizontal alignment value, which does not conform to the document format specification:
<alignment horizontal="start" vertical="bottom" />The valid values for horizontal do not include start:
<simpleType name="ST_HorizontalAlignment">
<restriction base="xsd:string">
<enumeration value="general"/>
<enumeration value="left"/>
<enumeration value="center"/>
<enumeration value="right"/>
<enumeration value="fill"/>
<enumeration value="justify"/>
<enumeration value="centerContinuous"/>
<enumeration value="distributed"/>
</restriction>
</simpleType>Here are the steps:
1. Copy some basic content from Excel (two text cells)
2. Paste the content to the Telerik Blazor Spreadsheet component and save the XLSX file
When triggering Grid edit mode through the Grid state and the component is using adaptive mode, the edit form doesn't show.
Possible workarounds include:
- Trigger edit mode through built-in buttons in the Grid command column on in the Grid toolbar.
- Use inline or in-cell editing.
- Use a custom edit form in a separate Window component that fills the entire viewport.
Hi,
There's a bug in TelerikComboBox. If you have ScrollMode.Virtual enabled, together with ShowClearButton enabled you can end up in a state where "No data" is shown after opening the drop down.
Steps to reproduce.
- Use a TelerikComboBox in your view.
- Assign its Data Parameter a List containing 1000 items. Set PageSize paramter to 10.
- Open the ComboBox list, scroll to bottom and select an item.
- Press the ClearButton to deselect the item.
- Preform an action that resizes the List passed to the Data parameter to 10 items.
- Open the ComboBox list again, not it will sais No data instead of showing the 10 items.
As far as i can tell this happens because Skip property (TelerikSelectBase) is not reset in the ResetValue() method.
This does not happen when you manually clear the field, becouse that calls ChangeValue, wich in turn calls Filter(), and filter does this:
if (IsVirtualScrollable)
{
Skip = 0;
}
The Grid in-cell editor will not close if the user selects content in more than one cell in the component. This can lead to problems related to uncommitted new values if the user "forgets" to confirm their edits and navigates away.
https://demos.telerik.com/blazor-ui/grid/editing-incell
Observe the inconsistency:
- While in edit mode, select the contents of another single cell. The cell in edit mode will close.
- While in edit mode, drag the mouse to select multiple other cells. The cell in edit mode will not close.
===
A possible workaround is to use @onfocusout and the Grid state to detect the problematic behavior and close the edit cell programmatically:
Issue: User is unable to switch time from the current value. If you try to select a different hour, minute, second, or AM/PM it snaps back to the current value and will never bind to a new value. If you switch out of mobile view the Adaptive Mode takes it out of full screen and it works.
Recreation Steps:
- Create a ListView
- Create a TimePicker within the ListView
- Set the Adaptive Mode on the TimePicker to Auto (This is key, if this property is removed it works)
- Run the page and switch to a mobile view format within the browse
Work-Around: We replaced the ListView with some simple divs and then everything works as intended. Additionally you can also just remove the Adaptive Mode and it will work within a ListView but you no longer get the fullscreen view.
Example Code:
@page "/test-timepicker-listview"
<h3>TimePicker in ListView Test</h3>
<TelerikListView Data="@TestItems" Width="100%">
<HeaderTemplate>
<div style="padding: 10px; background-color: #f0f0f0; font-weight: bold;">
Time Entry Items
</div>
</HeaderTemplate>
<Template>
<div style="padding: 15px; border-bottom: 1px solid #ddd;">
<div style="margin-bottom: 10px;">
<strong>Item:</strong> @context.Name
</div>
<div style="display: flex; align-items: center; gap: 10px;">
<label>Start Time:</label>
<TelerikTimePicker @bind-Value="@context.StartTime" Format="hh:mm tt" Width="150px"
AdaptiveMode="AdaptiveMode.Auto" />
</div>
<div style="display: flex; align-items: center; gap: 10px; margin-top: 10px;">
<label>End Time:</label>
<TelerikTimePicker @bind-Value="@context.EndTime" Format="hh:mm tt" Width="150px"
AdaptiveMode="AdaptiveMode.Auto" />
</div>
</div>
</Template>
</TelerikListView>
@code {
private List<TimeEntryItem> TestItems { get; set; } = new();
protected override void OnInitialized()
{
// Initialize with some test data
TestItems = new List<TimeEntryItem>
{
new TimeEntryItem { Id = 1, Name = "Morning Shift", StartTime = new DateTime(2025, 11, 18, 8, 0, 0), EndTime = new
DateTime(2025, 11, 18, 12, 0, 0) },
};
}
public class TimeEntryItem
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
}
}
The value in a numeric textbox cannot be changed for negative numerbes unless you erase all the text and restart.
<TelerikNumericTextBox Decimals="4"Max="5"Value="-4.56m"Id="general"></TelerikNumericTextBox>
Hi,
When submitting a chat message using the Chat component, it is possible to lose recently entered text.
I believe this is because:
- The TextArea in the Chat component has a debounce delay (the default 150ms delay)
- Pressing enter (or clicking the send button) fires the SendMessageAsync method instantly
- SendMessageAsync uses the last text received from the TextArea, but this can be up to 150ms behind due to the debounce delay
This is reproducible on the Chat component documentation page, https://www.telerik.com/blazor-ui/documentation/components/chat/overview#creating-blazor-chat:
- Type in some text
- Wait 150ms (i.e., wait for the button to enable, otherwise the enter keypress and button clicks are ignored)
- Type some more text and quickly hit enter (or press the button)
Depending on the timing, the last few characters/words will be lost and not included in the message.
I encounter this issue in version 11 with server side rendering, but the documentation page appears to be using version 12 with web assembly.
Thanks,
Craig
After upgrading to 12.0.0, the Content does not change when clicking tabs. I always see the Content of the first tab.
My project targets .net8.