Version: 14.0.0
Description:
Behavior of TabStripTab is inconsistent when working with Mouse vs Keyboard driven workflow. The OnStateChanged event documentation states it fires "on any change to the active tab, tab visibility, pinning, or order." In practice, this only holds true for mouse-click tab activation. Keyboard-driven tab activation (arrow keys, Home, End) changes the active tab and raises ActiveTabIdChanged , but never raises OnStateChanged .
This creates an inconsistency for anyone using the documented state-persistence pattern ( OnStateInit / OnStateChanged ) to save and restore the TabStrip's state: tabs selected via keyboard navigation render correctly, but are silently never persisted, since the app only listens to OnStateChanged . On the next reload/restore, the selection reverts to the last mouse-selected tab.
Root cause (from the TabStrip source):
• Click path — ActivateTab(TabStripTab tab) :
await SetActiveTabAsync(tab); // raises ActiveTabIdChanged
InvokeOnStateChanged(); // raises OnStateChanged
• Keyboard path — HandleActiveTabIdNavigationAsync(...) :
await SetActiveTabAsync(nextActiveTab); // raises ActiveTabIdChanged only — InvokeOnStateChanged() is never called
Steps to reproduce:
1. Add a TelerikTabStrip with OnStateChanged bound to a handler that logs/persists the received TabStripState .
2. Add 3+ TabStripTab s.
3. Click into the tab header area to focus it, then use the arrow keys (or Home/End) to move between tabs.
4. Observe: the active tab panel changes visually, but the OnStateChanged handler is never invoked.
5. Now click a tab header directly — OnStateChanged fires as expected.
Expected: OnStateChanged should fire for every active-tab change, regardless of whether it was triggered by mouse click or keyboard navigation, matching the documented behavior.
Actual: OnStateChanged only fires for mouse-click tab activation; keyboard navigation only raises ActiveTabIdChanged .
Workaround used: Also bind ActiveTabIdChanged and merge the received tab id into the previously-captured/persisted state object (rather than relying on OnStateChanged alone).
(Also applies to AutoComplete, DropDownList, MultiSelect, MultiColumnComboBox).
When using Height="auto" in the popup settings and filtering with a dropdown above the component, the dropdown detaches from the main component.
<ComboBoxPopupSettings Height="auto"></ComboBoxPopupSettings>https://blazorrepl.telerik.com/cKkSQGFO50ovCpr829
A possible workaround is to use a MaxHeight that is less than half the browser viewport.
<ComboBoxPopupSettings Height="auto" MaxHeight="45vh"></ComboBoxPopupSettings>
With Blazor server, clicking the NOW button (obviously) sets the time to the time on the server since that's where the code is running. Is there a way to trap the NOW button click or somehow give it an offset or define the value that NOW means so NOW will mean the time that the user is sitting in?
---
TELERIK EDIT
In the meantime, here are a few possible workarounds:
1. Use the DateTimePicker's ValueChanged event to detect new values that are very close or match the server's current DateTime. In such cases, you can assume that the user has clicked on TODAY / NOW, and set the local user time as a component value.
Server Time on UI Refresh: @DateTime.Now.ToLongTimeString()
<br />
User Local Time on Page Load: @LocalTime?.ToLongTimeString()
<br />
User Local Time Offset: @LocalOffset
<br />
<br />
<TelerikDateTimePicker Value="@PickerValue"
ValueChanged="@( (DateTime? newValue) => PickerValueChanged(newValue) )"
ValueExpression="@( () => LocalTime )"
Format="yyyy-MMM-dd HH:mm:ss"
Width="240px" />
<!-- Move JS code to a separate JS file in production -->
<script suppress-error="BL9992">
function getLocalTime() {
var d = new Date();
return d.getTimezoneOffset();
}
</script>
@code {
private DateTime? PickerValue { get; set; }
private DateTime? LocalTime { get; set; }
private int LocalOffset { get; set; }
private void PickerValueChanged(DateTime? newValue)
{
DateTime serverNow = DateTime.Now;
DateTime utcNow = DateTime.UtcNow;
TimeSpan nowTolerance = new TimeSpan(0, 0, 10);
if (newValue - serverNow < nowTolerance)
{
PickerValue = utcNow.AddMinutes(-LocalOffset);
}
else
{
PickerValue = newValue;
}
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
LocalOffset = await js.InvokeAsync<int>("getLocalTime");
LocalTime = DateTime.UtcNow.AddMinutes(-LocalOffset);
StateHasChanged();
}
await base.OnAfterRenderAsync(firstRender);
}
}
2. Use the DatePicker's HeaderTemplate with a custom TODAY / NOW button.
3. Hide the NOW button with CSS:
<style>
.no-now-button .k-time-now {
display: none;
}
</style>
<TelerikDateTimePicker @bind-Value="@PickerValue"
Format="yyyy-MMM-dd HH:mm:ss"
PopupClass="no-now-button"
Width="240px" />
@code {
private DateTime? PickerValue { get; set; }
}
When the user presses ESC to exit edit mode from an EditorTemplate with a ComboBox / MultiColumnComboBox / MultiSelect, the cell value is cleared and this change persists in subsequent editing. The original data item value is cleared too, although this is not immediately obvious.
The issue occurs in version 14.1.0 and WebAssembly apps are more likely to suffer from it.
To optimize performance, I built a custom component that allows the user to choose which aggregates should be calculated. This component ensures that <GridAggregate> tags are inserted into <GridAggregates> via a foreach loop.
This works without any issues, at least when the selection is made for the first time.
However, if a selection is made in which the column of a new aggregate appears before an already selected aggregate, errors occur in the grid. AggregateResults now contains duplicates of an existing aggregate, and the new aggregates are missing.
Test project available in ticket 1718830.
Even if setting ReadOnly="true", tables in the Editor can be resized...
This only happens in Iframe mode!
<TelerikEditor Height="300px" @bind-Value="@Value" EditMode="Telerik.Blazor.EditorEditMode.Iframe" ReadOnly="true">
</TelerikEditor>
@code {
public string Value { get; set; } =
@"
<table>
<tbody>
<tr>
<td>
Some text
</td>
</tr>
<tr style=""height: 24px"">
</tr>
<tr>
<td>
Some text
</td>
</tr>
</tbody>
</table>
";
}
When the Grid is grouped and aggregate functions are enabled, paging performance degrades significantly because grouping and aggregate calculations are executed on every page change. This results in noticeable delays and UI stutter, especially in WebAssembly applications and larger datasets.
This enhancement optimizes page navigation for grouped Grid scenarios with aggregates by avoiding repeated processing when the underlying data has not changed, resulting in substantially faster paging performance while preserving existing functionality and first-load behavior.
The PDF Viewer may open certain files as empty, even though they have text and image content.
The issue occurs in version 14.0.0.
(Test file available in private ticket 1718294)
Steps to reproduce
Reproducible with UI for Blazor, as well as UI for ASP.NET Core (PDF.js and DPL processing)
- Open the attached file in the PDFViewer.
Actual Behavior
The content is visualized distorted, large parts of it are missing, layout is messed up.
Expected Behavior
The document content is visualized properly, as it is with: https://mozilla.github.io/pdf.js/web/viewer.html
Description
The data order displayed in the PivotGrid does not follow the field order shown in the Rows configuration. Similar issue: #12989
Steps To Reproduce
Run the example posted below:
From the Fields list, check ContractNumber. It is added to the Columns section by default.
Drag ContractNumber from Columns to the Rows section.
Verify in the PivotGrid settings that the Rows area now shows:
- Station
- ContractNumber
(in this order)
View the data the table.
@using Telerik.Blazor.Components.PivotGrid
<TelerikButton OnClick="@OnRefresh">Refresh</TelerikButton>
<TelerikLoaderContainer Visible="@_isLoading" Text="Please wait..." />
<div class="pivot-main-container">
<TelerikPivotGridContainer>
<TelerikPivotGridConfiguratorButton></TelerikPivotGridConfiguratorButton>
<TelerikPivotGridConfigurator></TelerikPivotGridConfigurator>
<div class="pivot-grid-container">
<TelerikPivotGrid Data="@PivotData" DataProviderType="@PivotGridDataProviderType.Local"
@ref="_PivotGridRef" ColumnHeadersWidth="100px" RowHeadersWidth="130px">
<ColumnHeaderTemplate>
@{
var ctx = (PivotGridColumnHeaderTemplateContext)context;
int underscoreIndex = ctx.Text.IndexOf("-");
string text = ctx.Text;
if (underscoreIndex > 0)
{
text = text.Replace(text.Substring(0, underscoreIndex + 1), "");
<span>@text</span>
}
else
{
<span>@ctx.Text</span>
}
}
</ColumnHeaderTemplate>
<RowHeaderTemplate>
@{
var ctx = (PivotGridRowHeaderTemplateContext)context;
int underscoreIndex = ctx.Text.IndexOf("-");
if (underscoreIndex == 1)
{
string text = ctx.Text;
text = text.Replace(text.Substring(0, underscoreIndex + 1), "");
<span>@text</span>
}
else
{
<span>@ctx.Text</span>
}
}
</RowHeaderTemplate>
<DataCellTemplate Context="dataCellContext">
@{
var c = (PivotGridDataCellTemplateContext)dataCellContext;
string amt;
if (c.Value is AggregateException || c.Value?.GetType().Name == "AggregateError")
{
amt = "-";
}
else if (c.Value == null)
{
amt = (0m).ToString("C2");
}
else if (c.Value is IConvertible)
{
// Safe convert for numbers
amt = Convert.ToDecimal(c.Value).ToString("C2");
}
else
{
amt = c.Value?.ToString() ?? string.Empty;
}
}
<div style="text-align: right;">
@amt
</div>
</DataCellTemplate>
<PivotGridRows>
<PivotGridRow Name="@nameof(RptContractSalesSummaryModel.Station)" Title="Station" />
</PivotGridRows>
<PivotGridColumns>
<PivotGridColumn Name="@nameof(RptContractSalesSummaryModel.Year)" Title="Year" HeaderClass="year-header" />
<PivotGridColumn Name="@nameof(RptContractSalesSummaryModel.Month)" Title="Month" />
</PivotGridColumns>
<PivotGridMeasures>
<PivotGridMeasure Name="@nameof(RptContractSalesSummaryModel.Rate)" Title="Total"
Aggregate="@PivotGridAggregateType.Sum" />
</PivotGridMeasures>
</TelerikPivotGrid>
</div>
</TelerikPivotGridContainer>
</div>
@code
{
private List<RptContractSalesSummaryModel> PivotData { get; set; } = [];
public TelerikNotification NotificationReference { get; set; } = default!;
public TelerikPivotGrid<RptContractSalesSummaryModel> _PivotGridRef { get; set; } = default!;
private CancellationTokenSource cancelToken = new CancellationTokenSource();
private bool _isDisposed { get; set; } = default!;
private bool _isLoading { get; set; } = default!;
protected override async Task OnInitializedAsync()
{
await LoadReportData(cancelToken.Token);
await base.OnInitializedAsync();
}
private async Task LoadReportData(CancellationToken token)
{
_isLoading = true;
await Task.Delay(1000);
var dataItemCount = 10000;
var stationCount = 30;
var rnd = Random.Shared;
for (int i = 1; i <= dataItemCount; i++)
{
var stationNumber = rnd.Next(1, stationCount);
if (token.IsCancellationRequested || _isDisposed) { return; }
;
PivotData.Add(new RptContractSalesSummaryModel()
{
Station = $"Station {stationNumber}",
ContractMonth = DateTime.Today.AddMonths(-rnd.Next(0, 13)),
Rate = rnd.Next(123, 987) * 1.23m,
ContractNumber = i,
InternetOrderID = i * 10
});
}
PivotData = PivotData
.OrderBy(x => x.Station)
.ThenBy(x => x.Year)
.ThenBy(x => x.Month).ToList();
if (_PivotGridRef != null && !_isDisposed)
{
_PivotGridRef?.Rebind();
}
_isLoading = false;
}
public async Task OnRefresh()
{
await LoadReportData(cancelToken.Token);
await Task.CompletedTask;
}
public async ValueTask DisposeAsync()
{
PivotData = [];
await Task.CompletedTask;
}
public class RptContractSalesSummaryModel
{
public DateTime ContractMonth { get; set; }
public int Year => ContractMonth.Year;
public string Month => $"{MapMonthToLetter(ContractMonth.Month)}-{ContractMonth:MMMM}";
public string Station { get; set; } = string.Empty;
public string? SalesPerson { get; set; }
public string? AdvertiserName { get; set; }
public string? AgencyName { get; set; }
public string? Product_Description { get; set; }
public string? Brand { get; set; }
public string AccountType1 { get; set; } = string.Empty;
public string AccountType2 { get; set; } = string.Empty;
public decimal? Rate { get; set; }
//public int? RptUserKey { get; set; }
public string? Demographics { get; set; }
public string? OrderType { get; set; }
public string? SalesOffice { get; set; }
public int? ContractNumber { get; set; }
public string? SectionLevel { get; set; }
public string? AgencyGroup { get; set; }
public string? AdvertiserGroup { get; set; }
public string? ProductGroup { get; set; }
public string? LineNumber { get; set; }
public string? RevenueClassDescription { get; set; }
public string? InternetIntegrationType { get; set; }
public string? LineType { get; set; }
public string? RateType { get; set; }
public string? InternetAdType { get; set; }
public string? InternetSubAdType { get; set; }
public DateTime? LineStartDate { get; set; }
public DateTime? LineEndDate { get; set; }
public long? InternetOrderID { get; set; }
public DateTime? InitialDelivery { get; set; }
public string? QuantityType { get; set; }
public long? QuantityOrdered { get; set; }
public long? ImpressionsDelivered { get; set; }
public long? ClicksDelivered { get; set; }
public long? Goal { get; set; }
public string? Limit { get; set; }
public string? BillingType { get; set; }
public decimal? DeliveredRevenue { get; set; }
public string? PerformanceStatus { get; set; }
public DateTime? LastSuccessfulJobRun { get; set; }
public string? InternetEnvironment { get; set; }
public string? UserField1 { get; set; }
public string? ExternalID { get; set; }
// to sort the months correctly in the pivot grid
private static string MapMonthToLetter(int month)
{
return month switch
{
1 => "A",
2 => "B",
3 => "C",
4 => "D",
5 => "E",
6 => "F",
7 => "G",
8 => "H",
9 => "I",
10 => "J",
11 => "K",
12 => "L",
_ => "?"
};
}
}
}
Actual Behavior
The data order displayed in the PivotGrid does not follow the field order shown in the Rows configuration.
Expected Behavior
The rendered PivotGrid data should strictly follow the order of fields as defined in the Rows (or Columns) area settings.
Browser
All
Last working version of Telerik UI for Blazor (if regression)
No response
I bind the TelerikEditor Value to a property that is reloaded with different unrelated content. The editor keeps the Undo/Redo stack so for the "second" content I can Undo back to the "first" content. I'd like to be able to clear the Undo stack.
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)